vscode中chorme/Firefox调试
你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。
从vscode中启动应用
点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个 launch.json
的文件,选择 Chrome/Firefox: Launch 环境。然后将生成的 launch.json
的内容替换成为相应的配置:
按照下图的操作步骤进行:
将原有的launch.json文件的内容替换为
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:9527",
"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}/" }]
}
]
}
设置一个断点
1.在src/views/user/index.vue line181行打个断点,这里是成功回调函数返回结果
2.在根目录打开你惯用的终端并使用 Vue CLI 开启这个应用:
npm run serve
3.来到 Debug 视图,选择 ‘vuejs: chrome/firefox’ 配置,然后按 F5 或点击那个绿色的 调试按钮。
4.随着一个新的浏览器实例打开 http://localhost:9527
,你的断点现在应该被命中了。出现如下界面就可以开始调试了。