配置 VS Code 调试 JavaScript

1、 安装 Debugger for Chrome 扩展、Open in Browser  扩展、View In Browser 扩展

2、新建文件夹 html

3、用VS Code 打开文件夹 html

4、新建 “Index.html”，内容如下：

    

    用户详细信息:

    

        邮政编码:

        身份证号:

        

    

5、按 F5 出现下拉列表，选择Chrome，如下图

6、再按 F5 生成 launch.json 文件：

{

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome against localhost",

"url": "http://localhost:8080",

"webRoot": "${workspaceRoot}"

}

]

}

7、修改 launch.json 文件为：

{

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome against localhost",

"url": "http://localhost:8080",

"webRoot": "${workspaceRoot}"

},

{

"name": "Launch index.html (disable sourcemaps)",

"type": "chrome",

"request": "launch",

"sourceMaps": false,

"file": "${workspaceRoot}/Index.html"

}

]

}

8、选择Launch index.html (disable sourcemaps) 调试项（ 高亮蓝色），如下图：

9、在第 6 行 按 F9 设断点，如下图：

10、在 浏览器中的邮政编码中输入：abcdefgh，按 OK 按钮，程序停在了断点（6行），如图：