使用VSCode调试Vue.js

曾经终败给现在 2021-09-24 03:06 475阅读 0赞

### 一、效果展示 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70][]

说明：这个是通过chrome浏览器开放一个远程调试端口来实现的

### 二、具体步骤 ###

**1. VSCode安装插件 Debugger for Chrome**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 1][]

**2. 打开配置文件 launch.json**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 2][]

把默认的覆盖掉，写成下面的（官方给的配置里没写"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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 3][]

关掉所有打开的chrome窗口，重新打开chrome浏览器

**4. 需要调试的地方打上断点，然后点击绿色三角形，就会进到断点了**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 5][]

参考链接：

[https://vuejs.org/v2/cookbook/debugging-in-vscode.html][https_vuejs.org_v2_cookbook_debugging-in-vscode.html]

[https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli][https_github.com_Microsoft_vscode-recipes_tree_master_vuejs-cli]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70]: /images/20210923/81eccd16753e4b799ab49e0065e53f60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 1]: /images/20210923/cad70f20854e4feba54ec68becd49c19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 2]: /images/20210923/3e227aef501049caad6a87760c711e77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 3]: /images/20210923/2c7391bdab704a178b4434f28ce75e55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 4]: /images/20210923/d1ccb7aacfda43d8905e59bfec962295.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA5OTk4MDk_size_16_color_FFFFFF_t_70 5]: /images/20210923/fd79690333d74de0bc809a0fdb8da3d0.png
[https_vuejs.org_v2_cookbook_debugging-in-vscode.html]: https://vuejs.org/v2/cookbook/debugging-in-vscode.html
[https_github.com_Microsoft_vscode-recipes_tree_master_vuejs-cli]: https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli