このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 99）

Jecelyn Yeen

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

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

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

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

Chromium の問題: 423246

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

新しい [Reporting API] ペインを使用すると、ページで生成されたレポートとそのステータスを確認できます。

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

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

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

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

Reporting API ペイン

Chromium の問題: 1205856

[Recorder] パネルで要素が表示/クリック可能になるまで待機する

ユーザーフローの記録を再生する際、[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 拡張機能をデバッグできるようになりました。これまで、Chrome 拡張機能のデバッグでは、DevTools はインラインソースマップのみをサポートしていました。

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

Chromium の問題: 212374

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

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

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

Chromium の問題: 1284737

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

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

ALT_TEXT_HERE

Chromium の問題: 1277002

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

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

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

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

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

Chromium の問題: 1243309

タッチフレンドリーなカラー選択ツールと分割ペイン

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

Google Pixelbook デバイスのタッチスクリーンで撮影した例を次に示します。

Chromium に関する問題: 1284245、1284995

その他のハイライト

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

[Cookie] ペインの Cookie の編集に関する問題を修正しました。（1290196）
Shift+Tab キーを使用して、コマンドメニューで前のコマンドを選択します。（1278743）
[問題] タブで、CORS プリフライトリクエストの問題を報告します。（1272445）。
User-Agent Client Hints の問題は、[Issues] タブで報告します。（1219359）。
[Sources] パネルと [Console] パネルでの Shift + Delete と Page up / Page down の動作を修正しました。（1278461、1285662）
[Sources] パネルでブレークポイントを削除する際に、ブレークポイント編集ダイアログを閉じます。（922513）。
DevTools でライトモードとダークモードを切り替えるときに、再読み込みは必要ありません。（1278738）

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

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

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

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

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