React.js의 정상적인 디버깅 튜토리얼
React.js 앱 디버깅 방법에 대해 단계별 초보 튜토리얼을 제안해 주실 수 있습니까?React를 처음 접하는 사람인데, 지금 가장 짜증나는 것은 콘솔에 오류가 많이 표시되는데 어떻게 추적해야 할지 모르겠다는 것입니다.
"많은 오류가 표시됨"을 디버깅하는 일반적인 전략은 설명하기가 어렵기 때문에 컴포넌트 수준의 오류를 디버깅하는 프로세스에 대해 설명합니다.
선택한 브라우저에 React dev tools 확장을 설치합니다.
컴포넌트 검색
다음 중 하나의 경로를 권장합니다.
2.a. 오픈
React tab브라우저 개발 도구에서 하단 검색란에 입력하여 구성 요소를 이름으로 조회합니다.2.b. 오픈
Elements tab, 일부 요소를 선택한 후 로 전환합니다.React컴포넌트 계층은 에서 선택한 DOM 노드에 일치하는 React 컴포넌트까지 확장됩니다.Elements.올바르게 동작하지 않는 컴포넌트의 상태와 지주를 검사합니다.
어떤 이유로 브라우저 확장 설치를 좋아하지 않는 경우 하나 또는 여러 개를 던질 수 있습니다.debugger;중단점을 설정하여 앱 실행을 "중지"하고 콜 스택, 범위 및 이러한 지점의 오류를 검사할 수 있도록 합니다.
React에는 크롬 개발 도구에 자체 디버깅 도구가 설치되어 있습니다.현재 리액트 앱 디버깅에 가장 적합한 도구입니다.중단점을 추가하고 개발 도구에서 소품을 편집하여 즉각적인 결과를 볼 수 있습니다.좋은 튜토리얼은 React 디버깅을 위한 공식 튜토리얼인 https://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html,입니다.또한 "React Developer Tools" 확장 버전을 다운로드하여 개발 도구에 대한 반응 종속성을 크롬으로 설치할 수 있습니다.
반응 종속성 없이 표준 Chrome 디버거를 사용할 수도 있습니다. 이 디버거도 잘 작동합니다.Chrome 디버깅에 적합한 튜토리얼은 https://developers.google.com/web/tools/javascript/index?hl=en 입니다.
주요 문제는 개발 도구를 통해 코드에 중단점을 추가하는 방법과 문제에서 얻은 응답을 통해 문제를 식별하는 방법을 배우는 것입니다.마지막 튜토리얼은 그 방법을 잘 보여줍니다.
그게 조금이라도 도움이 되고 행복한 코딩이 되었으면 좋겠어!
언급URL : https://stackoverflow.com/questions/32772379/any-good-debug-tutorial-for-react-js
'programing' 카테고리의 다른 글
| MongoDB와 Mongoose의 차이점 (0) | 2023.03.27 |
|---|---|
| JSON 스키마에서 스키마를 확장하는 방법 (0) | 2023.03.27 |
| mongodb를 사용하여 부모 객체의 배열에 포함된 객체의 속성을 업데이트하려면 어떻게 해야 합니까? (0) | 2023.03.22 |
| .NET Core: API JSON 응답에서 null 필드를 삭제합니다. (0) | 2023.03.22 |
| mapStateToProps 대신 useselector/useDispatch를 사용해야 합니까? (0) | 2023.03.22 |