vue调试三种方式

billycoder

已于 2022-01-25 22:20:44 修改

阅读量9.2k

点赞数 4

分类专栏：前端-随记文章标签： vue.js javascript 前端

于 2021-03-15 17:38:03 首次发布

本文链接：https://blog.csdn.net/billycoder/article/details/114842414

版权

前端-随记专栏收录该内容

11 篇文章

订阅专栏

vue调试三种方式

debug是必备技巧

方式一：通过vue.js devtools

最常用，最方便，适合观察值的变化，不太适合理清代码执行流程

效果

使用

安装如下插件即可
在这里插入图片描述

方式二：在浏览器中展示源代码

这种方式还可以配合vue.js devtools一起使用

效果

在这里插入图片描述

使用

项目的添加如下内容即可

在这里插入图片描述

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

然后就可以F12看到对应的vue文件了

参考

在浏览器中展示源代码

方式三：使用vscode插件Debugger for Chrome

这种方式打断点最方便，但是不能配合vue.js devtools

效果

在这里插入图片描述

使用

安装插件

在这里插入图片描述

配置并且debug运行

在这里插入图片描述

{
            "type": "chrome",
            "request": "launch",
            "name": "vuejs:chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*":"${webRoot}/*"
            }
}