프론트엔드 개발자로서 잘 사용하고 있는 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
Hello does anybody knows what's wrong with my react dev tools? the components tab is blank
stackoverflow.com
참고 링크
해당 문제에 대한 솔루션과 관련된 스택 오버플로우 링크를 참고할 수 있다.
https://stackoverflow.com/questions/62299345/react-extension-is-missing-in-dev-tools
React extension is missing in Dev tools
I am trying to get my react extension working for local development, but "Components" and "Profiler" is missing in the Chrome developer tools. This only happens for local development, any other
stackoverflow.com
참고 사항
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가 노출되지 않는 문제를 해결할 수 있다!
댓글