在 VS Code 中调试Vue代码

最新推荐文章于 2024-05-04 15:52:14 发布

老靳的WebGIS

最新推荐文章于 2024-05-04 15:52:14 发布

阅读量725

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_35093027/article/details/128816061

版权

杂谈专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在vscode中调试，我总是用console.log()来打印过程数据，觉得太麻烦了，也不专业，就学着用高级一点的办法来调试代码。

先决条件

在Vscodes搜索安装Debugger for Chrome插件，或者JavaScript Debugger插件

在这里插入图片描述

# 建立配置文件

在根目录下新建配置文件vue.config.js
并写入以下代码：

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

点击Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 launch.json写入以下配置

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        },
    ]
}