Vue提供的三种调试方式你知道吗
更新时间：2022年01月18日 11:41:03 作者：长不大的大灰狼
这篇文章主要为大家介绍了Vue提供的三种调试方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
一、在 VS Code 中配置调试
使用 Vue CLI 2搭建项目时：
更新 config/index.js 内的 devtool property：
devtool: 'source-map',
点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图：
选择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}/" }]
}
]
}
开始调试：
设置断点：
#启动项目 npm run dev
在debug页面选择“vuejs：chrome”：
二、debugger语句
推荐
function potentiallyBuggyCode() {
debugger
// do potentially buggy stuff to examine, step through, etc.
}
浏览器：F12打开DevTools，当运行程序后，会停在debbger语句：
注意：当安装了Eslint插件时，点击快速修复，Disable no-debugger for this line.不然，保存时会自动清除debugger语句。
三、Vue Devtools
谷歌浏览器的插件。
详情参考官方链接：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#Vue-Devtools
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
在本篇内容中小编给大家分享了关于Vue中使用canvas方法和步骤，对此有需要的读者们参考学习下。2019-02-02
Vue的小伙伴们,困扰大家的IE浏览器支持Vue的问题,目前已经找到了一个比较好的解决方案,下面这篇文章主要给大家介绍了关于vue项目兼容IE浏览器的教程步骤,需要的朋友可以参考下2023-03-03
在Vue中可以使用Vue.prototype向Vue的全局作用域添加属性或方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
这篇文章主要为大家详细介绍了Vue Element UI + OSS实现上传文件功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了VUE调用本地json的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要为大家介绍了van-cell如何使用插槽详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-12-12
解决vue-cli webpack打包开启Gzip 报错问题
这篇文章主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue将data恢复到初始状态 && 重新渲染组件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
在 Vue.js 3 中实现网页的国际化多语言,最常用的包是 vue-i18n,通常我们会与 vue-i18n-routing 一起使用,这篇文章主要介绍了Vue3 如何接入 i18n 实现国际化多语言,需要的朋友可以参考下2024-07-07
这篇文章主要给大家介绍了关于Vue数据表格增删改查与表单验证的相关资料,Vue可以通过使用组件化的方式来实现表格的增删改查功能,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下2023-10-10
最新评论