目录一、在 VS Code 中配置调试二、debugger语句三、Vue Devtools总结一、在 VS Code 中配置调试 使用 Vue CLI 2搭建项目时： 更新 conf
使用 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”：
推荐
function potentiallyBuggyCode() {
debugger
// do potentially buggy stuff to examine, step through, etc.
}
浏览器：F12打开DevTools，当运行程序后，会停在debbger语句：
注意：当安装了Eslint插件时，点击快速修复，Disable no-debugger for this line.不然，保存时会自动清除debugger语句。
谷歌浏览器的插件。
详情参考官方链接：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#Vue-Devtools
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!
--结束END--
本文标题: Vue提供的三种调试方式你知道吗
本文链接: https://lsjlt.com/news/162853.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0