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如何实现验证码输入交互
Dec 07 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue router 动态路由清除方式
May 25 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设计模式 Factory(工厂模式)
2011/06/26 PHP
php除数取整示例
2014/04/24 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
jQuery 1.0.2
2006/10/11 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
如何进行有效的自我评价
2013/09/27 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang