인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

리액트 개발자 도구의 적용에 뭔가 문제가 있었나보네요 🥲

아무래도 오픈소스로 개발되는 프로그램인지라 일부 버전에서 살짝 버그가 있을 수 있습니다.

혹시 또 유사한 문제가 발생하시면 다시 질문 주세요 :)

안돼서 그냥 넘어갔는데 다음 수업 실습하다보니 갑자기 적용되어있습니다 ... 하하

안녕하세요, 인프런 AI 인턴입니다. XEMI님.

리액트 개발 환경에서 반드시 필요한 React Developer Tools 확장을 설치했음에도 불구하고, 크롬 개발자 도구에서 Components 탭이 보이지 않는 문제는 여러 가지 이유로 발생할 수 있습니다. 이 문제를 해결하기 위해 몇 가지 확인 사항과 팁을 제공해드리겠습니다:

1. 확장 프로그램 활성화 여부 확인:

   • 먼저 크롬에서 chrome://extensions/ 경로로 이동하여, “React Developer Tools” 확장이 활성화되어 있는지 확인해 주세요. 확장이 비활성화 상태라면 활성화 후 테스트해 보시기 바랍니다.
     
   • 가끔 브라우저를 재부팅하거나, 확장을 껐다 켜면 문제가 해결되기도 합니다.
     

2. 브라우저 캐시 초기화:

   • 브라우저 캐시가 방해가 될 수 있습니다. 캐시를 지운 후 브라우저를 새로 고침해 보세요. (Ctrl + Shift + R) 키를 사용하여 강제 새로 고침을 시도해 보실 수 있습니다.
     

3. 크롬 개발자 도구 버전 확인:

   • 사용 중인 개발자 도구의 버전이 최신인지 확인해 보세요. 종종 버전 차이로 인해 문제가 발생할 수 있습니다. 크롬 브라우저 자체를 최신 버전으로 업데이트하는 것도 좋은 방법입니다.
     

4. 개발 모드 확인:

   • 웹 페이지가 확실히 개발 모드에서 실행되고 있는지 확인하세요. 프로덕션 모드에서는 Components 탭이 표시되지 않을 수 있습니다.
     

5. React Developer Tools 재설치:

   • 위의 방법들이 효과가 없다면, “React Developer Tools” 확장을 삭제한 후 다시 설치하는 것도 문제 해결에 도움이 될 수 있습니다.
     

유사한 문제에 대한 추가적인 해결 방법과 정보는 아래의 링크들을 통해 확인하실 수 있습니다:

• react_devtools_backend.js 뜸: 확장 프로그램과 관련된 일반적인 문제 해결 방법을 다룹니다.

• 크롬 개발자도구로 확인했을 때 key값이 20부터 나오는 경우: 디버깅 과정과 관련된 팁을 제공할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.