[번역] Tutorial: Overview 5

Developer Tools

개발자 도구

 

The React Devtools extension for Chrome and Firefox lets you inspect a React component tree with your browser’s developer tools.

리액트 개발자 도구 크롬이나 파이어폭스용 확장버전은 너가 너의 브라우저 개발자 도구에서 리액트 컴포넌트 구조를 검사할 수 있게 해준다.

The React DevTools let you check the props and the state of your React components.

리액트 개발자도구는 리액트 컴포넌트의 props와 state를 확인한다.

 

After installing React DevTools, you can right-click on any element on the page, click “Inspect” to open the developer tools, and the React tab will appear as the last tab to the right.

리액트 개발자도구를 설치하고서, 페이지의 아무 요소위에서 오른쪽 버튼을 클릭하고, inspect를 클릭하면 개발자도구가 열린다. 그리고 리액트 탭은 오른쪽 탭 가장 마지막에 있을 것이다.

 

However, note there are a few extra steps to get it working with CodePen:

그러나, 코드펜에서 동작하기위해선 몇 단계가 남아있다.

1. Log in or register and confirm your email (required to prevent spam).
2. Click the “Fork” button.
3. Click “Change View” and then choose “Debug mode”.
4. In the new tab that opens, the devtools should now have a React tab.

1. 로그인하거나 등록한뒤 너의 이메일을 확인해라. (

2. fork 버튼을 클릭해라.

3. change view를 클릭하고 debug mode를 선택해라.

4. 열린 새 탭에서 이제 개발자도구는 리액트 탭에 있을 것이다.