크롬 개발자 도구의 하이라이팅 에러 & VM***

크롬 개발자 도구로 디버깅을 하던 도중, 작성한 파일명이 아닌 VM으로 시작하는 파일이 열리며 하이라이팅이 잘못 표시되는 현상이 발생했다.

 

VM으로 시작하는 파일은 블랙박스로 간주되는 것으로 eval, iframe 등을 사용하면 나타난다고 하는데, 내 코드에는 그런 부분이 없었다.

같은 이름의 파일이 여러번 로드되면 그런 경우가 발생할 수도 있다고 하는데, 코드에서 여러번 같은 파일을 로드하지도 않았다.

 

중단점과 관련한 이슈가 많았는데 그런 경우에는 debugger라는 키워드를 코드에 삽입하여 코드를 중단시키면 된다는 것이었는데

나의 경우에는 중단점이 걸리긴 하나 중단점과 무관한 위치에서 코드가 멈추어 있었다.

 

개발자도구를 껐다가 다시 켜고, 캐시도 제거해보았으나 현상은 계속 발생하였다.

그러던 중 URL에 붙어있던 해시를 제거하고 페이지에 접속하면 정상적인 동작을 하는 것을 발견했다.

 

이 해시는 페이지 로드 이후에 동적으로 삽입된 것인데 그게 개발자 도구에 어떤 영향을 준 것 같다.

 

요약:

URL에 해시가 붙은 채로 접속하면 현상이 발생하고, 해시를 제거하고 접속하면 정상 동작하였다.

 

추가:

html 페이지에 script 태그 내에서 스크립트 코드를 작성한 경우 현상이 발생한다.

html 페이지와 script를 분리해서 관리하고 html 페이지에서는 script를 로드만 하도록 하자.