React developer tools에서 Components와 Profiler가 노출되지 않는 문제 해결 방법

프론트엔드 개발자로서 잘 사용하고 있는 React developers tools에서 Components와 Profiler이 노출되지 않는 문제 상황과 해결방법을 소개합니다. 크롬 개발자 도구 설정 변경을 통해 문제를 해결할 수 있다.

 

문제 상황

React local개발 시 Components와 Profiler가 노출되지 않음

React developer tools don't show Components , Profiler

 

 

해결 방안 1

1) Chrome > 설정 > 기본 설정으로 복원 

크롬 devtools 세팅에서 기본 세팅으로 변경한다.

 

Chrome > Settings > Preferences > Sync > Restore defaults and reload

 

2) 강력 새로고침

크롬 브라우저에서 강력한 새로고침을 실행하여 확인 단축키는 "Cmd + Shift + N"

 

 

 

해결 방안2

만약 또 간혈적으로 해당 현상이 반복된다면,? URL 진입 이후  React dev tools를 reload하자.

 

1. 개발자 도구에서 명령어 입력을 킨 뒤  "cmd + shift+ p "  Reload DevTools 를 입력해도 되고 

2. 바로 Reload DevTools 단축키를 입력해도 된다. 단축키는 "opt +R " 이다.

 

 

 

https://stackoverflow.com/questions/58032015/react-dev-tools-blank-component

React dev tools blank component

 

참고 링크

해당 문제에 대한 솔루션과 관련된 스택 오버플로우 링크를 참고할 수 있다.

https://stackoverflow.com/questions/62299345/react-extension-is-missing-in-dev-tools

React extension is missing in Dev tools

 

참고 사항

This page is using the development build of React. 🚧 Note that the development build is not suitable for production. Make sure to use the production build before deployment.

 

이 메세지도 함께 뜰 수 있는데 이 경우는 React 를 dev mode로 활용중이라는 경고로 Components와 Profiler가 뜨지 않는 것과 별개의 문제이다.

 

 

위의 방법을 참고하여 React 개발 시 Components와 Profiler가 노출되지 않는 문제를 해결할 수 있다!