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-router定义元信息meta操作
Dec 07 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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/05/21 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python获取当前路径实现代码
2017/05/08 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
如何理解python对象
2020/06/21 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
医药代表个人求职信范本
2013/12/19 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
初中学生期末评语
2014/04/24 职场文书
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL
Java实现注册登录跳转
2022/06/16 Java/Android