(cache) Visual Studio Codeを使いこなせ！ Chromeと接続してJSをデバッグする方法

Visual Studio Codeを使いこなせ！ Chromeと接続してJSをデバッグする方法

Microsoftが無償で提供しているエディター「Visual Studio Code」がブラウザ「Google Chrome」のデバッガープロトコルに対応したとの発表が2016年2月23日にありました。拡張機能をインストールすることで、Chromeのデバッガープロトコル経由でChromeに接続し、Chromeにロードされたファイルとローカルのファイルをマッピングすることができるようになります。それにより「Visual Studio Code」上でブレークポイントを設定してコールスタックを確認したり、ステップ実行や変数のウォッチなどを行うことができます。

下記は公式サイトに掲載されているデモの映像です。本記事ではデバッグ機能を使うための導入方法について説明します。

拡張機能のインストール

[F1]キーを押してコマンドパレットを開きext installと入力し、候補に出てくるExtensions: Install Extensionを選択します。v1.0の日本語メニューを使用している方は、拡張機能のインストールと入力し、候補に出てくる拡張機能：拡張機能のインストールを選択してください。※v1.0では、コマンドパレットで入力するコマンドまでローカライズされているため、コマンドの利用がしづらくなっています。2016年5月のリリースで修正されるようですが、それまでは英語メニューを利用することをオススメします。英語メニューへの切り替え方法は下記のサイトが参考になります。
- Visual Studio Code バージョン1.0.0の表示言語を英語に戻す方法
続けてchromeと入力すると、拡張機能一覧をフィルタリングされるので、一覧からDebugger for Chromeを選択します。
インストールが完了すると再起動を促すメッセージが表示されるので、再起動すればインストールは完了です。

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

「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」を選択しています。

デバッグパネル