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 05 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue使用element-ui按需引入
May 20 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
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
js中window.open打开一个新的页面
2014/08/10 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
Python采用Django开发自己的博客系统
2020/09/29 Python
python使用RNN实现文本分类
2018/05/24 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
keras 多gpu并行运行案例
2020/06/10 Python
python 如何调用远程接口
2020/09/11 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
保护环境建议书300字
2014/05/13 职场文书
安全承诺书格式
2014/05/21 职场文书
七一建党日演讲稿
2014/09/05 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers