Google で Chrome DevTools に取り組んでいる Developer Advocate です。
翻訳者の lacolaco さん、レビュアーの yoichiro さん、 technohippy さん、 yoshiko-pg さんに感謝いたします。
DevTools の改善に興味がある方はサインアップして Google User Research にご協力ください。
デバッグ中のフレーム再起動
Restart frame 機能が復活しました! 関数のどこかで一時停止したときに、直前のコードを再実行することができます。以前は、この機能は非推奨で、安定性の問題から Chrome 92 で削除されました。
この 例 では、デバッガーは最初 toggleColorScheme 関数の末尾近くのブレークポイント (343行目) で一時停止しています。デバッグを toggleColorScheme 関数の先頭から再開するには、Debugger ペインの Call stack セクションを展開し、 toggleColorScheme を右クリックして Restart frame を選択してください。
Chromium issue: 1303521
Recorder パネルでのスロー再生オプション
ユーザーフローをさらに低速に再生できるようになりました（slow, very slow, extremely slow）。これらのオプションにより、各ステップのリプレイを画面上でよりよく観察することができます。
Recorder パネルを開き、レコーディングを開始します。レコーディングが完了したら、 Replay ドロップダウンボタンをクリックします。リプレイを開始する速度を選択しましょう。
Chromium issue: 1306756
Recorder パネル用の拡張機能を構築
リプレイスクリプトを好きなフォーマットでエクスポートするための Chrome 拡張機能をビルドまたはインストールできるようになりました。構築方法については、Recorder extension API のドキュメントを参照してください。
デモ用の拡張機能をインストールするには、ドキュメントに記載されているこれらの手順に従ってください。
Chromium issue: 1325751
Sources パネルで Authored / Deployed でファイルをグループ化する
新しい Group files by Authored / Deployed オプションを有効にして、 Sources パネルでファイルを整理します。フレームワーク（ React、 Angular など）で Web アプリケーションを開発する場合、ビルドツール（ Webpack 、 Vite など）が生成する minified ファイルによって、ソースファイルをナビゲートするのが困難になることがあります。
このチェックボックスをオンにすると、ファイルを2つのカテゴリーに分類して、より迅速に検索できます。
- Authored: IDE で表示するソースファイルに似ています。 DevTools はソースマップ（ビルドツールによって提供される）に基づいてこれらのファイルを生成します。
- Deployed: ブラウザが読み取る実際のファイル。通常、これらのファイルは最小化されています。
この React デモを使って自分で試してみましょう!
Chromium issue: 960909
Performance insights パネルの新しい User Timings トラック
Performance insights パネルの新しい User Timings トラックで、 計測中の performance.measure() マークを視覚化します。
たとえば、この Web ページでは、 performance.measure() メソッドを用いて、テキストの読み込み経過時間を算出しています。
ページ読み込みの計測を開始すると、 User Timings トラックが計測結果に表示されるようになります。タイミング項目をクリックすると、サイドペインにその詳細が表示されます。
Chromium issue: 1322808
要素に割り当てられたスロットの表示
スロットに入っている要素は Elements パネルの中で新しい slot バッジを付与されます。 レイアウトの問題をデバッグする際に、ノードのレイアウトに影響を与える要素をより早く特定するために、この機能を使用します。
この例には、いくつかの名前付きスロットを持つカードが含まれています。あるカードの person-occupation スロットを検査し、その横にある slot バッジをクリックすると、そのカードに割り当てられたスロットが表示されます。
と
Chromium issue: 1018906
パフォーマンス計測のためのハードウェア並列度シミュレーション
Performance パネルの新しい Hardware concurrency 設定により、開発者は navigator.hardwareConcurrency が報告する値を設定することができます。
アプリケーションによっては navigator.hardwareConcurrency を使ってアプリケーションの並列度を制御します。例えば、 Emscripten の pthread プールサイズを制御するために使用します。この機能により、開発者は異なるコア数でアプリケーションのパフォーマンスをテストすることができます。
Chromium issue: 1297439
CSS 変数のオートコンプリート時に色以外の値のプレビュー
CSS 変数のオートコンプリートの際、 DevTools は色以外の変数に意味のある値を与えるようになり、その値がノードにどのような変化を与えるかをプレビューできるようになりました。
Chromium issue: 1285091
Back/forward cache ペインでブロックしているフレームの特定
Application パネルの Back/forward cache ペインに新しい frames セクションが追加されました。 ページが bfcache の対象となるのを妨げている可能性がある、ブロックしているフレームを特定するのに役立ちます。
Chromium issue: 1288158
JavaScript オブジェクトのオートコンプリート候補の改善
JavaScript オブジェクトのプロパティのオートコンプリートは、以下の順序に基づいて表示されるようになりました:
- 自身の列挙可能なプロパティ
- 自身の列挙可能ではないプロパティ
- 継承された列挙可能なプロパティ
- 継承された列挙可能ではないプロパティ
これまで、開発者は関連するプロパティを見つけることが困難でした。なぜなら、サジェストでは継承されたプロパティよりも自身のプロパティが優先され、継承されたプロパティはすべて同じ優先度を持っていたからです。
Chromium issue: 1299241
ソースマップの改善
ここでは、デバッグ作業全般を改善するための、ソースマップに関するいくつかの修正点を紹介します。
- ブレークポイントが sourceURL アノテーションを持つインライン
<script>内で動作するようになりました
- デバッガーはソースマップを使用して Scope ビューでブロックスコープ変数を解決するようになりました
- デバッガーはソースマップを使用して Scope ビューのアロー関数内の変数を解決するようになりました
Chromium issues: 1329113, 1322115
その他のハイライト
今回のリリースでは、以下のような注目すべき修正点があります:
- Sources パネルの Auto-completion の設定を修正しました。以前は、この設定を無効にしてもオートコンプリートが常に有効でした。(1323286)
- Application パネルの Manifest タブを更新し、最新のカラースキーム形式を解析するようにしました。(1318305)
- Performance insights パネルで
<script async>のレンダリングブロッキング問題に対する提案を改善しました。以前は、スクリプトがすでに async としてマークされているにもかかわらず、 DevTools はadd async attribute to the script tagを提案しました。(1334096)
- Performance insights パネルで、レイアウトシフトの潜在的な原因として iframe が検出されるようになりました。iframe の詳細は Details ペインで確認できます。(1328873)
- Command menu でファイルを開く際、オーサリングファイル（ソースマップによって生成されたファイル）が上位にランクされ、同じような名前のデプロイ済みスクリプトの上に表示されるようになりました。(1312929)
プレビューチャンネルのダウンロード
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
更新日 • 記事を改善する