Google で Chrome DevTools に取り組んでいる Developer Advocate です。
翻訳者の technohippy さん、レビュアーの yoichiro さん、 lacolaco さん、 yoshiko-pg さんに感謝いたします。
DevTools の改善に興味がある方はサインアップして Google User Research にご協力ください。
Recorder パネルでのステップ・バイ・ステップ再生
Recorder パネルでブレークポイントを設定して、ステップ・バイ・ステップでユーザーフローを再生できるようになりました。
ブレークポイントを設定するには、ステップの横にある青い点をクリックします。ユーザーフローを再生すると、そのステップを実行する直前で再生が一時停止します。そこから、再生の継続や、ステップ実行、再生のキャンセルが可能です。
この機能を用いれば、ユーザーフローを完全に可視化できデバッグが簡単になります。
更に詳細な情報は Recorder 機能リファレンス を参照してください。
Chromium issue: 1257499
Recorder パネルでのマウスオーバーイベントのサポート
Recorder パネルがレコーディング中の手動でのマウスオーバー（ホバー）ステップの追加をサポートするようになりました。
このデモはホバーするとポップアップメニューを表示します。ユーザーフローを記録しながらメニューアイテムをクリックしてみてください。
このままユーザーフローを再生しようとすると、Recorder は記録中にマウスオーバーイベントを自動でキャプチャしないので失敗します。この問題を解決するには、メニューアイテムをクリックする前にそのセレクタのホバーオーバーのためのステップを手動で追加してください。
Chromium issue: 1257499
Performance insight パネルに Largest Contentful Paint (LCP) を追加
LCP は認識される読み込み速度を測定する重要なユーザー中心メトリクスのひとつです。これからはクリティカルパスと Largest Contentful Paint (LCP) の主な要因を見つけることができます。
performance recordingで、Timeline にある LCP バッジをクリックしてください。Details ペインで、LCP スコアを見て、LCP を遅滞させているリソースをどのように修正すればいいかを学び、LCP リソースのクリティカルパスを確認できます。
パネルで実行可能なアドバイスを確認してウェブサイトのパフォーマンスを向上させる方法を学ぶには、Performance Insights を参照してください。
Chromium issue: 1326481
レイアウトシフトの潜在的な主要因であるテキストのフラッシュ（FOIT、FOUT）を識別
Performance insights パネルはレイアウトシフトの潜在的な主要因として flash of invisible text (FOIT) と flash of unstyled text (FOUT) を検出できるようになりました。
レイアウトシフトの潜在的な主要因を確認するには、Layout shifts トラックにあるスクリーンショットをクリックしてください。
レイアウトシフトを避けるテクニックについて学ぶには Optimize WebFont loading and rendering を参照してください。
Chromium issues: 1334628, 1328873
Manifest ペインの Protocol ハンドラ
DevTools を使用して Progressive Web Apps (PWA) のための URL protocol handler registration をテストできるようになりました。
URL protocol handler registration を使用するとインストールされた PWA が特定のプロトコル（例、magnet、web+example）が使用されたリンクを処理して、より統一感のある体験を提供できます。
Application > Manifest パネルから Protocol Handlers を開いてください。ここで利用可能なすべてのプロトコルの確認と、テストが可能です。
例えば、デモ PWAをインストールしてください。Protocol Handlers セクションで、"americano" と入力し、Test protocol をクリックすると PWA 内でコーヒーのページが開きます。
Chromium issues: 1300613
Elements パネルの Top layer バッジ
トップレイヤのコンセプトと、トップレイヤ内容の変更がどのように可視化されるかを理解するには top layer badge を確認してください。
<dialog> 要素は最近ブラウザで安定版になりました。ダイアログを開くと、その内容が top layer に配置されます。トップレベルコンテンツはその他すべてのコンテンツの上に描画されます。
このデモで、Open dialog をクリックしてください。
トップレイヤ要素の可視化を補助するために、DevTools は DOM ツリーにトップレイヤコンテナ（#top-layer）を追加します。
トップレイヤコンテナ要素からトップレイヤツリー要素に割り込むには、トップレイヤコンテナ内の、要素の横にある reveal ボタンか backdrop をクリックしてください。
トップレイヤツリー要素（例えば、dialog 要素）の次の、トップレイヤコンテナに割り込むには top-layer バッジをクリックします。
Chromium issue: 1313690
実行時に WASM のデバッグ情報をアタッチ
実行時に wasm に DWARF デバッグ情報をアタッチできるようになりました。これまでは、Sources パネルが JavaScript と Wasm ファイルへのソースマップのアタッチをサポートしているだけでした。
Sources パネルで Wasm ファイルを開いてください。必要に応じてエディタ内で右クリックして、Add DWARF debugging info… を選択し、デバッグ情報をアタッチできます。
Chromium issue: 1341255
デバッグ中のライブ編集をサポート
デバッガをリスタートすることなく、スタック上で最上位にある関数を編集できるようになりました。
Chrome 104 の DevTools で restart frame 機能が復活しましたが、そこでは停止している関数を編集することはできませんでした。関数を中断し、停止中にその関数を編集することは開発者にとって珍しい作業ではありません。
今回のアップデートでは次のような制限がありますが、デバッガが自動的に関数を再起動します。
- 一時停止中は最上位の関数だけが編集可能
- スタックを深くする同一関数の再帰呼び出しは禁止
Chromium issue: 1334484
Styles ペインで @scope at-rule の閲覧と編集
Styles ペインで CSS @scope at-rules の閲覧と編集が可能になりました。
@scope at-rule は CSS Cascading and Inheritance Level 6 specification に含まれます。これらのルールを使用すると開発者が CSS 内でスタイルのルールのスコープを制限できます。
このデモページを開き、<div class=”dark-theme”> 要素内のハイパーリンクをインスペクトしてください。Styles ペインで、@scope at-rule を確認できます。また、ルール宣言をクリックして編集することも可能です。
CSS @scope は現在開発中です。この機能を確認するには、chrome://flags/#enable-experimental-web-platform-features から Experimental Web Platform features フラグを有効にしてください。
Chromium issue: 1337777
Source map の改善
デバッグ体験全体を改善するためにソースマップにいくつかの修正が加えられました。
- 句読点を含むソースマップの識別子を DevTools で適切に解決できるようになりました。いくつかのモダンなミニファイア（例、esbuild）は識別子を連続した句読点（カンマ、括弧、セミコロン）で結合したソースマップを生成します。
- DevTools は
super呼び出しを含むコンストラクタのソースマップ名を解決できます。
- 重複したカノニカル URL のソースマップでの URL インデクシングの修正。これまでは重複したカノニカル URL が原因でブレークポイントがいくつかのファイルで有効にならないことがありました。
Chromium issue: 1335338, 1333411
その他のハイライト
今回のリリースの目立った改善点には次のようなものがあります。
- Application > Local Storage ペインのテーブルからローカルストレージのキー値ペアを適切に削除できるようになりました。（1339280）
- Sources パネルで CSS ファイルを閲覧するときにカラープレビューが正しく表示されるようになりました。 これまでは、間違った位置に表示されていました。（1340062）
Elements パネルでのバッジ表示と合わせて、Layout ペインで CSS の flex と grid アイテムの表示が一貫したものになりました。これまでは、flex と grid アイテムはいずれの場所でもときどき表示されないことがありました。（1340441、1273992）
- DevTools が広告としてラベル付けされるフレームの原因となるスクリプトを見つけると、ad frames のために、Creator Ad Script リンクが新しく利用できるようになりました。Application > Frames からフレームを開くことができます。（1217041）
プレビューチャンネルのダウンロード
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 の英語版を参照してください。以下は、日本語に翻訳された内容の一部です。
Chrome 110
- 再読み込み時の Performance パネルのクリア
- Recorder の更新
- Recorder でのユーザーフローコードの表示およびハイライト
- レコーディング時のセレクタタイプのカスタマイズ
- レコーディング中のユーザーフローの編集
- 自動的な直接のプリティプリント
- Vue、SCSS などのシンタックスハイライトとインラインプレビューの改善
- Console での人間工学的で一貫性のあるオートコンプリート
- その他のハイライト
Chrome 109
- Recorder: ステップごとのCopy asオプション、ページ内リプレイ、ステップのコンテキストメニュー
- パフォーマンスの記録の中で実際の関数名を表示
- ConsoleとSourcesパネルでの新しいキーボードショートカット
- JavaScript デバッグの改善
- その他のハイライト
- [実験的] ブレークポイント管理の UX 改善
- [実験的] 自動的な直接のプリティプリント
Chrome 108
Chrome 107
- DevTools のキーボードショートカットのカスタマイズ
- キーボードショートカットでのライトテーマとダークテーマの切り替え
- Memory Inspector で C/C++ オブジェクトをハイライト表示
- HAR インポート時の完全な Initiator 情報をサポート
Enterを押した時にのみ DOM 検索を開始- CSS のフレックスボックスプロパティ
align-contentにstartとendのアイコンを表示 - その他のハイライト
Chrome 106
- Sources パネルでの Authored / Deployed によるファイルのグループ化
- 非同期処理にリンクされたスタックトレース
- 既知のサードパーティスクリプトを自動的に無視する
- デバッグ中の改善されたコールスタック
- Sources パネルで無視リストに含まれるソースを非表示にする
- Command Menu で無視リストにあるファイルを非表示にする
- Performance パネルの新しい Interactions トラック
- Performance Insights パネルでの LCP タイミングの内訳
- Recorder パネルでの記録のデフォルト名称の自動生成
- その他のハイライト
Chrome 105
- Recorder パネルでのステップ・バイ・ステップ再生
- Recorder パネルでのマウスオーバーイベントのサポート
- Performance insight パネルに Largest Contentful Paint (LCP) を追加
- レイアウトシフトの潜在的な主要因であるテキストのフラッシュ（FOIT、FOUT）を識別
- Manifest ペインの Protocol ハンドラ
- Elements パネルの Top layer バッジ
- 実行時に WASM のデバッグ情報をアタッチ
- デバッグ中のライブ編集をサポート
- Styles ペインで @scope at-rule の閲覧と編集
- Source map の改善
- その他のハイライト
Chrome 104
- デバッグ中のフレーム再起動
- Recorder パネルでのスロー再生オプション
- Recorder パネル用の拡張機能を構築
- Sources パネルで Authored / Deployed でファイルをグループ化する
- Performance insights パネルの新しい User Timings トラック
- 要素に割り当てられたスロットの表示
- パフォーマンス計測のためのハードウェア並列度シミュレーション
- CSS 変数のオートコンプリート時に色以外の値のプレビュー
- Back/forward cache ペインでブロックしているフレームの特定
- JavaScript オブジェクトのオートコンプリート候補の改善
- ソースマップの改善
- その他のハイライト
Chrome 103
- Recorder パネルでのダブルクリックイベントや右クリックイベントのキャプチャ
- Lighthouse パネルでの新しいタイムスパンモードとスナップショットモード
- Performance Insights パネルでの改善されたズーム制御
- パフォーマンスレコーディングの削除確認
- Element パネルでのペインの並び替え
- ブラウザ外でのカラーピッキング
- デバッグ中の改善されたインラインでの値のプレビュー
- 仮想認証器での大きな blob サポート
- Sources パネルでの新しいキーボードショートカット
- ソースマップの改善
Chrome 102
- プレビュー機能: 新しいパフォーマンスインサイトパネル
- ライトテーマとダークテーマをエミュレートする新しいショートカット
- Network Preview タブのセキュリティ改善
- ブレークポイントのリロード改善
- コンソールの更新
- ユーザーフローレコーディングを開始時にキャンセル
- Styles ペインで継承されたハイライト疑似要素を表示
- その他のハイライト
- [実験的] CSS の変更をコピー
- [実験的] ブラウザ外の色を抽出
Chrome 101
- 記録されたユーザーフローをJSONファイルとしてインポート/エクスポート
- Styles ペインでカスケードレイヤーを表示する
- hwb() カラー関数のサポート
- プライベートプロパティの表示を改善
- その他のハイライト
- [実験的] Lighthouse パネルに新しいタイムスパンとスナップショットのモードを追加
Chrome 100
- Styles ペインでの @supports アットルールの表示と編集
- デフォルトで共通セレクタをサポート
- レコーディングのセレクタをカスタマイズする
- レコーディングのリネーム
- ホバーでクラスや関数のプロパティをプレビューする
- Performance パネルでの Partially presented frames
- その他のハイライト
Chrome 99
- WebSocketリクエスト数の制限
- Application パネル内に新しく追加されたReporting API ペイン
- Recorder パネルに要素が可視／クリック可能になるまで待機する機能が追加
- コンソールのスタイル設定、フォーマット、フィルタの改善
- ソースマップファイルを使用した Chrome 拡張機能のデバッグ
- Sources パネルのソースフォルダツリーの改善
- Sources パネルにワーカーのソースファイルを表示
- Chrome の自動ダークテーマの更新
- タッチ操作で使いやすいカラーピッカーとスプリットペイン
- その他のハイライト
Chrome 98
- プレビュー機能: フルページアクセシビリティツリー
- Changes タブで変更点のよりわかりやすい表示
- ユーザーフローレコーディングのタイムアウト時間を長く設定する
- Back/forward cache タブでページがキャッシュ可能であることを確認する
- 新しい Properties ペインのフィルター
- CSS の force-colors メディア機能のエミュレート
- ホバー時にルーラーを表示するコマンド
- Flexbox エディターで
row-reverseとcolumn-reverseをサポート - XHR のリプレイと全検索結果の展開に新しいキーボードショートカットを追加
- Lighthouse パネルの Lighthouse 9
- Sources パネルの改善
- その他のハイライト
- [実験的] Reporting API ペインに Endpoints を追加
Chrome 97
- プレビュー機能: 新しい Recorder パネル
- デバイスモードでのデバイス一覧の更新
- Edit as HTML でのオートコンプリート
- 改善されたコードデバッグ体験
- デバイスを横断した DevTools 設定の同期
Chrome 96
- プレビュー機能: 新しい CSS Overview パネル
- CSS の length の編集とコピーの挙動の復旧と改善
- CSS の prefers-contrast メディア機能のエミュレート
- Chrome の Auto Dark Theme 機能のエミュレート
- Styles ペインで JavaScript として宣言をコピー
- Network パネルの新しい Payload タブ
- Properties ペインのプロパティ表示の改善
- コンソールで CORS エラーを隠すオプション
- Console での適切な
Intlオブジェクトのプレビューと評価 - 一貫性のある async スタックトレース
- Console のサイドバーの維持
- Application パネルの Application cache ペインの廃止
- [実験的] Application パネルの新しい Reporting API ペイン
Chrome 95
- 新しいCSSの長さ編集ツール
- Issues タブで問題を隠す
- プロパティの表示の改善
- Lighthouse 8.4 が Lighthouse パネルに
- Sources パネルでのスニペットの並べ替え
- 翻訳されたリリースノートへの新しいリンクと翻訳バグの報告
- DevTools Command MenuのUI改善
Chrome 94
- 好みの言語での DevTools の利用
- 新しく Nest Hub デバイスがデバイスリストに
- フレーム詳細ビューの Origin trials
- 新しい CSS コンテナクエリバッジ
- ネットワークフィルタを反転するための新しいチェックボックス
- Console サイドバーが今後非推奨に
- Issue タブや Network パネルでの未加工の
Set-Cookieヘッダーの表示 - Console での自身のプロパティとしてのネイティブアクセサの一貫した表示
- #sourceURL を使ったインラインスクリプトの適切なエラースタックトレース
- Computed ペインでのカラーフォーマットの変更
- カスタムツールチップをネイティブの HTML ツールチップに置き換え
- [実験的] Issues タブでの問題の非表示
Chrome 93
更新日 • 記事を改善する