2016-11-19 1 views
0

VS 코드 (v1.7 사용)와 JavaScript에 익숙하지 않습니다. Chrome 확장 프로그램 용 디버거 (v2.2.2)를 사용하려고하지만 작동하도록 중단 점을 가져올 수 없습니다 (설정할 수 있지만 확인되지 않은 중단 점을 나타내는 것으로 무시됩니다).Chrome 용 디버거를 사용하여 VS 코드 중단 점을 트리거하지 못했습니다.

나는 내가 통해 달성 포트 9222에서 디버깅 크롬을 실행해야한다는 것을 이해 :

chrome.exe --remote-debugging-port=9222 

가 나는 문제를 설명하기 매우 간단한 테스트를 설정 한 것을 다 가졌어요. 내가 만든

{ 
    "version": "0.2.0", 
    "configurations": [{ 
      "name": "Launch index.html", 
      "type": "chrome", 
      "request": "launch", 
      "port": 9222, 
      "file": "${workspaceRoot}/index.html", 
      "webRoot": "${workspaceRoot}" 
     } 
    ] 
} 

합니다 (.vscode 폴더에) 다음과 같이

은 내가 launch.json를 구성한과 같은 매우 간단한 index.html을 : 마지막으로

<!DOCTYPE html> 
<html> 
<script src="script.js"></script> 
</html> 

및 스크립트 .js는 다음과 같습니다.

console.log("Started"); 
var x = 1; //breakpoint set here 
console.log(x); 
console.log("Complete"); 

코드에서 F5 키를 누른 다음 프로세스에서 script.js를 실행중인 index.html을로드하십시오. 중단 점이 설정되지 않은 경우 예상대로 코드가 완료됩니다. 그러나 원하는 결과가 아닙니다.

완료시, 빨간색 중단 점 아이콘을 회색으로 바꾼 후 "확인되지 않은 중단 점"을 표시하는 이미지 1이 표시됩니다.

나는 정말 간단한 일을 잘못했다고 상상하지만, 나는 그것을 이해할 수 없다. 어떤 아이디어? 감사.

답변

2

설정이 올바른 것 같지만 크롬 개발자 도구의 버그로 인한 것 같습니다. - Chrome needs to be refreshed before javascript files are shown in the sources tab
무슨 일입니까?
스크립트가 실행 된 후 크롬 디버그 확장 프로그램이 개발 도구를 시작하기 전에 V8이 스크립트를 수집합니다. 그것이 디버깅 할 수없는 이유입니다.
해결책 - 페이지가로드 된 후 다시로드하십시오.

+1

이것은 Chrome 개발자 도구 인 @Marcs의 버그입니다. 위에서 index.html 파일을 시작한 다음 dev 도구를 열면 소스 탭에서 찾을 수 없습니다. –

+0

... 소스 탭에서 스크립트를 찾을 수 없습니다 ... 위의 내 의견을 편집하거나 삭제할 수없는 이유가 있습니다. –

+0

내부 디버거와 Chrome Canary (베타 분기)에서 동일한 문제가 발생했습니다. – Marcs

관련 문제