VS Code 如何调试 vue - Debugger for Chrome

最新推荐文章于 2025-10-13 22:35:12 发布

原创最新推荐文章于 2025-10-13 22:35:12 发布 · 801 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #chrome #debug #javascript #vue

vue 同时被 3 个专栏收录

8 篇文章

订阅专栏

javascript

7 篇文章

订阅专栏

vscode

2 篇文章

订阅专栏

本文介绍了如何在Visual Studio Code (VSCode) 中使用Debugger for Chrome插件来调试Vue.js应用程序。首先，需安装插件并配置launch.json文件，设置正确的URL和源映射。接着，在项目中设置断点，通过Vue CLI启动应用。最后，在Debug视图选择配置并启动调试，即可在运行时命中断点进行调试。

VS Code 如何调试 vue 使用 Debugger for Chrome

安装Debugger for Chrome插件
Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 launch.json 的文件。

添加配置：

  {
    // 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://127.0.0.1:9527",  // 这个地址要正确
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}