DevTools の新機能 (Chrome 99)

公開日 2022年2月21日月曜日 • 更新日 2022年2月21日月曜日

翻訳先言語： English, Español, Português, 한국어, 中文, Pусский

Jecelyn Yeen

Google で Chrome DevTools に取り組んでいる Developer Advocate です。

翻訳者の technohippy さん、レビュアーの yoichiroさんと lacolaco さんに感謝いたします。

DevTools の改善に興味がある方はサインアップして Google User Research にご協力ください。

WebSocketリクエスト数の制限

Network パネルに WebSocket リクエスト数の制限が新しく追加されました。これまで、ネットワーク制限は WebSocket リクエストに対しては有効ではありませんでした。

Network パネルを開き、WebSocket リクエストをクリックして、メッセージの通信状況を確認するために Messages タブを開いてください。通信速度を制限するためには Slow 3G を選択します。

Chromium issue: 423246

Application パネル内に新しく追加されたReporting API ペイン

新しく追加された Reporting API ペインを使用すると、そのページで生成されるレポートやそれらの状況を監視できます。

Reporting API はセキュリティ違反や廃止されるAPIの呼び出しなどを監視できるように設計されています。

Reporting API を使用しているページ（例、デモページ）を開いてください。Application パネルのBackground services セクションまでスクロールし、Reporting API ペインを選択します。

Reports セクションではそのページで生成されたレポートのリストとそれらのステータスが表示されていて、クリックするとレポートの詳細を確認できます。

Endpoints セクションには Reporting-Endpoints ヘッダで設定されている全エンドポイントの概要があります。

Chromium issue: 1205856

Recorder パネルに要素が可視／クリック可能になるまで待機する機能が追加

Recorder パネルでユーザーフローの記録をリプレイする際に、要素がビューポート内で可視もしくはクリック可能になるまで待機するか、次のステップをリプレイする前に要素がビューポートに含まれるまで自動的にスクロールするようになりました。これまでは、リプレイは即座に失敗していました。

次の画像はビューポートの外側に位置し、有効になるとスライドインするオフスクリーンメニューの例です。メニューをトグルし、メニューアイテムをクリックするというユーザーフローです。これまではメニューアイテムがまだスライドインしておらず、ビューポート内に表示されていないので、最後の段階で失敗していました。この挙動が修正されています。

Chromium issue: 1257499

コンソールのスタイル設定、フォーマット、フィルタの改善

ANSI エスケープコードを使用したログメッセージの正しいスタイル設定

ANSI エスケープシーケンスを使用してコンソールメッセージのスタイルを適切に設定できるようになりました。これまで DevTools コンソールは ANSI エスケープシーケンスを非常に限定的な（場合によっては不具合もある）サポートしかしていませんでした。

Node.js にとって、chalk や colors, ansi-colors、kleur などのスタイル設定用のライブラリの助けを借りて ANSI エスケープシーケンスでログメッセージに色付けすることは一般的です。

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

DevToolsのコンソールメッセージのフォーマット指定やスタイル設定についてさらに学びたければ、Format and style messages in the Console ドキュメントを参照してください。

Chromium issues: 1282837, 1282076

フォーマット指定子`%s`、`%d`、`%i`、`%f`を正しくサポート

Console が Console Standard の規定に従って%s、%d、%i、%fを指定した型変換を適切に処理するようになりました。これまでは変換結果が一貫していませんでした。

Chromium issues: 1277944, 1282076

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

コンソールメッセージをフィルタリングする際に、メッセージの内容がフィルタと一致するか、グループ（または祖先グループ）のタイトルがフィルタと一致するとコンソールメッセージが表示されるようになりました。これまでは、フィルタに関わらず、コンソールグループタイトルが表示されていました。

また、コンソールメッセージが表示される時に、所属しているグループ（または祖先グループ）も表示されるようになりました。

Chromium issue: 1068788

ソースマップの改善

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

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

Chromium issue: 212374

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

Sources パネルのソースフォルダツリーがフォルダ構造と名前付け（例、"../"、"./"など）により乱れにくく改善されました。内部的には、ソースマップ内の絶対ソースURLが正規化された結果が使用されています。

Chromium issue: 1284737

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

相対 SourceURL を持つ Worker（例、Web Worker、Service Worker）のソースファイルが Source パネルに表示されるようになりました。これまでは、ワーカーのソースファイルは正しく扱われませんでした。

Chromium issue: 1277002

Chrome の自動ダークテーマの更新

自動ダークテーマエミュレーションの UI が単純になりました。これまではドロップダウンでしたが、チェックボックスが使用されます。

さらに、Auto Dark Theme が有効なときに、Emulate prefers-color-scheme ドロップダウンが無効になり、prefers-color-scheme: dark が自動的に設定されます。

Chrome 96 で Android の Auto Dark Theme のオリジントライアルが開始されました。この機能を使用すると、ユーザーがオペレーティングシステムでダークテーマをオプトインしているときに、ブラウザはライトテーマが使用されているサイトに対して自動的に生成されたダークテーマを適用します。

Chromium issue: 1243309

タッチ操作で使いやすいカラーピッカーとスプリットペイン

タッチ画面デバイスで指やスタイラスを使用してDevTools上で色を選択したり、Drawer をリサイズできるようになりました。

以下は Google Pixelbook デバイスのタッチ画面をキャプチャした例です。

Chromium issues: 1284245, 1284995

その他のハイライト

今回のリリースでは、以下のような注目の修正点があります。

Cookies ペインの Cookie 編集に関する問題が修正されました。 (1290196)

コマンドメニューで Shift + Tab を使用して以前のコマンドを選択できます。 (1278743)

CORS プリフライトリクエストの問題が Issues タブでレポートされるようになりました。 (1272445).

User-Agent Client Hints の問題が Issues タブでレポートされるようになりました。 (1272445).

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 の More options > Help > Report a DevTools issues を使用してレポートしてください。
@ChromeDevTools 宛にTweetしてください。
What's new in DevTools YouTubeビデオにコメントを残してください。

More DevTools features

関連する機能の完全なリストは、What's New In DevTools の英語版を参照してください。以下は、日本語に翻訳された内容の一部です。

DevTools の新機能 (Chrome 99)

WebSocketリクエスト数の制限

Application パネル内に新しく追加されたReporting API ペイン

Recorder パネルに要素が可視／クリック可能になるまで待機する機能が追加