VS Code 如何调试 vue - Debugger for Chrome

最新推荐文章于 2024-08-07 16:29:52 发布

lwplvx

最新推荐文章于 2024-08-07 16:29:52 发布

阅读量686

点赞数

分类专栏： javascript vue vscode 文章标签： web chrome debug javascript vue

本文链接：https://blog.csdn.net/lwplvx/article/details/112977447

版权

vue 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

vscode

2 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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}/*"
            }
        }
    ]
}