DevTools の新機能（Chrome 99）

Jecelyn Yeen

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 デベロッパーは、ANSI エスケープ シーケンスを使用してログメッセージを色付けすることがよくあります。多くの場合、chalk、colors、ansi-colors、kleur などのスタイリング ライブラリを使用します。

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

DevTools を使用してコンソール メッセージの形式とスタイルを設定する方法については、コンソールでメッセージの形式とスタイルを設定するをご覧ください。

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

Chromium の問題: 1282837、1282076

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

コンソールで、コンソール標準で指定されているとおりに %s、%d、%i、%f の型変換が正しく実行されるようになりました。以前は、会話の結果に一貫性がありませんでした。

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

Chromium の問題: 1277944、1282076

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

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

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

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

Chromium の問題: 1068788

ソースマップの改善

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

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

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

Chromium の問題: 212374

[ソース] パネルのソースフォルダ ツリーが改善されました

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

[ソース] パネルのソースフォルダ ツリーが改善されました

Chromium の問題: 1284737

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

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

ALT_TEXT_HERE

Chromium の問題: 1277002

Chrome の自動ダークモードの更新

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

また、自動ダークモードが有効になっている場合、[prefers-color-scheme のエミュレート] プルダウンは無効になり、自動的に prefers-color-scheme: dark に設定されます。

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

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

Chromium の問題: 1243309

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

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

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

Chromium の問題: 1284245、1284995

その他のハイライト

このリリースでの重要な修正は次のとおりです。

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

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

Chrome DevTools チームに問い合わせる

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容の一覧。