一、效果展示
说明:这个是通过chrome浏览器开放一个远程调试端口来实现的
二、具体步骤
1. VSCode安装插件 Debugger for Chrome
2. 打开配置文件 launch.json
把默认的覆盖掉,写成下面的(官方给的配置里没写"runtimeExecutable"这行,我的多写了一个chrome的路径,因为不写的话,我的会报找不到chrome.exe)
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs:chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"runtimeExecutable": "C:/Program Files (x86)/Google/Chrome Dev/Application/chrome.exe",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*"
}
}
]
}
3. 开启chrome远程调试端口
我复制了一个chrome快捷方式,然后把目标改成了
"C:\Program Files (x86)\Google\Chrome Dev\Application\chrome.exe" --remote-debugging-port=9222
关掉所有打开的chrome窗口,重新打开chrome浏览器
4. 需要调试的地方打上断点,然后点击绿色三角形,就会进到断点了
参考链接:
https://vuejs.org/v2/cookbook/debugging-in-vscode.html
https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli