반응 개발 도구가 Chrome 브라우저에서 로드되지 않음

반응 개발 도구가 Chrome 브라우저에서 로드되지 않음

React.js를 사용하는 응용 프로그램을 디버깅하고 있습니다.Chrome Extensions 목록에는 React Developer Tools가 설치되어 있습니다.또한 http://facebook.github.io/react/의 React 사이트에 접속하면 Developer Tools 창에 React 탭이 나타납니다.그러나 응용 프로그램을 디버깅할 때 콘솔에 다음과 같이 표시됩니다.

Download the React DevTools for a better development experience: http://fb.me/react-devtools React.js:87

React Developer Tools를 사용하는 방법을 알려 주시겠습니까?

고마워!

브라우저에서 로컬 html 파일(file://...)을 연 경우 먼저 크롬 확장자를 열고 "파일 URL에 대한 액세스 허용"을 선택해야 합니다.

당신은 더 이상 아무것도 할 필요가 없어요.

---

이전 리액트 버전의 경우 주요 요건은 해당 창입니다.리액션이 설정되었습니다.모듈 시스템을 사용하는 경우:

if (typeof window !== 'undefined') {
    window.React = React;
}

이 작업은 보통 메인 소스 파일에서 수행해야 합니다.

React 개발 도구가 설치되어 현재 페이지에 작동 중인 경우에도 이 메시지는 항상 표시됩니다.이 문제는 0.12로 수정됩니다(마스터에서는 이미 수정되어 있습니다).https://github.com/facebook/react/pull/953 를 참조해 주세요.

무명 모드일 경우 리액트 툴도 작동하지 않습니다.도움이 될지도 몰라

리액트 앱을 로컬로 실행하면

1. react-devtools를 설치합니다(로컬에서 실행할 경우 bcz chrome이 React App임을 차감하지 않습니다).

   npm install -g react-devtools

2. 또한 Chrome에 "React Developer Tools" 확장을 추가합니다.

웹 팩을 사용하는 경우 webpack.config.js 파일로 인해 플러그인이 초기화되지 않았는지 확인하십시오.웹 팩 스크립트에는 다음 행이 있습니다.

  plugins: [
    new webpack.DefinePlugin({
        '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
    }),
  ],

삭제했더니 React Dev Tools가 다시 작동합니다.

언급URL : https://stackoverflow.com/questions/26347489/react-dev-tools-not-loading-in-chrome-browser