VSCodeのReactブラウザデバッグ設定

Webpackを利用している場合

Chrome

• Debbuger for Chromeをインストールする

Debbuger for Chromeは非推奨になっており、Javascript for Debuggerを利用すること

• --incognito : シークレットモードで起動

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "runtimeArgs": [
        "--incognito"
      ],
      "webRoot": "${workspaceFolder}/frontend",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*",
        "meteor://💻app/*": "${webRoot}/*"
      }
    }
  ]
}

Firefox

• Debugger for Firefoxをインストールする

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      "request": "launch",
      "name": "Launch Firefox against localhost",
      "url": "http://localhost:3000",
      "reAttach": true,
      "firefoxArgs": [
        "-private"
      ],
      "webRoot": "${workspaceFolder}/frontend",
      "pathMappings": [
        { "url": "webpack:///./*", "path": "${webRoot}/*" },
        { "url": "webpack:///src/*", "path": "${webRoot}/*" },
        { "url": "webpack:///*", "path": "*" },
        { "url": "webpack:///./~/*", "path": "${webRoot}/node_modules/*" },
        { "url": "meteor://💻app/*", "path": "${webRoot}/*" }
      ]
    }
  ]
}