Visual Studio Code上でwebpack-dev-serverを使ってデバッグする

はじめに

VSCodeの売りの1つにデバッグ機能がありますが、webpack/webpack-dev-serverを使った場合のやり方があまり見かけなかったのでまとめてみました。

検証した環境

• OS
• Windows 10
• MacOS Sierra
• VSCode 1.8.1
• Debugger for Chrome 2.4.1
• webpack 1.14.0
• webpack-dev-server 1.16.2

準備

webpack/webpack-dev-serverのインストール・設定

npmでインストールし、webpack.config.jsを編集します。詳しいやり方は他の記事を参照してください。

VSCodeのデバッグ機能を使う場合、sourcemapを出力するようにする必要があります。自分が実行した時の値を載せておきます。

webpack.config.js

const config = {
  devtool: "source-map",
  entry:  __dirname + "/app/App.js",

devtoolがsourcemapの形式を表します。

webpack-dev-server実行時の引数

webpack-dev-server -d --progress --colors --display-error-details

-dでsourcemapを出すように指定しています。

Debugger for Chromeのインストール・設定

Debugger for Chromeをインストールします。
拡張機能のMarketplaceから検索・インストールできます。

インストール後、デバッグ画面を開いてlaunch.jsonを編集します。

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost, with sourcemaps",
      "type": "chrome",
      "request": "launch",
      "sourceMaps": true,
      "url": "http://localhost:8080/",
      "webRoot": "${workspaceRoot}",  // ${workspaceRoot}/appではない
      // Windowsの場合のみ以下設定が必要
      "sourceMapPathOverrides": {
        "webpack:///./C:/myproject/*": "${webRoot}/*"  // 動く
        // "webpack:///./*": "*"  // 動かない
      }
    },
    {
      "name": "Attach to Chrome, with sourcemaps",
      "type": "chrome",
      "request": "attach",
      "port": 9222,  // Chrome起動時のremote-debugging-portを指定
      "sourceMaps": true,
      "url": "http://localhost:8080/",
      "webRoot": "${workspaceRoot}",    // ${workspaceRoot}/appではない
      // Windowsの場合のみ以下設定が必要
      "sourceMapPathOverrides": {
        "webpack:///./C:/myproject/*": "${webRoot}/*"  // 動く
        // "webpack:///./*": "*"  // 動かない
      }
    }
  ]
}

ハマりどころはコメントに書いた部分です。
sourcemapのパスが想定と合わないとブレイクポイントで止まってくれません。

また、WindowsとMacでwebpackが作るパスが違います。

// Windowsの場合
webpack:///./C:/a/b/c/myproject/app/App.js
// Macの場合
webpack:///./app/App.js

これとなぜかDebugger for Chromeのデフォルトのsourcemap書き換えがWindowsの場合のみ合っていませんでした。

"sourceMapPathOverrides": {
    "webpack:///./*":   "${webRoot}/*", // Example: "webpack:///./src/app.js" -> "/users/me/project/src/app.js"
    "webpack:///*":     "*",            // Example: "webpack:///C:/project/app.ts" -> "C:/project/app.ts"
}

さらに以下問題があるため、キーに${workspaceRoot}は今の所使えないようです。

今回のケース以外でもsourcemapの不一致が合った場合は、sourceMapPathOverridesで元のソースファイルとのマッピングを正せばデバッグが機能するはずです。

デバッグ方法(launchの場合)

1. VSCode上でブレークポイントを設定
2. VSCodeのデバッグ画面から'launch'を起動(Chromeが起動される)
3. Chrome上で画面操作
4. VSCode上のブレークポイントで止まる
5. VSCode上でデバッグ操作

デバッグ方法(attachの場合)

1. VSCode上でブレークポイントを設定
2. Chrome上で--remote-debugging-portオプションをつけて起動(OSごとのやり方)
3. VSCodeのデバッグ画面から'attach'を起動
4. Chrome上で画面操作
5. VSCode上のブレークポイントで止まる
6. VSCode上でデバッグ操作

注意

• 今のところブラウザの開発者ツールを同時に起動すると切断される
• VSCodeとChromeの接続がうまくいかない場合、Chromeを再起動して接続し直すとうまくいくことがある

最後に

これでconsole.logと書く不毛な作業から解放される。。