DevTools の新機能（Chrome 99）

Jecelyn Yeen

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

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

[ネットワーク] パネルを開き、ウェブ ソケット リクエストをクリックして [メッセージ] タブを開き、メッセージの転送を確認します。[低速 3G] を選択して速度をスロットリングします。

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

Chromium の問題: 423246

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

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

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

Reporting API を使用するページ（デモページなど）を開きます。[Application] パネルで、[Background services] セクションまでスクロールし、[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 を持つ Worker（Web Worker、Service Worker など）のソースファイルが [ソース] パネルに表示されるようになりました。以前は、ワーカーのソースファイルが正しく処理されていませんでした。

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 の新機能シリーズで取り上げられたすべての内容のリスト。