使用VSCode调试Vue.js

一、效果展示

说明：这个是通过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