Chromeブラウザのデバッグ機能と連携できます。Codeとが接続し、Chromeに読み込まれたファイルとローカルのファイルをマッピングできるようになります。Code上でブレークポイントを設定してコールスタックを確認したり、ステップ実行や変数のウォッチなどを行えます。動作イメージは次の公式サイトに掲載されているデモの映像を見てもらうとわかりやすいでしょう。本記事ではデバッグ機能を使うための導入方法について説明します。Codeを起動し、サイドバーにある拡張機能のアイコンを選択します。[拡張機能]を選択し、拡張機能のパネルを表示します。Chromeを選択し、拡張機能をインストールします。インストールが完了したら、「再読み込み」ボタンが表示されるため、再読み込みボタンを押し再起動すればインストールは完了です。Chorme」の拡張機能には、「新規にChromeを起動してデバッグする」もしくは「起動中のChromeと連携してデバッグする」の2つのモードが用意されています。利用するモードにより、設定ファイルに記述する内容が変わってきます。プロジェクトのルートディレクトリに.vscode/launch.jsonファイルを新規に作成してください。設定ファイルには、下記の通り利用するモードによりデバッグ設定を記述します。新規にChromeを起動してデバッグをする設定ファイルには、複数のデバッグ設定を定義できます。下記の例では、「ローカルにあるファイルをデバッグする」設定と「Webサーバー上にあるファイルをデバッグする」設定をサンプルとしてそれぞれ記述しています。Code」に設定ファイルが読み込まれます。サイドバーからデバッグパネルを開き、プルダウンから実行したいデバッグ設定を選択します。file」を選択しています。任意のデバッグ設定を選択したら、プルダウンの左側にある再生ボタンまたはF5キーを押してデバッグを実行します。Code」上からデバッグができるようになっています。起動中のChromeと連携してデバッグをする設定する項目は「新規にChromeを起動してデバッグをする」とほぼ同じ内容ですが、リモートデバッギングポートのポート番号を指定する必要があります。sourceMapsやtraceなどの設定は指定がなければ省略は可能です。]}起動しているChromeと連携するには、Chromeのリモートデバッグを有効にしておく必要があります。実行するOSにより、以下の手順でリモートデバッグを有効にしてChromeを起動します。Windowsの場合Chromeのショートカットを右クリックし、コンテキストメニューより[プロパティ]を選択します。ダイアログのリンク先欄に--remote-debugging-port=9222の起動オプションを付加して、Chromeを起動します。--remote-debugging-port=9222macOSの場合ターミナル。appより下記のコマンドを実行し、Chromeを起動します。--remote-debugging-port=9222Chromeが起動したら、デバッグを行いたいウェブページに遷移し、デバッグパネルより再生ボタンもしくはF5キーを押すことで、デバッグを実行できます。undefinedと表示れた場合は、設定ファイルに記載しているファイルパスを確認してみてください。127.0.0.1:9222と表示された場合は、Chromeをいったん終了し、再起動すると解決することがあります。他のタブで同一のファイルを開いていた場合、一番始めのタブで開いたウェブページに接続されます。不要なタブは閉じておくようにしましょう。Edge」もリリースしています。ソースマップにも対応しているため、圧縮されたJavaScriptファイルやTypeScriptのコードもそのままデバッグできます。エディター上でデバッグができるため、デバッグ効率もあがり開発効率も格段にアップします。その他にもGitとの連携やTaskRunnerとの連携など多彩な機能を備えています。Code」を使用したことのない方はぜひお試しください。Chromeのデベロッパーツールでも同様のデバッグを行うことができます。詳しくは「ChromeのデベロッパーツールでJSをデバッグする方法(入門編)」をご参照ください。67で動作確認を行っています。平成30年6月29日に内容をメンテナンスしています。真耶インタラクティブデベロッパー。Web制作会社でサーバサイドやフロントエンドの制作に携わり、現在は株式会社ICSでインタラクティブコンテンツの制作を担当。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。