VSCode Debugger for Chrome 通过 Chrome 调试 JavaScript 代码

2018-07-08 5680 文章

1、安装 Chrome 浏览器与 VSCode

2、搭建本地服务器

首先搭建一个本地服务器，能本地访问：如 test.com，文章将以 test.com 做例；

常见集成环境的如：IIS、XAMPP、UPUPW、php程序员工具箱完整版、WampServer、PHPStudy、PHPWAMP

3、添加 Debugger for Chrome 拓展

4.1、调试本地文件配置

在工作目录的 .vscode 文件夹中创建 launch.json 文件添加以下内容

{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Project File Code In Chrome",
"type": "chrome",
"request": "launch",
"sourceMaps": true,
"file": "${workspaceRoot}/JavaScript/index.html"
}
]
}

意思是调试工作目录的 JavaScript 文件夹下的 index.html 文件。缺点：每次调试文件，需要更改 HTML 指向的文件。调试界面，选择 Debug Project File Code In Chrome 断点试一下，如图：

4.2 调试服务器文件配置

在工作目录的 .vscode 文件夹中创建 launch.json 文件添加以下内容

{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Localhost to Chrome",
"sourceMaps": true,
"url": "http://test.com",
"webRoot": "${workspaceFolder}"
}
]
}

意思是用test.com 服务器调试文件，文件位于 test.com 的根目录。如果要调试 test.com 中 JavaScript 下的 index.html 文件，则在开启调试后，在地址栏填写 http://test.com/JavaScript/index.html 访问调试。在调试界面，选择 Launch Localhost to Chrome 断点调试，如图：

原创文章，如若转载，请注明出处：http://loc.darlang.com/post/931.html

php 服务器配置 html VSCode