使用 vscode 调试前端代码

使用 vscode 调试前端代码

    今天我们以webpack项目为基础讲解配置
复制代码

1. 安装插件 Debugger for Chrome

2. 修改 config/index.js

将devtool: 'cheap-module-eval-source-map' 修改为 devtool: 'source-map'
将 cacheBusting: true 修改为 cacheBusting: false
复制代码

3. 点击调试上面的小齿轮，选择Chrome，自动生成配置文件。修改配置文件为：

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

4. 设置断点，点击DUGEG开始调试。

转载于:https://juejin.im/post/5c0896d35188256d9832dcae