Vue提供的三种调试方式你知道吗


Posted in Vue.js onJanuary 18, 2022

一、在 VS Code 中配置调试

使用 Vue CLI 2搭建项目时:

更新 config/index.js 内的 devtool property:

devtool: 'source-map',

点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图:

Vue提供的三种调试方式你知道吗

选择Chrome/Firefox:Launch 环境。将 launch.json 的内容替换为:

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

开始调试:

设置断点:

Vue提供的三种调试方式你知道吗

#启动项目
npm run dev

在debug页面选择“vuejs:chrome”:

Vue提供的三种调试方式你知道吗

二、debugger语句

推荐

function potentiallyBuggyCode() {
    debugger
    // do potentially buggy stuff to examine, step through, etc.
}

浏览器:F12打开DevTools,当运行程序后,会停在debbger语句:

Vue提供的三种调试方式你知道吗

注意:当安装了Eslint插件时,点击快速修复,Disable no-debugger for this line.不然,保存时会自动清除debugger语句。

Vue提供的三种调试方式你知道吗

三、Vue Devtools

谷歌浏览器的插件。

详情参考官方链接:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#Vue-Devtools

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Vue.js 相关文章推荐
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 #Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 #Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 #Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 #Vue.js
详解Vue的列表渲染
Nov 20 #Vue.js
详解Vue slot插槽
Nov 20 #Vue.js
详解Vue router路由
Nov 20 #Vue.js
You might like
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
php时间戳转换代码详解
2019/08/04 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
几行js代码实现自适应
2017/02/24 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
Python的高级Git库 Gittle
2014/09/22 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
商场经理竞聘演讲稿
2014/01/01 职场文书
音乐器材管理制度
2014/01/31 职场文书
伦敦奥运会口号
2014/06/13 职场文书
教育合作协议范本
2014/10/17 职场文书
公司员工管理制度
2015/08/04 职场文书
如何写好闭幕词
2019/04/02 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
redis限流的实际应用
2021/04/24 Redis
Python函数对象与闭包函数
2022/04/13 Python