Chrome 개발 도구 : 자바 스크립트의 [VM] 파일

Javascript 파일 (jaydata.js)에 중단 점을 추가하고 "다음 함수 호출로 넘어 가기"를 누르고있었습니다. 그것이 줄에 도착했을 때 :

},

"[VM] (8312)"라는 제목의 다른 파일이 팝업되었습니다. "다음 함수 호출로 넘어 가기"를 계속 클릭하면 화면은 다음과 같습니다.

"[VM] (XXXX")라는이 이상하고 신비한 스크립트는 무엇이며 어디에서 왔습니까?

[VM] (scriptId)특별한 의미가 없습니다. 파일 이름에 직접 연결되지 않은 코드 (예 : 코드를 사용하여 만든 코드)를 구별하는 데 도움이되는 더미 이름입니다.eval 및 friends)와 입니다.

과거에는이 모든 스크립트에 라벨이 붙어있었습니다. (program) .

관심이 있으시면 찾아보십시오."[VM]" Chromium의 소스 코드를 개발자 도구 외부에서이 숫자가 의미가 없다는 것을 알게 될 것입니다.

2015-06-25 업데이트

[VM] (scriptId)의 이름 VMscriptId 이 얼마 전에 변경 되었으며 여기 에 값이 다시 변경되는 경우 검색 결과 로 직접 연결되는 링크가 있습니다 .

AJAX를 통해 HTML 컨텐츠를로드 할 때 해당 컨텐츠에 <script>태그 가 포함 된 경우 스크립트는 eval ()을 사용하여 평가되며 Chrome의 소스보기에서 'VM'으로 시작하는 새 파일로 인식됩니다. 언제든지 네트워크 탭으로 이동하여 AJAX 요청을 찾은 다음 스크립트를 포함하여 HTML 응답을 전체적으로 볼 수 있습니다.

eval을 사용하면 자바 스크립트가 Chrome 디버거 VM에 전달됩니다. Chrome 디버거 소스에서 eval로 작성된 js를 보려면 js의 끝에 (Splaktar 덕분에)이 속성을 설정하십시오.

//@ sourceURL=dynamicScript.js

WebKit, FireBug 또는 IE8 Developer Tool과 같은 일부 디버거로 동적 로딩 JavaScript를 디버깅 할 수 있습니까?

크롬으로 프로그래밍 방식으로 주입 된 JS 파일을 디버깅하려면 debugger;명령문을 사용할 수 있습니다. 이는 스크립트가있는 위치를 찾는 것보다 빠르며 sourceurl을 사용 하여 파일을 생성하는 것보다 빠릅니다 .

중단 점처럼 작동하며 debugger;명령문 을 사용할 때마다 크롬 소스 탭에서 코드를 자동으로 정확하게 찾아냅니다 .

스크립트의 소스는 VMXXX 파일입니다.

일부 Chrome 확장 프로그램에서 VM이 생성되는 것을 발견했습니다. CSS / JS를 페이지에 삽입하고 Chrome은 VM 파일을 사용하여 VM을 실행합니다.

나중에 언로드되는 자식 창 (iframe) 소스를 디버깅 할 때 소스 파일에도 VM 접두사와 노란색 배경이 표시됩니다.

나는 같은 문제에 부딪쳤다. 문제는 내 앱의 코드가 우연히 블랙 박스로 간주되었다는 것입니다. 코드를 시작하려고 할 때 계속해서이 VMXXXX탭을 열었습니다 .

앱의 js 파일에 대한 블랙 박스 설정을 제거한 후 코드를 성공적으로 단계별로 실행할 수 있습니다.

이것을 막기 위해

(function ()
 {
  var originalEval = eval;
  eval =
   function (script)
   {
    return originalEval(script + "\n//# sourceURL=blackbox-this.js");
   }
 }());

그런 다음 블랙 박스 ^.*blackbox-this.js$

문자열을 가져올 때 setInterval / setTimeout과 동일하지만 어쨌든 나쁜 습관입니다.

그게 당신을 위해 작동합니까?

각도 응용 프로그램을 디버깅 할 때도 같은 문제가 발생했습니다. 블랙 박스로 만들 수없는 VM 스크립트가 너무 많으면 실제로 디버깅하는 데 시간이 오래 걸렸습니다. 오히려 디버깅하기 위해 mozilla / IE 탐색기를 선택했습니다.