DevTools の新機能（Chrome 99）

Jecelyn Yeen

WebSocket リクエストのスロットリング

[ネットワーク] パネルで、WebSocket リクエストのスロットリングがサポートされるようになりました。以前は、ネットワーク スロットリングが WebSocket リクエストで機能しませんでした。

[ネットワーク] パネルを開き、WebSocket リクエストをクリックして [メッセージ] タブを開き、メッセージの転送を確認します。[3G 低速] を選択すると、速度が抑制されます。

WebSocket リクエストのスロットリング

Chromium の問題: 423246

[アプリケーション] パネルの [新しい Reporting API] ペイン

新しい Reporting API ペインを使用して、ページで生成されたレポートとそのステータスをモニタリングできます。

Reporting API は、ページのセキュリティ違反や非推奨の API 呼び出しなどをモニタリングできるように設計されています。

Reporting API を使用するページ（デモページなど）を開きます。[アプリケーション] パネルで、[バックグラウンド サービス] セクションまで下にスクロールし、[Reporting API] ペインを選択します。

[レポート] セクションには、ページで生成されたレポートのリストとそのステータスが表示されます。これをクリックすると、レポートの詳細が表示されます。

[エンドポイント] セクションには、Reporting-Endpoints ヘッダーで構成されているすべてのエンドポイントの概要が表示されます。

[Reporting API] ペイン

Chromium の問題: 1205856

[レコーダー] パネルで要素が表示される/クリックできるようになるまでの待機時間をサポート

ユーザーフローの記録をリプレイする際、[Recorder] パネルは、要素がビューポートに表示されるかクリック可能になるまで待機するか、ステップをリプレイする前に要素をビューポートに自動的にスクロールしようとします。以前は、リプレイがすぐに失敗していました。

ビューポートの外側に配置し、アクティブにするとスライドインするオフスクリーン メニューの例を示します。ユーザーフローでは、メニューを切り替えて、メニュー項目をクリックします。以前は、メニュー項目がビューポートにまだスライドインしたままで、まだ表示されていないため、最後のステップでリプレイが失敗していました。この問題は解決しました。

Chromium の問題: 1257499

コンソールのスタイル設定、書式設定、フィルタを改善

ANSI エスケープ コードを使用してログメッセージのスタイルを適切に設定する

ANSI エスケープ シーケンスを使用して、コンソール メッセージのスタイルを適切に設定できるようになりました。以前の DevTools コンソールでは、ANSI エスケープ シーケンスのサポートが非常に限られていました（また、部分的に壊れていました）。

Node.js のデベロッパーは一般的に、chalk、colors、ansi-colors、kleur などのスタイル設定ライブラリを利用して、ANSI エスケープ シーケンスを使用してログメッセージを色付けします。

これらの変更により、DevTools を使用して Node.js アプリケーションをシームレスにデバッグし、適切な色分けされたコンソール メッセージを使用できるようになりました。こちらのdemoを開いて、実際にご覧ください。

形式や詳細については、DevTools を使用したコンソール メッセージのスタイル設定については、コンソールでのメッセージの書式設定とスタイル設定のドキュメントをご覧ください。

コンソールのスタイル設定

Chromium の問題: 1282837、1282076

%s、%d、%i、%f 形式指定子を適切にサポート

Google Play Console で、Console Standard で指定されている %s、%d、%i、%f タイプの変換が適切に行われるようになりました。以前は、会話の結果に一貫性がありませんでした。

コンソール メッセージで形式指定子をサポート

Chromium の問題: 1277944、1282076

より直感的なコンソール グループ フィルタ

コンソール メッセージをフィルタする際、メッセージの内容がフィルタと一致する場合、またはグループ（または祖先グループ）のタイトルがフィルタと一致すると、コンソール メッセージが表示されるようになりました。以前は、フィルタに関係なく、コンソール グループのタイトルが表示されていました。

また、コンソール メッセージが表示される場合、そのメッセージが属するグループ（または祖先グループ）も表示されるようになりました。

コンソールのグループ フィルタ

Chromium の問題: 1068788

ソースマップの改善

ソースマップ ファイルを使用して Chrome 拡張機能をデバッグする

ソースマップ ファイルを使用して Chrome 拡張機能をデバッグできるようになりました。これまで、DevTools は Chrome 拡張機能のデバッグに対してインライン ソースマップのみをサポートしていました。

ソースマップ ファイルを使用して Chrome 拡張機能をデバッグする

Chromium の問題: 212374

[Sources] パネルのソース フォルダ ツリーの改善

[Sources] パネルのソース フォルダ ツリーが改善され、フォルダ構造や命名（「../」、「./」など）が見やすくなりました。これは内部的には、ソースマップ内の絶対ソース URL を正規化した結果です。

[Sources] パネルのソース フォルダ ツリーの改善

Chromium の問題: 1284737

[Sources] パネルにワーカーのソースファイルを表示する

Worker（ウェブ ワーカー、Service Worker など）のソースファイルが相対 SourceURL で指定され、[ソース] パネルに表示されるようになりました。以前は、ワーカーのソースファイルが正しく処理されませんでした。

ALT_TEXT_HERE

Chromium の問題: 1277002

Chrome の自動ダークモードのアップデート

自動ダークモード エミュレーションの UI が簡素化されました。現在はチェックボックスになっていますが、以前はプルダウンでした。

これとは別に、自動ダークモードが有効になっている場合、[Emulatepreferreds-color-scheme] プルダウンは無効になり、自動的に prefers-color-scheme: discount に設定されます。

Chrome 96 では、Android の自動ダークモードのオリジン トライアルが導入されます。この機能を使用すると、ユーザーがオペレーティング システムでダークモードを有効にしている場合に、ライトがテーマのサイトに自動生成されたダークモードが適用されます。

自動ダークモードのエミュレーション

Chromium の問題: 1243309

タップ操作に対応したカラー選択ツールと分割ペイン

タッチスクリーン デバイスの指やタッチペンを使用して、DevTools で色の選択やドロワーのサイズ変更ができるようになりました。

以下は、Google Pixelbook デバイスのタッチスクリーンでキャプチャした例です。

Chromium の問題: 1284245、1284995

その他のハイライト

このリリースでの注目すべき修正は次のとおりです。

プレビュー チャンネルをダウンロードする

デフォルトの開発ブラウザとして Chrome の Canary、Dev、または Beta を使用することを検討してください。これらのプレビュー チャンネルを使用すると、DevTools の最新機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーに先駆けてサイトの問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。