Google에서 반응 프로젝트를 디버깅하는 방법

Google에서 React 프로젝트를 디버깅하는 방법: 먼저 Chrome을 사용하여 디버깅해야 하는 React 페이지를 열고 "개발자 도구"를 연 다음 "개발자 도구" 위 도구 모음의 맨 오른쪽에 있는 반응 라벨을 클릭하세요. 마지막으로 각 컴포넌트 간의 관계를 확인합니다. 각 컴포넌트의 중첩 관계와 이벤트, 속성, 상태 및 기타 정보로 충분합니다.

이 튜토리얼의 운영 환경: windows7 시스템, React17.0.1&&chrome87.0 버전, thinkpad t480 컴퓨터.

추천: "react 비디오 튜토리얼"

Google Chrome에서 React 프로젝트를 디버깅하는 방법은 무엇인가요?

(1) 먼저 Chrome을 사용하여 디버깅이 필요한 React 페이지를 열고 "개발자 도구"를 엽니다.

(2) "개발자 도구" 위의 도구 모음 오른쪽 끝에 반응 라벨이 있습니다. 현재 애플리케이션의 구조를 보려면 이 탭을 클릭하세요.

React Developer Tools를 통해 다양한 구성 요소 간의 중첩 관계는 물론 각 구성 요소의 이벤트, 속성, 상태 및 기타 정보를 쉽게 확인할 수 있습니다.

(3) React 개발자 도구는 React 구성 요소를 자동으로 감지합니다. 그러나 webpack-dev-server 모드에서는 webpack이 자동으로 React 구성 요소를 iframe에 배치하므로 해결 방법은 webpack-dev-server입니다. --inline 모드에서:

webpack-dev-server --inline

(4) 지금까지 es6 표준을 기본적으로 지원하는 브라우저는 거의 없습니다. 이 상황을 위해 Chrome은 소스 맵 파일을 도입했습니다. 트랜스코딩하기 전의 es6 코드 행은 es5 코드에 해당합니다. 해야 할 유일한 일은 소스 맵 파일을 자동으로 생성하도록 webpack을 구성하는 것입니다. 이 또한 webpack.config.js에 구성 행을 추가하기만 하면 됩니다. 구성을 적용하려면 webpack-dev-server를 다시 시작해야 합니다)

(5) 뭔가를 오류로 수정하고 결과를 관찰하세요

더 많은 React 관련 기술 기사를 보려면, 알아보려면 React Q&A 칼럼을 방문하세요!

위 내용은 Google에서 반응 프로젝트를 디버깅하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!