VueJS 的调试 #96
Description
概述
调试可以说开发中必不可少的，我们可以通过打断点来观察程序运行的细节。
但是对于通过Webpack构建工具构建的项目来说，难度会大一些。因为使用Webpack的热更新模式的话，我们的项目是放置在内存中的，所以配置的时候要多几个心眼。
VS Code
步骤：
- 在
config/index.js里设置：devtool: 'source-map' - 点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 launch.json 的文件，注意属性：webRoot、breakOnLoad、sourceMapPathOverrides
{
"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 start开启项目- 在Debug 视图，选择 ‘vuejs: chrome/firefox’ 配置，然后按 F5 或点击那个绿色的 play 按钮
- 如果成功的话，运行到断点的时候会停下来
Vue Devtools
Vue官方提供的调试工具，属于浏览器的插件。
Vuetron
扩展Vue Devtools的第三方库。
简单的 debugger 语句
简单的在代码中插入debugger，当程序运行到debugger的时候会停下来。