に参加して、VS Code の AI 支援開発について学びましょう。

VS Code 用 Chrome デバッグ機能の紹介

2016年2月23日 Andy Sterland および Kenneth Auchenberg

Visual Studio Code の最初のリリース以来、私たちの重点の一つは、開発者がエディタから直接コードをデバッグできるようにすることで、日々のワークフローを簡素化することでした。当初は .NET と Node.js のデバッグ機能から始まりましたが、本日、Visual Studio Code 用の Chrome デバッガを導入することで、次のステップを踏み出します。

私たちの Chrome デバッガは、フロントエンド開発者が Google Chrome 内で実行されているクライアントサイドの JavaScript コードを Visual Studio Code から直接デバッグできるようにします。


Demo

どのように機能するのですか？

私たちのデバッガは、Chrome の Chrome Debugger プロトコルを介して Chrome に接続し、ブラウザにロードされたファイルを Visual Studio Code で開かれているファイルにマッピングすることで機能します。これにより、開発者はソースコードに直接ブレークポイントを設定し、ウォッチする変数を設定し、デバッグ時に完全なコールスタックを確認できるようになります。これらすべてをエディタを離れることなく行えます。

上記の例では、Browserify を介してバンドルおよびミニファイされた AngularJS アプリが VS Code からデバッグされている様子を示しています。これは、私たちのデバッガが JavaScript Source Maps を理解しているためです。ソースマップを使用することで、開発者はブラウザが認識するトランスパイルされた結果ではなく、元のソースから直接デバッグできるようになります。ソースマップをサポートすることで、TypeScript も VS Code から直接デバッグできるようになります。

今のところ、Chrome はリモートデバッグが有効な状態で起動する必要があり、同時にサポートされる接続は1つだけです。これは、Chrome 内で DevTools を開くと、VS Code への接続が Chrome によって終了されることを意味します。これは少し厄介ですが、この問題が近いうちに修正されることを願っています。

はじめに

始めるには、拡張機能ビューを開きます（⇧⌘X (Windows, Linux Ctrl+Shift+X)）。拡張機能リストが表示されたら、「chrome」と入力してリストをフィルター処理し、Debugger for Chrome拡張機能をインストールします。次に、起動構成ファイルを作成します。これについては、こちらの README に詳細が記載されています。

VS Code を既に実行中の Chrome インスタンスに接続するように設定することも、リモートデバッグを有効にした新しいインスタンスを起動することもできますが、詳細についてはREADMEをお読みください。

サポートされる機能

この最初のリリースでは、以下の機能をサポートしています。

  • ソースマップが有効な場合のソースファイル内でのブレークポイント設定
  • ソースマップを介したTypeScript
  • Chrome ページのボタンを使用したステップ実行
  • VS Code のローカル変数ペインを介したローカルスコープ変数
  • evalスクリプト、スクリプトタグ、動的に追加されるスクリプトのデバッグ
  • VS Code のウォッチパネルを介したウォッチ
  • デバッグコンソール
  • ほとんどのコンソールAPI

今後の展望

ここ数年、Web 開発は非常に複雑になっており、フロントエンド開発者にはやるべきことがたくさんあると私たちは考えています。私たちの Chrome デバッガは、ブラウザと異なるベンダーのツールが連携し、Web 開発がより統合されたものになる、よりシンプルな Web 開発ワークフローへの第一歩を踏み出しています。

この拡張機能は、MIT ライセンスのオープンソースプロジェクトとして GitHub でリリースしました。これは進行中の作業であり、既知のバグについては課題ページをご覧ください。例えば、生成されたソースマップのすべての種類をサポートすることに関して、いくつかの課題があります。

今のところ Google Chrome をサポートしていますが、Microsoft Edge やその他のブラウザへのサポート拡大も検討しています。さらに優れたデバッグ体験を構築するために、皆様からのフィードバックとご協力をお待ちしております。

問題や改善のアイデアがございましたら、お気軽に Twitter または GitHub でお問い合わせください。

–

Andy Sterland、シニアプログラムマネージャー、JavaScript Diagnostics
Kenneth Auchenberg、プログラムマネージャー、JavaScript Diagnostics

© . This site is unofficial and not affiliated with Microsoft.