Debugger for Chrome

MS 製エディタ Visual Studio Code には、Debugger for Chrome という面白機能がある。エディタからウェブブラウザを遠隔操作して、書いてる最中の Javascript コードをデバッグ出来る。

インストールと設定

Debugger for Chrome は Visual Studio Code の Extension として実装されているので、View > Extensions で検索してインストールする。

Debug > Start Debugging でデバッグを開始するが、最初は設定が無いのでエラーになる。エラーダイアログの Open launch.json を選択すると自動的に .vscode/launch.json に設定ファイルの雛形が出来る。

雛形は、Node.js 用の物なので新しく書き萎えないといけない。 Visual Studio Code のページにはサンプルとして "Launch Localhost" (新しいブラウザを開いてローカルサーバ実行) と "Launch index.html" (新しいブラウザを開いてファイルを実行) の二つが置いてある。このうち Launch Localhost セクションを create-react-app にあわせて設定するとこうなる。

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000/", // react-script の開発サーバ URL を指定
            "webRoot": "${workspaceRoot}/", // ソースコードの場所。Chrome Developer Tools > Source > webpack://. が差している場所。
            "sourceMaps": true
        }
    ]
}

利用方法

Command Palette > Debug: Select and Start debugging > Launch localhost を選択

感想

機能は面白いが、Chrome Developer Tools と出来ることが同じなので、狭い画面では特に使う理由無いかも。