Visual Studio CodeでのJSのデバッグ方法(2018年版)

68
101
117

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と連携してデバッグをする

設定する項目は「新規にChromeを起動してデバッグをする」とほぼ同じ内容ですが、リモートデバッギングポートのポート番号を指定する必要があります。sourceMapstraceなどの設定は指定がなければ省略は可能です。

{
  "version": "0.1.0",
  // 起動中のChromeと連携してデバッグ
  "configurations": [
    {
      // デバッグ設定の名称
      "name": "Attach",
      // デバッグ種別を指定(chrome/node/monoなど)
      "type": "chrome",
      // lanunchまたはattachを指定
      "request": "attach",
      // マッピングするローカルファイルが配置されているディレクトリを指定
      "webRoot": "${workspaceRoot}/",
      // リモートデバッギングポートのポート番号を指定(デフォルト値の9222を指定)
      "port": 9222,
      // ソースマップの有効・無効の指定(true/false)
      "sourceMaps": true,
      // コンソールにログを出力するかの指定(true/false)
      "trace": true
    }
  ]
}

起動しているChromeと連携するには、Chromeのリモートデバッグを有効にしておく必要があります。実行するOSにより、以下の手順でリモートデバッグを有効にしてChromeを起動します。

  • Windowsの場合
    Chromeのショートカットを右クリックし、コンテキストメニューより[プロパティ]を選択します。ダイアログのリンク先欄に--remote-debugging-port=9222の起動オプションを付加して、Chromeを起動します。

    <path to chrome>/chrome.exe --remote-debugging-port=9222
    
  • macOSの場合
    ターミナル。appより下記のコマンドを実行し、Chromeを起動します。

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
    

Chromeが起動したら、デバッグを行いたいウェブページに遷移し、デバッグパネルより再生ボタンもしくはF5キーを押すことで、デバッグを実行できます。

うまく動かない場合は・・・

  • [webkit-debug-adapter] Path must be a string. Received undefinedと表示れた場合は、設定ファイルに記載しているファイルパスを確認してみてください。
  • [debugger-for-chrome] Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222と表示された場合は、Chromeをいったん終了し、再起動すると解決することがあります。
  • 他のタブで同一のファイルを開いていた場合、一番始めのタブで開いたウェブページに接続されます。不要なタブは閉じておくようにしましょう。

おわりに

MicrosoftはChromeだけでなくMicrosoft Edgeでも同様のデバッグができる「Debugger for Edge」もリリースしています。ソースマップにも対応しているため、圧縮されたJavaScriptファイルやTypeScriptのコードもそのままデバッグできます。エディター上でデバッグができるため、デバッグ効率もあがり開発効率も格段にアップします。

その他にもGitとの連携やTaskRunnerとの連携など多彩な機能を備えています。まだ「Visual Studio Code」を使用したことのない方はぜひお試しください。

また、Google Chromeのデベロッパーツールでも同様のデバッグを行うことができます。詳しくは「ChromeのデベロッパーツールでJSをデバッグする方法(入門編)」をご参照ください。

※本記事は、2018年6月時点最新のVisual Studio Code 1.24.0、Debugger for Chrome 4.6.0、Chrome 67で動作確認を行っています。

※この記事が公開されたのは3年1ヶ月前ですが、 平成30年6月29日に内容をメンテナンスしています。