美文网首页让前端飞程序员
使用VSCode编辑器debug调试Vue代码

使用VSCode编辑器debug调试Vue代码

作者: toyfish | 来源:发表于2019-04-01 17:04 被阅读4次

环境为 vue-cli3webpackvscode

首先需要在VSCode中安装 Debugger for Chrome 插件

下载Chrome debugger

然后在debug配置中添加如下配置

配置调试器

配置代码

{
     "type": "chrome",
     "request": "launch",
     "name": "vuejs: chrome",
     "url": "http://localhost:8080", //改成自己的端口就行
     "webRoot": "${workspaceFolder}/src",
     "breakOnLoad": true,
     "sourceMapPathOverrides": {
         "webpack:///src/*": "${webRoot}/*"
     }
}

webpack的配置

  • 使用vue-cli3的话,在vue.config.jsconfigureWebpack项中添加以下两个配置

    configureWebpack: {
        devtool: 'source-map',// 保证源码正确加载
    },
    
  • 使用其他的方式构建项目,在conf/index.js中修改
    devtool: 'cheap-module-eval-source-map'修改为devtool: 'source-map'

相关文章

网友评论

    本文标题:使用VSCode编辑器debug调试Vue代码

    本文链接:https://www.haomeiwen.com/subject/ktzvbqtx.html