크롬 DevTools 리로드 문제 해결하기([Error] Looks like this page doesn't have React, or it hasn't been loaded yet.)

크롬 개발자 도구 사용 중에 실수로 불편을 겪을 수 있는 문제라고 생각되어 공유하게 되었습니다. 

 

문제 상황

리액트 애플리케이션이 잘 동작하는데 리로드만 하면 자꾸 react-dev-tools에서 다음과 같은 에러가 발생하며 페이지가 무한 로딩 되는 문제가 있었습니다. 

Looks like this page doesn't have React, or it hasn't been loaded yet

 

 

그리고 네트워크 탭을 확인했을 때 아래와 같이 스크립트 로드가 실패하는 것을 확인할 수 있었습니다. 

 

분명히 리액트로 만들어진 페이지고, DevTools를 끄면 잘 동작하는데 왜 이런 걸까요..?  

 

해결

스택오버플로우의 이 글에 따르면 크롬 DevTools 디버거가 breakpoints에서 멈추는 경우 페이지를 리로드 하지 않는 문제가 있다고 합니다. 

 

따라서,

1. 디버거가 페이지를 리로드하기 전에 모든 breakpoints들을 지나도록 하거나

2. 모든 breakpoints를 해제하고 재개합니다. 

 

 

혹시나 하고 봤더니 실수로 react-dev-tools 빌드 파일 내의 initialHooks.js라는 파일에 breakpoint를 걸어둔 것을 확인하였습니다. 

 

재개(|>) 버튼을 클릭하거나 또는 불필요한 breakpoints를 화살표 부분을 눌러 제거하면 리로드가 잘 되는 것을 확인할 수 있습니다. 

 

크롬 DevTools를 사용할 때 유의하여 사용해야겠습니다.