IT极限技术分享汇使用步骤
1 在项目根目录下面创建./vscode/launch.json文件，内容如下
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}2 启动你的本地项目
示例npm start
3 按f5启动调试vscode会自动打开浏览器，然后跳转至上述配置中url指向的地址。
4 添加断点
在vscode中找到需要添加断点的代码行，点击行号左侧添加断点。
5 刷新浏览器，当运行到断点处，代码就会停住，然后你就可以开始调试你的代码了。
配置项介绍
url
填写你本地启动项目的地址。
使用attch模式
默认情况下，使用的是launch模式，也就是vscode会自动打开一个浏览器窗口进行调试，不过有时候这并不是我们想要的。我们可能已经运行了一个窗口，然后想对这个已存在的窗口进行调试，这种情况就可以使用attach模式。
步骤：
1 在项目根目录下面创建./vscode/launch.json文件，内容如下
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Chrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
]
}2 给chrome浏览器快捷方式的目标字段添加参数
参数为--remote-debugging-port=9222（关键步骤）
完整的值会像这样："C:/Program Files/Google/Chrome/Application/chrome.exe" --remote-debugging-port=9222
3 启动你的本地项目
示例npm start
4 按f5启动调试vscode会关联到已经打开的项目地址，也就是上述配置中url指向的地址。
注意：打开这个地址的chrome窗口，目标参数必须有remote-debugging-port=9222，否则会报如下错误：
5 添加断点
在vscode中找到需要添加断点的代码行，点击行号左侧添加断点。
6 刷新浏览器，当运行到断点处，代码就会停住，然后你就可以开始调试你的代码了。