Microsoftが無償で提供しているエディター「Visual Studio Code(略称:VS Code)」は拡張機能をインストールすることで、Google Chromeブラウザのデバッグ機能と連携できます。

具体的には、Chromeのデバッガープロトコル経由でVS Codeとが接続し、Chromeに読み込まれたファイルとローカルのファイルをマッピングできるようになります。それによりVS Code上でブレークポイントを設定してコールスタックを確認したり、ステップ実行や変数のウォッチなどを行えます

動作イメージは次の公式サイトに掲載されているデモの映像を見てもらうとわかりやすいでしょう。

本記事ではデバッグ機能を使うための導入方法について説明します。

拡張機能のインストール

1. Visual Studio Codeを起動し、サイドバーにある拡張機能のアイコンを選択します。もしくは、エディターのメニューより[表示] > [拡張機能]を選択し、拡張機能のパネルを表示します。

2. 上部の入力ボックスにDebugger for Chromeと入力すると拡張機能の一覧がフィルタリングされるので、一覧からDebugger for Chromeを選択し、拡張機能をインストールします。

3. インストールが完了したら、「再読み込み」ボタンが表示されるため、再読み込みボタンを押し再起動すればインストールは完了です。

設定ファイルの作成とデバッグ実行

「Debugger for Chorme」の拡張機能には、「新規にChromeを起動してデバッグする」もしくは「起動中のChromeと連携してデバッグする」の2つのモードが用意されています。利用するモードにより、設定ファイルに記述する内容が変わってきます。

まずは、プロジェクトのルートディレクトリに.vscode/launch.jsonファイルを新規に作成してください。設定ファイルには、下記の通り利用するモードによりデバッグ設定を記述します。

新規にChromeを起動してデバッグをする

設定ファイルには、複数のデバッグ設定を定義することができます。下記の例では、「ローカルにあるファイルをデバッグする」設定と「Webサーバー上にあるファイルをデバッグする」設定をサンプルとしてそれぞれ記述しています。

launch.json

{
  "version": "0.1.0",
  "configurations": [
    // ローカルにあるファイルをデバッグ
    {
      // デバッグ設定の名称
      "name": "Launch local file",
      // デバッグ種別を指定(chrome/node/monoなど)
      "type": "chrome",
      // lanunchまたはattachを指定
      "request": "launch",
      // 読み込むHTMLファイルを指定(プロジェクトからのパスを指定)
      "file": "${workspaceRoot}/index.html"
    },
    // Webサーバー上にあるファイルをデバッグ
    {
      // デバッグ設定の名称
      "name": "Launch remote website with sourcemaps",
      // デバッグ種別を指定(chrome/node/monoなど)
      "type": "chrome",
      // lanunchまたはattachを指定
      "request": "launch",
      // Webサーバー上にあるデバッグ対象のURLを指定
      "url": "http://127.0.0.1:8086/index.html",
      // マッピングするローカルファイルが配置されているディレクトリを指定
      "webRoot": "${workspaceRoot}/",
      // ソースマップの有効・無効の指定(true/false)
      "sourceMaps": true
    }
  ]
}

launch.jsonを作成すると「Visual Studio Code」に設定ファイルが読み込まれます。サイドバーからデバッグパネルを開き、プルダウンから実行したいデバッグ設定を選択します。下記のスクリーンショットでは、ローカルにあるファイルをデバッグする設定の「Launch local file」を選択しています。

任意のデバッグ設定を選択したら、プルダウンの左側にある再生ボタンまたはF5キーを押してデバッグを実行します。デバッグが実行すると該当ページを表示したChromeが起動し、「Visual Studio Code」上からデバッグができるようになっています。

次のページでは起動中のChromeと連携してデバッグする方法について説明します。