脚本宝典收集整理的这篇文章主要介绍了Vue 代码如何进行调试,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小梦 vs 后端大兄弟F1a;
我运行了一个东西,一直出不来
后端大兄弟:
我可以试一试断点,看哪里出错
······
后端大兄弟:
我好像不懂 如何打前端断点,都被webpack 重新封装过了
小梦:
okok,是时候总结一番
Vue代码如何进行调试
作为小白,日常最常使用的就是
console.LOG
输出数值console.debug
打印调试信息console.time
console.timeEnd
进行时间计时console.PRofile
和 console.profileEnd
进行性能测试但需注意的地方
引用类型
的值
console.log
都会去截取快照,但是如果俩个修改引用类型的顺序和时间
十分的接近,这个 console.log
会显示修改后的元素属性JSON.stringfy
JSON.parse
组合使用可输出当前对象的值debugger
const data = []
for (let id = 0; id < 1000; id++) {
data.push({
id,
value: faker.lorem.sentences() // 长文本
})
}
使用如上方法,可以出现调试页面,包含你关注的作用域(查看值) 但是会跳转到 app.js
等很多无相关的页面
1、 在浏览器中展示源代码 打开 config/index.js
并找到 devtool
proPErty。将其更新为:
如果你使用的是 vue cli 2,请设置并更新 config/index.js
内的 devtool
property:
devtool: 'source-map',
如果你使用的是 Vue CLI 3,请设置并更新 vue.config.js
内的 devtool
property:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
查看你的
Vue
版本可从 控制台中输入vue -V
查看
直接在浏览器中打开 Source 中的 webpack src 可查看源代码,点击代码行数,可实现打断点
各个按钮详解resume/pause script execution
恢复/暂停脚本执行step over next function call
步过,将函数作为语句执行不展开step into next function call
步入,进入函数执行上下文step out of current function
布出当前函数step
执行下一步deactivate breakpoints
使所有断点暂时失效don‘t pause on exceptions
出现异常不暂停2、 如果你是从VS Code
启动程序
点击在 ActivITy Bar 里的 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个 launch.json
的文件,选择 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}/" }]
}
]
}
chrome
,请把 type: chrome
改为 pwa-chrome
,如果类型是 chrome
则需另外下载插件你所不知道的 console
以上是脚本宝典为你收集整理的Vue 代码如何进行调试全部内容,希望文章能够帮你解决Vue 代码如何进行调试所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。