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在图片上传的时候压缩图片
Nov 18 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue递归实现树形组件
Jul 15 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中利用XML技术构造远程服务(上)
2006/10/09 PHP
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
js实现简单的倒计时
2021/01/28 Javascript
Python 描述符(Descriptor)入门
2016/11/20 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python实现简单名片管理系统
2018/11/30 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python变量的存储原理详解
2019/07/10 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
管理站站长岗位职责
2013/11/27 职场文书
药品营销策划方案
2014/06/15 职场文书
合伙经营协议书范本
2014/09/13 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
2015年安全月活动总结
2015/03/26 职场文书
创业计划书之面包店
2019/09/12 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
bat批处理之字符串操作的实现
2022/03/16 Python
Redis实现一个账号只能登录一个设备
2022/04/19 Redis