Chrome 개발자 도구에 반응 탭이 표시되지 않음
React Developer Tools Chrome 브라우저 확장을 설치했습니다.그러나 개발자 도구에는 React 탭이 표시되지 않고 "Components" 및 "Profiler"라는 새로운 탭이 있습니다.
확장자를 다시 설치하고 브라우저와 컴퓨터를 재시작한 후 chrome://extensions/아래에 있는 "파일 URL에 액세스 허용"을 체크했습니다.리액션 https://reactjs.org/tutorial/tutorial.html이 있는 URL로 이동해도 리액트 탭이 표시되지 않습니다.그러나 Chrome 플러그인(브라우저 오른쪽 상단에 있는 반응 디텍터)은 해당 플러그인에 react.js가 있음을 나타냅니다.[ React ]탭을 표시하려면 어떻게 해야 하나요?
'react'를 사용하고 있습니다.16.8.6
Facebook이 React DevTools를 업데이트하여 Components(컴포넌트) 및 Profiler(프로파일러) 탭이 있으므로 React(반응) 탭을 볼 수 없습니다. ⚛️ Components탭은 이전 버전의 리액트 탭과 동일한 용도로 사용됩니다.설명에 의하면
Chrome DevTools에 "⚛components" 및 "⚛components Profiler"라는 두 가지 새로운 탭이 표시됩니다.
Components 탭에는 페이지에 렌더링된 루트 React 구성 요소와 렌더링된 하위 구성 요소가 표시됩니다.
버전부터 알 수 있습니다.4.0.0릴리스 노트를 참조해 주세요.
확장을 설치한 후 표시되지 않아 페이지를 새로 고치지 않았습니다.그렇지만closing the tab and reopening it again나에게 효과가 있게 해주었다
확장 버전을 설치한 후 확장 기능(일반적으로 화면의 오른쪽 위 부분) 옆에 작은 '원자형 반응' 아이콘이 표시되며, ReactJ로 웹 사이트를 구축하지 않은 경우 이 확장 기호는 회색으로 표시되고 DevTools에는 메뉴가 표시되지 않습니다.단, Google Chrome 업데이트 및 확장 재설치를 권장합니다.컴퓨터를 재부팅하면 도움이 될 수 있습니다.
위의 답변에서 설명한 바와 같이 React Dev Tools는 아래 이미지와 같이 Components(컴포넌트) 및 Profiler(프로파일러) 탭으로 대체되었습니다.[ Components ]탭의 컴포넌트명을 클릭하면 오른쪽에 소품이나 상태와 같은 컴포넌트에 대한 자세한 정보가 표시됩니다.
확장 버전을 설치한 후 Chrome 확장 기능으로 이동하여 React Developer Tools 확장을 활성화하면 표시되기 시작했습니다.
문제가 발생했을 경우는, 분명히 React DOM 를 사용하고 있습니다.트러블 슈팅 지시에서 해결책을 얻었습니다.
추가만 하면 됩니다.
<script src="http://localhost:3000"></script>
로로 합니다.<head>index.html.
는 반드시 .localhost.
크롬에서 refresh를 누르면 react-devtools 확장자 색상이 빨간색으로 변경되어 사용할 준비가 되었음을 나타냅니다.그런 다음 크롬으로 검사를 열면 두 가지 구성 요소와 프로파일러 옵션이 표시됩니다.
React와 ReactDom을 버전 16.8에서 v17로 업데이트한 것이 마침내 효과가 있었습니다.
최신 Chrome 브라우저와 최신 React 개발자 도구도 사용하고 있습니다.React 기술로 작성된 웹 사이트 또는 페이지를 볼 때만 구성 요소가 표시됩니다.예를 들어 Google 홈페이지에 있을 때는 개발 도구에 React components 버튼은 표시되지 않지만 Facebook 또는 React 홈페이지 또는 react with react를 사용하는 다른 페이지 빌드에 있을 때는 개발 도구에 Component 버튼과 Profiler 버튼이 표시됩니다.브라우저 확장줄에 있는 확장버튼은 사용하고 있는 웹사이트가 반응하는지 여부를 알려 줍니다.
터미널 실행 시:
npm install -g serve
그런 다음 다음을 실행합니다.
serve -s build
리액트 개발 툴이 동작하는 다음과 같은 새로운 localhost 주소를 찾을 수 있습니다.
Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://192.168.10.131:5000 │
│ │
│ Copied local address to clipboard!
언급URL : https://stackoverflow.com/questions/57533450/react-tab-doesnt-appear-in-chrome-developer-tools
'programing' 카테고리의 다른 글
| 데이터 프레임을 JSON으로 변환 (0) | 2023.03.21 |
|---|---|
| angular.element에서 raw DOM 요소를 가져오는 방법이 있습니까? (0) | 2023.03.21 |
| LogStash에서의 JSON 사용 (0) | 2023.03.21 |
| 액션 컨트롤러:알 수 없는 형식 (0) | 2023.03.21 |
| 스프링 부트 Mongo Repository 유닛 테스트 방법 (0) | 2023.03.21 |