码迷,mamicode.com
首页 > 其他好文 > 详细

Vue工程调试方式

时间:2021-05-24 04:01:57      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:vsc   request   ati   pwa   ora   webp   export   class   配置   

1,VScoed

首先安装Debugger fro Chrome

首先配置vue.config.js

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

然后配置VScode运行和调试

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./*": "${webRoot}/*",
      }
    }
  ]
}

可以开启断点调试了

2,vue-devtools

在谷歌浏览器安装插件vue devtools

有很多种配置vue devtools,这里介绍github安装方式

首先

git clone https://github.com/vuejs/vue-devtools.git

然后

 

Vue工程调试方式

标签:vsc   request   ati   pwa   ora   webp   export   class   配置   

原文地址:https://www.cnblogs.com/sonwrain/p/14749636.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!