vscode中chorme调试

 

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，你的断点现在应该被命中了。出现如下界面就可以开始调试了。