はじめに

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の場合)

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

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

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

注意

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

最後に

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

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