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

Chrome デバッグの新機能

2017年12月20日 著 Kenneth Auchenberg

ここ数ヶ月間、私たちは Visual Studio Code の Chrome デバッグ体験の改善に努めてきましたが、本日、VS Code でのクライアントサイド JavaScript デバッグをより簡単かつ確実にすると考えられる3つの新機能をリリースできることを嬉しく思います。

Microsoft の Debugger for Chrome 拡張機能をご存知ない方のために説明すると、この拡張機能を使用すると、Google Chrome で実行されているクライアントサイド JavaScript をデバッグできます。これにより、VS Code の既存の JavaScript デバッグ体験に新たな側面が加わります。VS Code では、Node.js でサーバーサイド JavaScript をすぐにデバッグできます。両方のデバッガーをインストールすることで、シームレスなフルスタック JavaScript デバッグが可能になります。

VS Code と Chrome DevTools を同時に使用！

Google Chrome チームと協力して取り組んできた最初のことは、VS Code と Chrome DevTools の両方を同時に使用できるようにすることです！

これは最初からユーザーからの要望でしたが、Chrome の マルチリモートデバッグ接続のサポート の欠如により制限されていました。つまり、VS Code が Chrome に接続すると、Chrome DevTools は終了し、Chrome DevTools を開くと、VS Code は終了するという状況でした。

複数の接続が可能になったことで、DOM Explorer、プロファイラー、または Chrome DevTools 内の他のツールを使用しながら、切断されることなく VS Code から JavaScript をデバッグできるようになりました！

chrome_code

Chrome チームは数ヶ月前からこれに取り組み始め、私たちは彼らと密接に協力して、VS Code の体験が最適であることを確認してきました。マルチ接続は Chrome 63 で正式にリリース され、VS Code とすぐに動作します。マルチ接続サポートを利用するには、最新の Chrome バージョンに更新してください。

Chrome DevTools と VS Code 間のステップ同期

VS Code と Chrome DevTools を組み合わせる機能は、非常に強力な体験になると考えています。これにより、一方のツールをもう一方のツールに置き換えるという難しい選択を強いられることなく、シナリオに適したツールを選択できます。VS Code ではエディターで JavaScript をデバッグできますが、一部のユーザーは DevTools から JavaScript をデバッグすることを好むことも認識しています。そのため、DevTools を置き換えようとするのではなく、これを統合の機会と捉えています。

ツールの統合を改善するための最初のステップは、ここに示されているように、**Chrome DevTools と VS Code 間のステップ同期**です。

sync_stepping

ステップ同期により、VS Code と Chrome DevTools で JavaScript ソースコードを同時にデバッグでき、2つのツール間をシームレスにジャンプできます。各ツール内で、他のデバッガーとの同期がずれることを心配することなく、ステップイン、続行、および JavaScript のデバッグが可能です。

まだ始まったばかりですが、接続されたエディターと DevTools で可能な統合の新しい世界を探索することに興奮しています。

ローカライズされたデバッグ UI

このリリースでは、デバッガーのコア部分のローカライズも有効にしました。これにより、`break on uncaught exceptions` などの機能や、`launch.json` のプロパティの説明がローカライズされ、中国語などのサポートされている言語で利用できるようになりました。

locale1

アプリの実行前にブレークポイントを設定

Visual Studio の協力者 と協力して取り組んできたもう1つの機能は、Chrome で JavaScript が実行される前にブレークポイントを設定できる機能です。これは非常に単純に聞こえますが、JavaScript が非同期でどのようにロードおよび実行されるかという詳細に踏み込むと、かなり複雑です。

多くのユーザーは、Chrome の起動時にブレークポイントがヒットしないという経験をしています。さらに混乱させるのは、簡単なページ更新後にブレークポイントがヒットすることです。なぜでしょうか？少し複雑ですが、これは VS Code と Chrome 間のタイミングの問題に起因し、タイムラインで説明するのが最適です。

黄色のタイムラインでわかるように、問題は、VS Code がブレークポイントを設定する前に一部の JavaScript が実行されることです。

これは、ページロードの一部として*すぐに実行される*ソースコードにブレークポイントがある場合、VS Code は実行が完了する前にブレークポイントを設定できなかったことを意味します。回避策は、コードを再実行し、ブレークポイントをトリガーするページ更新を行うことです。

朗報です！早期に実行されるソースコードに確実にブレークポイントを設定する方法を見つけました。これを `break-on-load breakpoints` と呼んでいます。

ブレークオンロードブレークポイントは、Chrome の DOM Instrumentation Breakpoints を利用しています。これにより、新しいスクリプトがロードされるたびにスクリプトの実行を一時停止できます。これにより、デバッガーのワークフローが変更され、JavaScript が実行される前にブレークポイントを設定するためのより多くの時間を確保できます。

ブレークオンロードを有効にする

ブレークオンロードブレークポイントは Chrome デバッガーの実験的な機能としてリリースされ、`launch.json` 設定で新しい `breakOnLoad` プロパティを `true` に設定することで、この機能を有効にできます。

{
  "type": "chrome",
  "request": "launch",
  "name": "Chrome",
  "url": "https://:3000",
  "webRoot": "${workspaceRoot}/src",
  "breakOnLoad": true
}

ブレークオンロードブレークポイントを有効にすると、新しいスクリプトがロードされるたびにデバッガーが Chrome を一時的に一時停止するため、初期ページロードのパフォーマンスに影響があります。そのため、これは現在オプトイン機能となっています。ブレークポイントが機能しない場合は、ブレークオンロードブレークポイントを有効にして、動作状況をお知らせください。

今回はここまでです。Chrome デバッガーにとって大きなアップデートであり、これらの新機能に対する皆様のフィードバックを楽しみにしています。エディターが DevTools とより統合される世界で、ツールに何を期待し、何を望むか教えてください。

ハッピーコーディング！

Kenneth (@auchenberg)

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