vscode에서 js 코드를 디버깅하는 방법

왼쪽 확장 프로그램에서 Debugger for Chrome을 검색하고 클릭하여 설치하세요

html 프로젝트 디렉토리에서 f5를 클릭하거나 왼쪽에서 디버그 버튼을 선택하세요

드롭다운을 선택하세요 버튼을 클릭하면 Chrome 추가 및 선택이 있습니다

laungh.json의 구성 파일이 프로젝트 디렉터리에 표시됩니다

그러나 다른 코드 파일을 디버깅하려면 구성을 수정해야 합니다.

{
    "version": "0.2.0",
    "configurations": [{
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/jsTest/test1/test1.html"  #每次需要修改这里的文件地址
        }
    ]
}

여기에서 디버그할 수 있습니다.

에서 Launch index.html(소스맵 비활성화) 디버깅 항목을 선택하고, f5를 눌러 디버그하면 표시되며, 동시에 Google 브라우저를 열고, 클릭

디버깅 단계에 들어갑니다.

추천 관련 기사 및 튜토리얼: vscode 튜토리얼

위 내용은 vscode에서 js 코드를 디버깅하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!