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

当前位置: 首页 » 文章 » VSCode Debugger for Chrome 通过 Chrome 调试 JavaScript 代码

分类: 文章 1,238阅读阅读模式

1、安装 Chrome 浏览器与 VSCode

 

2、搭建本地服务器

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

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

 

3、添加 Debugger for Chrome 拓展

 

4.1、调试本地文件配置

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

  1. {
  2.   "version": "0.2.0",
  3.   "configurations": [
  4.     {
  5.       "name": "Debug Project File Code In Chrome",
  6.       "type": "chrome",
  7.       "request": "launch",
  8.       "sourceMaps": true,
  9.       "file": "${workspaceRoot}/JavaScript/index.html"
  10.     }
  11.   ]
  12. }

意思是调试工作目录的 JavaScript 文件夹下的 index.html 文件。

缺点:每次调试文件,需要更改 HTML 指向的文件。

调试界面,选择 Debug Project File Code In Chrome 断点试一下,如图:

 

4.2 调试服务器文件配置

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

  1. {
  2.   "version": "0.2.0",
  3.   "configurations": [
  4.     {
  5.       "type": "chrome",
  6.       "request": "launch",
  7.       "name": "Launch Localhost to Chrome",
  8.       "sourceMaps": true,
  9.       "url": "http://test.com",
  10.       "webRoot": "${workspaceFolder}"
  11.     }
  12.   ]
  13. }

 

意思是用test.com 服务器调试文件,文件位于 test.com 的根目录。

如果要调试 test.com 中 JavaScript 下的 index.html 文件,则在开启调试后,在地址栏填写 http://test.com/JavaScript/index.html 访问调试。

在调试界面,选择 Launch Localhost to Chrome 断点调试,如图:

 

 

 

 

 

 

相关文章

评论一下

暂无评论