VScode debug React config

1. 安裝 VScode 插件 Debugger for Chrome

2. 配置 webpack

webpack.config.js 添加 source map

+ devtool: 'eval-cheap-module-source-map',  // 或者 'eval-source-map'

3. 配置 .vscode/launch.json

按 F5 選擇 chrome，會生成 .vscode/launch.json 修改如下

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: 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",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*",
        "meteor://💻app/*": "${webRoot}/*"
      }
    }
  ]
}

然後就可以 按 F5 調試項目了。

whosmeya.com