vue debug 二种方法
更新时间：2018年09月16日 09:29:14 作者：张映
这篇文章主要介绍了vue debug 二种方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
console.log多了比较烦，用debug就比较清晰了。
可以快速履清代码运行的先后顺序，验证自己的想法是否正确，可以清楚的了解到变量的内容，不用在console.log了。
一，vue devtools
1，chrome应用商店安装vue devtools扩展，并打开vue devtolls扩展
2，启动vue，npm run dev
3，chrome中访问vue网址，打开开发者工具，导行会多出vue，如下图
vue devtools
vue devtools，对于数据展示，是非常清楚的。
二，vscode debug
1，修改.vscode/launch.json
查看复制打印?
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"sourceMaps": true,
"name": "assa vue debug",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
2，启动vue项目，npm run dev
3，点击vscode debug中的绿色三角启动debug，chrome访问网址就可以debug了
vscode debug vue
总结
以上所述是小编给大家介绍的vue debug 二种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要为大家介绍了Vue.js3.2的vnode部分优化升级使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了Vue 事件的$event参数=事件的值案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-01-01
这篇文章主要介绍了三种方式解决vue中v-html元素中标签样式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了vue实现的组件兄弟间通信功能,结合实例形式分析了vue兄弟组件间通信的原理与相关操作技巧,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了vue进行post和get请求实例讲解，违章围绕post和get请求的相关资料展开详细内容，具有一的的参考价值，需要的小伙伴可以参考一下2022-03-03
本文主要介绍了vant4 封装日期段选择器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
最近的项目完成后,在性能优化阶段需要做按钮的防止重复点击功能,本文主要介绍了vue uniapp 防止按钮多次点击的三种实现方式,具有一定的参考价值,感兴趣的可以了解一下2023-08-08
Ganttastic是一个小型的Vue.js组件，用于在Web应用程序上呈现一个可配置的、可拖动的甘特图。本文就将用它来实现简单可扩展的甘特图，感兴趣的可以尝试一下2022-11-11
这篇文章主要介绍了vue swipeCell滑动单元格(仿微信)的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
在Vue中，过渡和动画是一种用于在组件之间添加平滑过渡效果和动画效果的高级用法，Vue提供了一些内置的过渡和动画功能，同时也支持自定义过渡和动画效果，本文就给大家介绍一些Vue中过渡和动画的高级用法,需要的朋友可以参考下2023-06-06
最新评论