准备工作

1. 安装 Debugger for Chrome 插件
2. 按 F5（或选择菜单栏的 Debug->Start Debuging），然后选择 Chrome，就会自动创建默认的配置文件

“启动” 还是 “附加”

• “启动”：配置将要调试的文件或 URL，按 F5 调试会开启一个新的 Chrome 进程并打开该文件或 URL 进行调试
• “附加”：然后以允许远程调试模式打开 Chrome，配置Chrome 打开的 tab 中的待调试 URL为调试地址，按 F5 连接上进行调试

对比一下：

“启动” 示例

配置 launch.json

“启动” 方式使用只需配置 launch.json 即可。

使用指定 URL 的配置要设置 webRoot。

 1{
 2    "version": "0.1.0",
 3    "configurations": [
 4        {
 5            "name": "Launch localhost",
 6            "type": "chrome",
 7            "request": "launch",
 8            "url": "http://localhost/mypage.html",
 9            "webRoot": "${workspaceFolder}/wwwroot"
10        },
11        {
12            "name": "Launch index.html",
13            "type": "chrome",
14            "request": "launch",
15            "file": "${workspaceFolder}/index.html"
16        },
17    ]
18}

“附加” 示例

一：配置 Chrome

我用的是 Windows 配置方法如下：

1. 找到默认打开 Chrome 的快捷方式，一般是C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Google Chrome
2. 目标后面加上--remote-debugging-port配置，如："C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

Windows

• Right click the Chrome shortcut, and select properties
• In the "target" field, append --remote-debugging-port=9222
• Or in a command prompt, execute <path to chrome>/chrome.exe --remote-debugging-port=9222

macOS

• In a terminal, execute /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

• In a terminal, launch google-chrome --remote-debugging-port=9222

二：打开将要调试的地址

将调试的 tab 必须保证是由配置了--remote-debugging-port的 Chrome 打开的！

下面是一套 webpack 的配置：

package.json

1"scripts": {
2    "test": "echo \"Error: no test specified\" && exit 1",
3    "start": "webpack-dev-server --mode development"
4},
5"devDependencies": {
6    "webpack": "^4.17.1",
7    "webpack-cli": "^3.1.0",
8    "webpack-dev-server": "^3.1.7"
9}

webpack.config.js

 1const path = require('path');
 2
 3module.exports = {
 4  entry: './src/index.js',
 5  devServer: {
 6    contentBase: './dist',
 7    port: 3000
 8  },
 9  devtool: process.env.NODE_ENV === 'production' ? false : 'cheap-eval-source-map',
10  output: {
11    filename: 'bundle.js',
12    path: path.resolve(__dirname, 'dist')
13  }
14};

三：配置 launch.json

注意：

1. 配置中的端口虽然默认就是 9222，但我测试时配置中不指定端口会报connect ECONNREFUSED 127.0.0.1:9229这种连接不上9229端口的错。
2. 配置中的 URL 一定是当前要调试的 tab 的 URL（例如：配置 URL 为http://localhost:3000/，在浏览器打开 http://localhost:3000/ 时自动跳转到http://localhost:3000/index.html，然后在 VSCode 启动调试就会因为 URL 匹配不上就会报 `无法连接到运行中的进程` 的错误），这也是我把配置 launch.json 放到最后一步的原因。（PS：这种情况也可以通过配置 `urlFilter` 解决）。

 1{
 2  // Use IntelliSense to learn about possible attributes.
 3  // Hover to view descriptions of existing attributes.
 4  // For more information, visit: <https://go.microsoft.com/fwlink/?linkid=830387>
 5  "version": "0.2.0",
 6  "configurations": [
 7    {
 8      "type": "chrome",
 9      "request": "attach",
10      "name": "Attach to Chrome",
11      "url": "http://localhost:3000/",
12      "port": 9222,
13      "sourceMaps": true,
14      "webRoot": "${workspaceRoot}"
15    }
16  ]
17}

参考

Debugger for Chrome - Visual Studio Marketplace

其他

https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

16 年的时候说是打开谷歌自带的 DevTools 这个插件的调试就会被断掉，等等测试一下看看能同时开不。（已经解决了 \^_^，现在用这个插件就非常爽了）