注意:这个案例覆盖了 Chrome 和 Firefox。如果你知道如何在其它浏览器中进行 VS Code 调试,欢迎分享你的观点 (请看页面底部)。
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'
}
}
我们这里假设端口号为 8080
。如果与实际情况不符 (比如 8080
端口已经被占用且 Vue CLI 为你自动选取了另一个端口号),可以修改相应的配置。
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}/" }]
}
]
}
src/components/HelloWorld.vue
的 line90
的地方设置一个断点,这里的 data
函数返回一个字符串。
npm run serve
http://localhost:8080
,你的断点现在应该被命中了。
请留意如果页面使用了一个生产环境/压缩后的 Vue.js 构建版本 (例如来自一个 CDN 的标准的链接),devtools 的审查功能是默认被禁用的,所以 Vue 面板不会出现。如果你切换到一个非压缩版本,你可能需要强制刷新该页面来看到它。
debugger
语句。如果你选择了这种方式,请千万记得当你调试完毕之后把这个语句移除。
<script>
export default {
data() {
return {
message: ''
}
},
mounted() {
const hello = 'Hello World!'
debugger
this.message = hello
}
};
</script>