kledgeb Ubuntuの使い方や日本語化、アプリの使い方を紹介しています。 Ubuntuの最新情報も紹介しています。

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」から行っている接続が切られデバッグが終了します。

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


  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サーバーにあるファイルをデバッグする場合で、設定ファイルの記述内容が少し変わります。

  設定項目

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

キー デフォルト値
name デバッグ設定の名称
type chrome
request launch
sourceMaps
  • true/false
  • ソースマップの有効・無効の指定
true
runtimeExecutable
  • デバッグに使用するブラウザーの指定
  • ワークスペースからの相対パスか絶対パスで指定
Google Chromeが起動する
runtimeArgs ブラウザーに渡すオプション
diagnosticLogging
  • true/false
  • コンソールにログを出力
false
userDataDir --user-data-dirオプションに指定する値

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

    ローカルにあるファイルをデバッグする場合、以下の設定を記述します。
 
キー デフォルト値
file
  • 読み込むHTMLファイル
  • ワークスペースからの相対パスで指定可
index.html

    記述例


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

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

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

キー デフォルト値
url ブラウザーで開くURL http://mysite.com/index.html
webRoot
  • ファイルが配置されているフォルダーのパス
  • ワークスペースからの相対パスか絶対パスで指定

    記述例


{
  "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」を起動します。

google-chrome --remote-debugging-port=9222

  設定項目

    設定項目です。 

キー デフォルト値
name デバッグ設定の名称
type chrome
request attach
port リモートデバッギングのポート番号 9222
webRoot
  • ファイルが配置されているフォルダーのパス
  • ワークスペースからの相対パスか絶対パスで指定
sourceMaps
  • true/false
  • ソースマップの有効・無効の指定
true
diagnosticLogging
  • true/false
  • コンソールにログを出力
false

    記述例


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

参考



関連コンテンツ
同一カテゴリーの記事
コメント
オプション