fi3ework's Studio.

使用VSCode调试Webpack

2018/01/12 Share

目标

使用VSCode来调试经过Webpack打包和Babel转义之后的代码。

步骤

准备工作

  1. 安装Debugger for Chrome这个VSCode的插件
  2. Chrome

操作

  1. 新建一个launch.json,可参考此篇文章

  2. 重点来了,如何配置launch.json

    先把我的配置放上来

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    {
    // 使用 IntelliSense 了解相关属性。
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
    {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:8080",
    // "sourceMaps": true, // 默认为true 不写也行
    "webRoot": "${workspaceFolder}"
    },
    {
    "type": "chrome",
    "request": "attach",
    "name": "Launch Chrome against localhost",
    "port": 9222,
    "webRoot": "${workspaceFolder}"
    }
    ]
    }
  3. 同时必须在webpack.config.js中开启source-map

    1
    devtool: 'source-map',

CATALOG
  1. 1. 目标
  2. 2. 步骤
    1. 2.1. 准备工作
    2. 2.2. 操作