1. 调试网站

1.1. VSCode 上装一个插件：Debugger for Chrome

1.2. 配置文件更改

1.2.1. 用VSCode装载项目

1.2.2. 然后按F5，出现这个框,选择 Chrome

103.调试网站 - 图1

1.2.3. 然后出现个配置的提示，和打开了launch.json这个文件

  1. ,
  2.         {
  3.             "name": "使用本机 Chrome 调试",
  4.             "type": "chrome",
  5.             "request": "launch",
  6.              "file": "${workspaceRoot}/index.html",
  7.         //  "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
  8.             "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
  9.             "sourceMaps": true,
  10.             "webRoot": "${workspaceRoot}",
  11.         //  "preLaunchTask":"build",
  12.             "userDataDir":"${tmpdir}",
  13.             "port":5433
  14.         }
  • 结果如图 103.调试网站 - 图2

1.2.4. 然后，更改调试方式

103.调试网站 - 图3

1.2.5. 然后在项目的 js 处设置好断点，按 F5，就可以进行断点调试了

1.2.6. 接着就 Enjoy!

PS：这种方法只适合普通页面，要是你的js项目里，包含json等游览器不支持本地游览的资源，那么就需要开启服务器，配合这个插件，才能进行断点调试。

配置说明：

  1. ${workspaceRoot} VS Code当前打开的文件夹
  3. ${file} 当前打开的文件
  5. ${relativeFile} 相对于workspaceRoot的相对路径
  7. ${fileBasename} 当前打开文件的文件名
  9. ${fileDirname} 所在的文件夹，是绝对路径
  11. ${fileExtname} 当前打开文件的拓展名，如.json