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

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 アプリケーションをシームレスにデバッグし、適切な色分けされたコンソールメッセージを使用できるようになりました。こちらのデモを開いて、実際にご覧ください。

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

その他のハイライト

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

[Cookies] ペインの Cookie の編集の問題を修正しました。（1290196）。
コマンドメニューで前のコマンドを選択するには、Shift + Tab キーを押します。（1278743）。
[Issues] タブで、CORS プリフライトリクエストの問題を報告します。（1272445）。
[Issues] タブで User-Agent Client Hints の問題を報告します。（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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。