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 03 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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 strncasecmp字符串比较的小技巧
2011/01/04 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python select.select模块通信全过程解析
2017/09/20 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Series和DataFrame使用简单入门
2019/11/13 Python
python 追踪except信息方式
2020/04/25 Python
自荐信模版
2013/10/24 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
校长创先争优承诺书
2014/08/30 职场文书
办公用房租赁协议书
2014/11/29 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android