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 01 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
如何优化vue打包文件过大
Apr 13 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php的控制语句
2006/10/09 PHP
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
php实现监听事件
2013/11/06 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
python循环监控远程端口的方法
2015/03/14 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
python杀死一个线程的方法
2015/09/06 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
大学生素质拓展活动方案
2014/02/11 职场文书
实验心得体会
2014/09/05 职场文书
继续教育个人总结
2015/03/03 职场文书