Visual Studio Code その3 - Google Chromeと連携してJavaScriptをデバッグできるようになりました・Debugger for Chrome拡張のインストールとデバッグ設定

Google Chromeと連携してJavaScriptをデバッグ

  「Visual Studio Code」から「Google Chrome」上で動作するクライアントサイドの「JavaScript」コードを直接デバッグできるようになりました。


  デバッガーは「Chrome Debugger protocol」で「Google Chrome」に接続し、「Google Chrome」で読み込んでいるファイルと「Visual Studio Code」で開いているファイルの関連付け（マッピング）を行います。

  「Visual Studio Code」で開いている「JavaScript」のソースコードにブレークポイントを設定したり、変数の確認や変数のウォッチを「Visual Studio Code」から行うことができます。
  もちろんスタックコールの確認もできますし、ステップ実行やステップイン等の操作も可能です。

  Google Chromeのディベロッパーツールと併用できない

    現状、「Google Chrome」のディベロッパーツールと併用できません。


    従って「Visual Studio Code」からデバッグを行う場合、「Google Chrome」のディベロッパーツールはオフにしておいてください。

    「Visual Studio Code」からデバッグを行っている最中にディベロッパーツールを有効にすると、「Visual Studio Code」から行っている接続が切られデバッグが終了します。

    将来的にどちらからでもデバッグできるようになる予定です。

• opening embedded Developer Tools will terminate the remote connection

  Web Workerには非対応

    現状Web Workerのデバッグには対応していません。

Debugger for Chrome拡張のインストール

  「Visual Studio Code」から「Google Chrome」でデバッグを行う場合、「Debugger for Chrome」拡張をインストールする必要があります。

  「Visual Studio Code」をインストールしていない場合は、まず「Visual Studio Code」をインストールしてください。

  1.コマンドパレットの表示

    「Visual Studio Code」を起動し、「F1」キーを押します。
    以下のように、画面上部にコマンドパレットが表示されます。

  2.拡張インストールコマンドの実行

    コマンドパレットに「ext install」と入力します。
    以下のように「Extensions: Install Extension」コマンドが候補に上がるので、「Extensions: Install Extension」を選択して「エンター」キーを押します。

  3.拡張のインストール

    次に「chrome」と入力します。
    以下のように「Debugger for Chrome」が候補に上がるので、「Debugger for Chrome」を選択して「エンター」キーを押します。

  4.インストール完了

    インストールが完了すると以下の通知が表示されるので、「Restart Now」をクリックし、「Visual Studio Code」を再起動します。

2種類のデバッグモードと設定ファイル

  「Visual Studio Code」から「Google Chrome」でデバッグを行う際、以下の2種類のデバッグモードを利用できます。

1. Google Chromeを起動してデバッグを行う
2. すでに起動しているGoogle Chromeに接続してデバッグを行う

  どちらのデバッグモードを利用しても良いですが、デバッグまでの手順が少し異なります。

  デバッグの設定を設定ファイルに記述する必要がある

    デバッグを行うには、デバッグの設定を設定ファイルに記述する必要があります。
    設定ファイルは、「.vscode/launch.json」です。


    ワークスペース内に「.vscode/launch.json」ファイルを作成してください。
    デバッグの設定は、JSON形式で設定を記述します。（テキストファイル）
    記述内容もデバッグモードにより少し異なってきます。

  設定ファイルのフォーマット

    設定ファイルの基本的なフォーマットは、以下のようになります。

{
  "version": "0.1.0",
  "configurations": [
    {
      (ここに1つ目のデバッグ設定を記述する)
    },
    {
      (ここに2つ目のデバッグ設定を記述する)
    }
  ]
}

    1つ目2つ目というのは、設定ファイル内に複数のデバッグ設定を記述できることを意味します。
    これらのデバッグ設定は、「Visual Studio Code」に表示されます。
    ユーザーはどの設定でデバッグを行うのかを選択し、デバッグを開始します。

  設定ファイルの記述例

    設定ファイル記述例です。

{
  "version": "0.1.0",
  "configurations": [
    {
      "name": "Debug 1",
      "type": "chrome",
      "request": "launch",
      "file": "index.html"
    },
    {
      "name": "Debug 2",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost/mypage.html",
      "webRoot": "./app/files",
      "sourceMaps": true
    }
  ]
}

    「Debug 1」と「Debug 2」の2つのデバッグ設定が記述されています。
    「Visual Studio Code」のデバッグメニューに「Debug 1」と「Debug 2」が表示され、ユーザーはいずれかのデバッグ設定を選択し、デバッグを行います。

1.Google Chromeを起動してデバッグを行う

  「Google Chrome」を起動してデバッグを行います。
  ローカルにあるファイルをデバッグする場合と、Webサーバーにあるファイルをデバッグする場合で、設定ファイルの記述内容が少し変わります。

  設定項目

    共通して利用できる設定項目です。 

  ローカルにあるファイルをデバッグする場合

    ローカルにあるファイルをデバッグする場合、以下の設定を記述します。
 

    記述例

{
  "version": "0.1.0",
  "configurations": [
    {
      "name": "Debug 1",
      "type": "chrome",
      "request": "launch",
      "file": "index.html"
    }
  ]
}

  Webサーバーにあるファイルをデバッグする場合

    Webサーバーにあるファイルをデバッグする場合、以下の設定を記述します。

    記述例

{
  "version": "0.1.0",
  "configurations": [
    {
      "name": "Debug 2",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost/mypage.html",
      "webRoot": "./app/files",
      "sourceMaps": true
    }
  ]
}

2.すでに起動しているGoogle Chromeに接続してデバッグを行う

  すでに起動している「Google Chrome」に接続してデバッグを行います。

  リモートデバッグが有効になっている必要がある

    起動している「Google Chrome」は、リモートデバッグが有効になっている必要があります。
    リモートデバッグを有効にして「Google Chrome」を起動するには、「端末」から以下のように「Google Chrome」を起動します。

  設定項目

    設定項目です。 

    記述例

{
  "version": "0.1.0",
  "configurations": [
    {
        "name": "Attach",
        "type": "chrome",
        "request": "attach",
        "port": 9222
    }
  ]
}

参考

• Introducing Chrome Debugging for VS Code
• Microsoft/vscode-chrome-debug