vscode 中调试 vue

2019年5月22日 299次阅读 来源: 可恶名字竟然被占用了啊

安装插件 Debugger for Chrome

Debugger for Chrome

在项目根目录 config/index.js 中修改

将devtool: 'cheap-module-eval-source-map' 修改为 devtool: 'source-map'
将 cacheBusting: true 修改为 cacheBusting: false
修改这两项是为了vscode中的断点能够正确定位到行

新增调试

在调试界面增加配置如下

《vscode 中调试 vue》 lanuch.json

贴上代码

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome 调试",
      "url": "http://localhost:8080/login#/login?station=103",
      "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": false,
        "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
        }
    }
  ]
}

调试

此时在代码中无论是debugger, 还是小红点, 都能够直接进行调试了

《vscode 中调试 vue》 调试

    原文作者：可恶名字竟然被占用了啊
    原文地址: https://www.jianshu.com/p/30d4b79aca9a
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞