Trusted Types 違反のデバッグ サポート
Trusted Type 違反のブレークポイント
[ソース] パネルでブレークポイントを設定し、Trusted Type 違反の例外をキャッチできるようになりました。
Trusted Types API は、DOM ベースのクロスサイト スクリプティングの脆弱性を防止するのに役立ちます。Trusted Types により DOM XSS 脆弱性のないアプリケーションを作成、確認、保守する方法については、こちらをご覧ください。
[ソース] パネルで、[デバッガ] サイドバー パネルを開きます。[CSP Compliance Breakpoints] セクションを開き、[Trusted Type emissions] チェックボックスをオンにして、例外で一時停止します。こちらのデモページで実際に試してみましょう。
Chromium の問題: 1142804
[Sources] パネルの問題を [Issue] タブにリンクする
[ソース] パネルで、Trusted Type に違反する行の横に警告アイコンが表示されるようになりました。カーソルを合わせると、例外をプレビューできます。これをクリックして [Issues] タブを開くと、例外の詳細と、修正方法に関するガイダンスが表示されます。
Chromium の問題: 1150883
ビューポートの範囲を超えてノードのスクリーンショットをキャプチャする
スクロールしなければ見えない範囲のコンテンツを含め、ノード全体のノードのスクリーンショットをキャプチャできるようになりました。以前は、ビューポートにコンテンツが表示されないため、スクリーンショットがカットされていました。ページ全体のスクリーンショットも正確に再現されています。
[要素] パネルで要素を右クリックし、[ノードのスクリーンショットをキャプチャ] を選択します。
Chromium の問題: 1003629
ネットワーク リクエスト用の新しい [Trust Tokens] タブ
新しい [Trust Tokens] タブで、トラスト トークン ネットワーク リクエストを調べます。
Trust Token は、不正行為に対処し、パッシブ トラッキングなしで bot と実際の人間を区別するための新しい API です。トラスト トークンの利用を開始する方法を確認する。
次のリリースでは、さらに詳細なデバッグに対応する予定です。
Chromium の問題: 1126824
Lighthouse パネルの Lighthouse 7
[Lighthouse] パネルでは、Lighthouse 7 の実行が開始されました。変更内容の完全なリストについては、リリースノートをご覧ください。
Lighthouse 7 の新しい監査:
- Largest Contentful Paint(LCP)画像をプリロードする。LCP 時間を改善するため、LCP 要素で使用されるイメージがプリロードされているかどうかを監査します。
Issues
パネルに記録された問題。Issues
パネルに未解決の問題のリストを示します。- プログレッシブ ウェブアプリ(PWA):PWA カテゴリが大幅に変化しました。
インストール可能グループでは、Chrome のインストール可能な条件を有効にする機能チェックが、完全に利用されるようになりました。これらは、[Manifest] ペインに表示されるのと同じシグナルです。
- 「Service Worker を登録...」監査は PWA の最適化グループに移動され、「インストール要件」の主要な監査に「HTTPS の使用」監査が含まれるようになりました。
- [信頼性と信頼性] グループが削除されます。改良された「インストール要件」の監査にはオフライン機能チェックが含まれているため、「オフライン時に現在のページと start_url が 200 で応答する」監査が削除されました。「モバイル ネットワークでページの読み込み速度が十分である」の監査も削除されました。
Chromium の問題: 772558
要素パネルの更新
CSS の :target
状態の強制サポート
DevTools を使用して、CSS の :target
状態を強制的に検査できるようになりました。
[要素] パネルで要素を選択し、要素の状態を切り替えます。:target
チェックボックスをオンにすると、スタイルを強制的に適用して検査できます。
URL のハッシュと要素の ID が同じ場合は、:target
疑似クラスを使用して要素のスタイルを設定します。こちらのデモで実際に試してみてください。この新しい DevTools 機能を使用すると、URL を毎回手動で変更することなく、そのようなスタイルをテストできます。
Chromium の問題: 1156628
複製した要素への新しいショートカット
新しい [要素を複製] のショートカットを使用すると、要素のクローンを簡単に作成できます。
[要素] パネルで要素を右クリックし、[要素を複製] を選択します。下に新しい要素が作成されます。
または、キーボード ショートカットを使用して要素を複製することもできます。
- Mac:
Shift
+Option
+⬇️
- Windows/ Linux:
Shift
+Alt
+⬇️
カスタム CSS プロパティ用のカラー選択ツール
[スタイル] ペインに、カスタム CSS プロパティのカラー選択ツールが表示されるようになりました。
また、Shift
キーを押しながらカラー選択ツールをクリックすると、カラー値の RGBA、HSLA、16 進数表現を順番に切り替えることができます。
Chromium の問題: 1147016
CSS プロパティをコピーする新しいショートカット
いくつかの新しいショートカットを使用して、CSS プロパティをすばやくコピーできるようになりました。
[要素] パネルで要素を選択します。次に、[Styles] ペインで CSS クラスまたは CSS プロパティを右クリックして、値をコピーします。
CSS クラスのコピー オプション:
- セレクタをコピー。現在のセレクタ名をコピーします。
- ルールをコピー。現在のセレクタのルールをコピーします。
- すべての宣言をコピー: 現在のルールに含まれるすべての宣言(無効なプロパティや接頭辞を含むプロパティを含む)をコピーします。
CSS プロパティのコピー オプション:
- 宣言をコピー。現在の行の宣言をコピーします。
- プロパティをコピー。現在の行のプロパティをコピーします。
- 値をコピー: 現在の行の値をコピーします。
Chromium の問題: 1152391
Cookie の更新
URL にデコードされた Cookie を表示する新しいオプション
[Cookie] ペインで URL デコードされた Cookie の値を表示できるようになりました。
[アプリケーション] パネルに移動し、[Cookie] ペインを選択します。リスト内の Cookie を選択します。 新しい [デコードされた URL を表示] チェックボックスをオンにすると、デコードされた Cookie が表示されます。
Chromium の問題: 997625
公開されている Cookie のみを消去する
[Cookie ] ペインの [すべての Cookie を消去] ボタンが、[フィルタされた Cookie を消去] ボタンに変わりました。
[Application] パネル > [Cookies] ペインで、テキスト ボックスにテキストを入力して Cookie をフィルタします。この例では、リストを「PREF」でフィルタしています。[フィルタされた Cookie を消去] ボタンをクリックして、表示されている Cookie を削除します。フィルタ テキストをクリアすると、他の Cookie がリストに残ります。これまでは、すべての Cookie を削除するオプションしかありませんでした。
Chromium の問題: 978059
[ストレージ] ペインでサードパーティ Cookie を消去する新しいオプション
[ストレージ] ペインでサイトデータを消去する場合、DevTools はデフォルトでファーストパーティの Cookie のみを消去するようになりました。[サードパーティの Cookie を含める] を有効にして、サードパーティの Cookie も消去します。
Chromium の問題: 1012337
カスタム デバイスの User-Agent Client Hints の編集
カスタム デバイスの User-Agent Client Hints を編集できるようになりました。
[設定] > [デバイス] に移動し、[カスタム デバイスの追加...] をクリックします。[ユーザー エージェント クライアントのヒント] セクションを開いて、クライアントのヒントを編集します。
User-Agent Client Hints は、ユーザー エージェント文字列に代わるもので、デベロッパーはプライバシーを保護しながら、人間工学に基づく方法でユーザーのブラウザに関する情報にアクセスできます。User-Agent Client Hints の詳細については、web.dev/user-agent-client-hints/ をご覧ください。
Chromium の問題: 1073909
ネットワーク パネルの更新
「ネットワーク ログを記録する」設定を保持する
DevTools で [ネットワーク ログを記録する] 設定が維持されるようになりました。以前は、DevTools ではページが再読み込みされるたびにユーザーの選択がリセットされていました。
Chromium の問題: 1122580
[ネットワーク] パネルで WebTransport 接続を表示する
[ネットワーク] パネルに WebTransport 接続が表示されるようになりました。
WebTransport は、低レイテンシの双方向のクライアント サーバー メッセージングを提供する新しい API です。そのユースケースと、今後の実装に関するフィードバックを送信する方法については、web.dev/webtransport/ をご覧ください。
Chromium の問題: 1152290
「オンライン」を「スロットリングなし」に名称変更
ネットワーク エミュレーション オプション「Online」の名称が「No Throttling」に変更されました。
Chromium の問題: 1028078
コンソール、[ソース] パネル、[スタイル] ペインの新しいコピー オプション
コンソールとソースパネルにオブジェクトをコピーするための新しいショートカット
コンソールとソースパネルの新しいショートカットを使用して、オブジェクト値をコピーできるようになりました。これは、コピーする大きなオブジェクト(長い配列など)がある場合に特に便利です。
[Sources] パネルと [Styles] ペインでファイル名をコピーするための新しいショートカット
以下を右クリックしてファイル名をコピーできます。
- [ソース] パネルのファイル、または
- [要素] パネルの [スタイル] ペインでのファイル名
コンテキスト メニューから [Copy file name] を選択してファイル名をコピーします。
Chromium の問題: 1155120
フレームの詳細ビューの更新
[Frame Details] ビューの新しい Service Worker の情報
DevTools で、作成元のフレームの下に専用の Service Worker が表示されるようになりました。
[Application] パネルで、Service Worker のあるフレームを開き、[Service Workers] ツリーで Service Worker を選択して詳細を表示します。
Chromium の問題: 1122507
[Frame details] ビューでメモリ情報を測定する
performance.measureMemory()
API のステータスが [API の可用性] セクションに表示されるようになりました。
新しい performance.measureMemory()
API は、ウェブページ全体のメモリ使用量を推定します。この新しい API を使用してウェブページの合計メモリ使用量をモニタリングする方法については、こちらの記事をご覧ください。
Chromium の問題: 1139899
[問題] タブからフィードバックを送信する
問題のメッセージを改善する場合は、コンソールから [Issues] タブに移動するか、[More Settings] > [その他のツール] > [Issues] > [Issues] タブを開きます。問題メッセージを開き、[Is the issue message help to you?] をクリックすると、ポップアップでフィードバックを送信できます。
[パフォーマンス] パネルでドロップされたフレーム
[パフォーマンス] パネルで負荷パフォーマンスを分析する場合、[フレーム] セクションで、ドロップされたフレームが赤色でマークされるようになりました。カーソルを合わせるとフレームレートが表示されます。
Chromium の問題: 1075865
Device Mode で折りたたみ式デバイスとデュアル スクリーンをエミュレートする
DevTools でデュアル スクリーン デバイスと折りたたみ式デバイスをエミュレートできるようになりました。
デバイス ツールバーを有効にしたら、Surface Duo または Samsung Galaxy Fold のいずれかのデバイスを選択します。
新しいスパンアイコンをクリックして、シングル スクリーン形状、折りたたみ形状、デュアル スクリーン形状、展開形状を切り替えます。
また、ウェブ プラットフォームの試験運用版機能を有効にして、新しい CSS メディア screen-spanning
機能と JavaScript getWindowSegments
API にアクセスすることもできます。試験運用版アイコンは、試験運用版ウェブ プラットフォームの機能フラグの状態を示します。フラグをオンにすると、アイコンがハイライト表示されます。chrome://flags
に移動し、フラグを切り替えます。
Chromium の問題: 1054281
試験運用版の機能
Puppeteer レコーダーでブラウザのテストを自動化する
DevTools でブラウザとのやり取りに基づいて Puppeteer スクリプトを生成できるようになりました。これにより、ブラウザのテストを簡単に自動化できます。Puppeteer は、DevTools プロトコルを介して Chrome または Chromium を制御するための高レベル API を提供する Node.js ライブラリです。
こちらのデモページに移動します。DevTools で [ソース] パネルを開きます。左側のペインで [Recording] タブを選択します。新しい記録を追加し、ファイルに名前を付けます(例: test01.js)。
下部の [Record] ボタンをクリックして、やり取りの記録を開始します。画面上のフォームに入力します。それに応じて Puppeteer コマンドがファイルに追加されていることを確認します。もう一度 [記録] ボタンをクリックして記録を停止します。
スクリプトを実行するには、Puppeteer 公式サイトのスタートガイドに沿って操作します。
なお、これは初期段階のテストです。今後、レコーダー機能を改善、拡張する予定です。
Chromium の問題: 1144127
[Styles] ペインのフォント エディタ
新しいフォント エディタは、フォント関連のプロパティ用のポップオーバー エディタで、[Styles] ペインにあるポップオーバー エディタです。これにより、ウェブページに最適なタイポグラフィを見つけることができます。
ポップオーバーにより、直感的な一連の入力タイプでタイポグラフィを動的に操作するためのクリーンな UI が提供されます。
Chromium の問題: 1093229
CSS Flexbox デバッグツール
DevTools に、前回のリリース以降の Flexbox デバッグの試験運用版のサポートが追加されました。
DevTools で、CSS の align-items
プロパティをわかりやすく視覚化するためのガイドラインが描画されるようになりました。CSS の gap
プロパティもサポートされています。この例では、CSS の gap: 12px;
を使用しています。各ギャップのハッチング パターンに注目してください。
Chromium の問題: 1139949
新しい CSP 違反タブ
新しい [CSP 違反] タブでは、すべてのコンテンツ セキュリティ ポリシー(CSP)違反を一目で確認できます。 この新しいタブは、CSP 違反と Trusted Type 違反が大量にあるウェブページを簡単に扱えるようにする試験運用版です。
Chromium の問題: 1137837
新しい色のコントラストの計算 - Advanced Perceptual Contrast Algorithm(APCA)
Advanced Perceptual Contrast Algorithm(APCA)は、カラー選択ツールの AA/AAA ガイドラインのコントラスト比に代わるものです。
APCA は、色覚に関する現代の研究に基づいてコントラストを計算する新しい方法です。AA/AAA ガイドラインと比較して、APCA はコンテキストにより依存します。コントラストは、テキストの空間プロパティ(フォントの太さとサイズ)、色(テキストと背景で感じられる明るさの差)、コンテキスト(周囲の光、周囲の環境、テキストの意図された目的)に基づいて計算されます。
この例では、APCA のしきい値は 38% です。コントラスト比は上記の値以上である必要があります。この値は、フォントの太さとサイズに基づいて計算されます(こちらの APCA ルックアップ テーブルを参照)。
Chromium の問題: 1121900
プレビュー チャネルをダウンロードする
デフォルトの開発ブラウザとして、Chrome Canary、Dev、Beta の使用を検討してください。これらのプレビュー チャネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが事前にサイトに関する問題を発見したりすることができます。
Chrome DevTools チームへのお問い合わせ
投稿内の新機能や変更点、または DevTools に関するその他の事項について議論するには、以下のオプションを使用します。
- crbug.com からご提案やフィードバックをお寄せください。
- DevTools の [その他のオプション]
> [ヘルプ] > [DevTools の問題を報告する] を使用して、DevTools の問題を報告する。
- @ChromeDevTools でツイートします。
- DevTools の新機能の YouTube 動画または DevTools のヒントの YouTube 動画で、コメントを記入してください。
DevTools の新機能
「What's New in DevTools」(DevTools の新機能)シリーズで紹介したすべての項目のリスト。
Chrome 120
- サードパーティ Cookie の段階的廃止
- プライバシー サンドボックス分析ツールでウェブサイトの Cookie を分析する
- 無視リストの強化
- node_modules のデフォルトの除外パターン
- キャッチされた例外がキャッチされた場合、または無視されていないコードを通過した場合、実行を停止するようになりました
- ソースマップで
x_google_ignoreList
の名前をignoreList
に変更しました - リモート デバッグ中の新しい入力モードの切り替え
- [要素] パネルに #document ノードの URL が表示されるようになりました
- [Application] パネルにおける有効なコンテンツ セキュリティ ポリシー
- アニメーションのデバッグの改善
- [ソース] の [このコードを信頼しますか?] とコンソールの自己 XSS 警告
- ウェブワーカーとワークレットのイベント リスナー ブレークポイント
<audio>
と<video>
の新しいメディアバッジ- プリロードの名前が「投機的読み込み」に変更
- Lighthouse 11.2.0
- ユーザー補助機能の改善
- その他のハイライト
Chrome 119
- [要素] > [スタイル] の [@property] セクションの改善
- 編集可能な @property ルール
- 無効な @property ルールに関する問題が報告される
- エミュレートするデバイスのリストの更新
- [Sources] のスクリプトタグにインライン JSON を事前に出力する
- コンソールの非公開フィールドをオートコンプリートする
- Lighthouse 11.1.0
- ユーザー補助機能の改善
- Web SQL のサポート終了
- [Application] > [Manifest] でスクリーンショットのアスペクト比の検証
- その他のハイライト
Chrome 118
- [要素] > [スタイル] のカスタム プロパティに関する新しいセクション
- ローカル オーバーライドのさらなる改善
- 検索の強化
- ソースパネルの改善
- ソースパネルのワークスペースを効率化
- [ソース] でペインを並べ替える
- その他のスクリプト タイプ用の構文ハイライト表示とプリティ プリント
- Preferreds-reduced-transparency メディア特徴をエミュレートする
- Lighthouse 11
- ユーザー補助機能の改善
- その他のハイライト
Chrome 117
- ネットワーク パネルの改善
- ウェブ コンテンツをローカルでより迅速にオーバーライドする
- XHR とフェッチ リクエストの内容をオーバーライドする
- Chrome 拡張機能のリクエストを非表示にする
- 人が読める形式の HTTP ステータス コード
Chrome 116
- 欠落しているスタイルシートのデバッグを改善
- [要素] > [スタイル] > [イージング エディタ] でリニア タイミングをサポート
- ストレージ バケットのサポートとメタデータ ビュー
- Lighthouse 10.3.0
- ユーザー補助機能: キーボード コマンドと画面読み上げの改善
- その他のハイライト
Chrome 115
- 要素の改善
- 新しい CSS サブグリッド バッジ
- ツールチップにおけるセレクタの指定性
- ツールチップに表示されるカスタム CSS プロパティの値
- Sources の改善
- CSS 構文のハイライト表示
- 条件付きブレークポイントを設定するショートカット
- [Application] > [Bounce Tracking Mitigations]
- Lighthouse 10.2.0
- デフォルトでコンテンツ スクリプトを無視する
- [ネットワーク] > [回答の改善]
- その他のハイライト
Chrome 114
- WebAssembly のデバッグ サポート
- Wasm アプリでの歩行動作の改善
- [要素] パネルと [問題] タブを使用して自動入力をデバッグする
- レコーダーでのアサーション
- Lighthouse 10.1.1
- パフォーマンスの強化
- performance.mark() が [Performance] > [Timings] でカーソルを合わせたときに時間が表示されるようになりました
- profile() コマンドで [Performance] > [Main] にデータが入力される
- ユーザー操作が遅い場合の警告
- Web Vitals の更新
- JavaScript Profiler のサポート終了: フェーズ 3
- その他のハイライト
Chrome 113
- ネットワーク レスポンス ヘッダーをオーバーライドする
- Nuxt、Vite、Rollup のデバッグの改善
- [要素] > [スタイル] での CSS の改善
- 無効な CSS プロパティと値
- 簡易アニメーション プロパティのキーフレームへのリンク
- 新しいコンソール設定: Enter 時のオートコンプリート
- コマンド メニューで作成されたファイルが強調される
- JavaScript Profiler のサポート終了: ステージ 2
- その他のハイライト
Chrome 112
- レコーダーの更新
- レコーダー リプレイ拡張機能
- ピアス セレクタを使用して記録する
- Lighthouse 分析で録画を Puppeteer スクリプトとしてエクスポートする
- レコーダーの拡張機能を入手する
- [要素] > [スタイル] の更新
- [Styles] ペインの CSS ドキュメント
- CSS ネストのサポート
- コンソールでログポイントと条件付きブレークポイントをマークする
- デバッグ中に無関係なスクリプトを無視する
- JavaScript Profiler のサポート終了を開始
- 低コントラストをエミュレートする
- Lighthouse 10
- その他のハイライト
Chrome 111
- [Styles] ペインでの HD カラーのデバッグ
- ブレークポイント UX の強化
- カスタマイズ可能なレコーダーのショートカット
- Angular の構文ハイライト表示の改善
- [Application] パネルでキャッシュを再編成する
- その他のハイライト
Chrome 110
- 再読み込み時にパフォーマンス パネルを消去
- レコーダーの更新
- レコーダーでユーザーフローのコードを表示してハイライト表示します
- 録画のセレクタ タイプをカスタマイズする
- 録画中にユーザーフローを編集する
- 自動のインプレース プリティ プリント
- Vue や SCSS などの構文ハイライト表示とインライン プレビューの改善
- 人間工学的で一貫性のあるコンソールのオートコンプリート
- その他のハイライト
Chrome 109
- レコーダー: ステップ、ページ内リプレイ、ステップのコンテキスト メニューのオプションとしてコピー
- パフォーマンスの録画に実際の関数名を表示する
- [コンソールとソース] パネルの新しいキーボード ショートカット
- JavaScript デバッグの改善
- その他のハイライト
- [試験運用版] ブレークポイントを管理するための UX を強化
- [試験運用版] 自動のインプレース プリティ プリント
Chrome 108
Chrome 107
- DevTools でキーボード ショートカットをカスタマイズする
- キーボード ショートカットでライトモードとダークモードを切り替え
- Memory Inspector で C/C++ オブジェクトをハイライト表示する
- HAR インポートの開始元情報を完全にサポート
Enter
を押してから DOM 検索を開始align-content
CSS Flexbox プロパティのstart
アイコンとend
アイコンを表示- その他のハイライト
Chrome 106
- [ソース] パネルで、[作成者] / [デプロイ済み] 別にファイルをグループ化する
- 非同期オペレーションのためにリンクされたスタック トレース
- 既知のサードパーティ スクリプトを自動的に無視する
- デバッグ時のコールスタックの改善
- 無視リストに含まれるソースを [ソース] パネルで非表示にする
- 無視リストに含まれるファイルをコマンド メニューで非表示にする
- パフォーマンス パネルの新しいインタラクション トラック
- [パフォーマンス分析情報] パネルでの LCP 時間の内訳
- レコーダー パネルで録音のデフォルト名を自動生成
- その他のハイライト
Chrome 105
- レコーダーでの詳細なリプレイ
- レコーダー パネルでマウスオーバー イベントをサポート
- パフォーマンス分析情報パネルの Largest Contentful Paint(LCP)
- レイアウト シフトの考えられる根本原因としてテキストの点滅(FOIT、FOUT)を特定する
- [Manifest] ペインのプロトコル ハンドラ
- [要素] パネルの最上位レイヤのバッジ
- ランタイムに Wasm デバッグ情報をアタッチする
- デバッグ中のライブ編集のサポート
- [Styles] ペインで @scope のルールを表示、編集する
- ソースマップの改善
- その他のハイライト
Chrome 104
- デバッグ中にフレームを再起動する
- レコーダー パネルの速度が遅いリプレイのオプション
- レコーダー パネルの拡張機能を作成する
- [ソース] パネルで、[作成者] / [デプロイ済み] 別にファイルをグループ化する
- [パフォーマンス分析情報] パネルの新しいカスタム速度トラック
- 要素に割り当てられたスロットを表示する
- パフォーマンス記録でハードウェアの同時実行をシミュレートする
- CSS 変数のオートコンプリート時に色以外の値をプレビューする
- バックフォワード キャッシュ ペインでブロッキング フレームを特定する
- JavaScript オブジェクトのオートコンプリートの候補の改善
- ソースマップの改善
- その他のハイライト
Chrome 103
- レコーダー パネルでダブルクリック イベントと右クリック イベントをキャプチャする
- Lighthouse パネルの新しい期間とスナップショット モード
- [パフォーマンス分析情報] パネルでズーム設定を改善
- パフォーマンス録音の削除を確認する
- [要素] パネルでペインを並べ替える
- ブラウザの外部で色を選択する
- デバッグ時のインライン値のプレビューの改善
- 仮想認証システムの大きな blob をサポートする
- [ソース] パネルの新しいキーボード ショートカット
- ソースマップの改善
Chrome 102
- プレビュー機能: 新しい [パフォーマンス分析情報] パネル
- ライトモードとダークモードをエミュレートするための新しいショートカット
- [ネットワーク プレビュー] タブのセキュリティ強化
- ブレークポイントでの再読み込みを改善
- コンソールの更新
- ユーザーフローの記録を最初にキャンセルする
- [Styles] ペインに継承されたハイライト疑似要素を表示する
- その他のハイライト
- [試験運用版] CSS の変更をコピーする
- [試験運用版] ブラウザの外部で色を選択する
Chrome 入門ガイド
- 記録されたユーザーフローを JSON ファイルとしてインポートおよびエクスポートする
- [Styles] ペインでカスケード レイヤを表示する
- hwb() カラー関数のサポート
- 私有地の表示を改善
- その他のハイライト
- [試験運用版] Lighthouse パネルの新しいタイムスパンとスナップショット モード
Chrome 100
- [Styles] ペインでルールでの @supports の表示および編集を行う
- 一般的なセレクタをデフォルトでサポート
- 録音のセレクタをカスタマイズする
- 録音の名前を変更する
- カーソルを合わせたときにクラスまたは関数のプロパティをプレビューする
- パフォーマンス パネルに部分的に表示されるフレーム
- その他のハイライト
Chrome 99
- WebSocket リクエストのスロットル処理
- [アプリケーション] パネルの新しい [Reporting API] ペイン
- レコーダー パネルで要素が表示/クリック可能になるまでの待機をサポート
- コンソールのスタイル設定、書式設定、フィルタリングを強化
- ソースマップ ファイルを使用して Chrome 拡張機能をデバッグする
- [ソース] パネルのソースフォルダ ツリーの改善
- [ソース] パネルにワーカー ソースファイルを表示する
- Chrome の Auto Dark Theme のアップデート
- タッチで操作できるカラー選択ツールと分割ペイン
- その他のハイライト
Chrome 98
- プレビュー機能: ページ全体のユーザー補助ツリー
- [変更] タブでのより正確な変更
- ユーザーフローの記録のタイムアウトを長く設定
- [バックフォワード キャッシュ] タブでページがキャッシュ可能であることを確認する
- 新しいプロパティ ペイン フィルタ
- CSS 強制カラー メディア機能をエミュレートする
- カーソルを合わせたときにルーラーを表示するコマンド
- Flexbox エディタで
row-reverse
とcolumn-reverse
をサポートする - XHR を再生してすべての検索結果を展開するための新しいキーボード ショートカット
- Lighthouse パネルに表示された Lighthouse 9
- ソースパネルの改善
- その他のハイライト
- [試験運用版] [Reporting API] ペインのエンドポイント
Chrome 97
- プレビュー機能: 新しいレコーダー パネル
- デバイスモードでデバイスリストを更新する
- HTML としての編集によるオートコンプリート
- コードのデバッグ エクスペリエンスの向上
- デバイス間で DevTools の設定を同期する
Chrome 96
- プレビュー機能: 新しい CSS の概要パネル
- CSS の長さの編集とコピーのテストの復元と改善
- CSS の優先コントラスト メディア機能をエミュレートする
- Chrome の自動ダークモード機能をエミュレートする
- [Styles] ペインで宣言を JavaScript としてコピーする
- [Network] パネルの新しい [Payload] タブ
- [プロパティ] ペインでのプロパティ表示の改善
- コンソールで CORS エラーを非表示にするオプション
- コンソールでの適切な
Intl
オブジェクトのプレビューと評価 - 一貫性のある非同期スタック トレース
- コンソール サイドバーの維持
- [Application] パネルの非推奨の [Application cache] ペイン
- [試験運用版] [アプリケーション] パネルの新しい Reporting API ペイン
Chrome 95
- 新しい CSS の長さ作成ツール
- [問題] タブで問題を非表示にする
- 宿泊施設の表示の改善
- Lighthouse パネルの Lighthouse 8.4
- [ソース] パネルでスニペットを並べ替える
- 翻訳済みのリリースノートへの新しいリンクと、翻訳のバグの報告
- DevTools コマンド メニューの UI の改善
Chrome 94
- 任意の言語で DevTools を使用する
- デバイスリストに新しい Google Nest Hub デバイスを表示
- [Frame details] ビューのオリジン トライアル
- 新しい CSS コンテナクエリのバッジ
- ネットワーク フィルタを反転するための新しいチェックボックス
- コンソール サイドバーのサポート終了
- [Issues] タブと [Network] パネルに未加工の
Set-Cookies
ヘッダーを表示 - ディスプレイ ネイティブ アクセサをコンソールの独自のプロパティとして一貫して使用
- #sourceURL によるインライン スクリプトでの適切なエラー スタック トレース
- [計算済み] ペインでカラー形式を変更する
- カスタム ツールチップをネイティブ HTML ツールチップに置き換える
- [試験運用版] [問題] タブで問題を非表示にする
Chrome 93
- [スタイル] ペインの編集可能な CSS コンテナクエリ
- [ネットワーク] パネルでのウェブバンドルのプレビュー
- Attribution Reporting API のデバッグ
- コンソールでの文字列処理の改善
- CORS デバッグの改善
- Lighthouse 8.1
- [Manifest] ペインの新しいメモの URL
- CSS マッチング セレクタの修正
- [Network] パネルでの JSON レスポンスのプリプリント
Chrome 92
- CSS グリッド エディタ
- コンソールでの
const
再宣言のサポート - 送信元の順序の閲覧者
- フレームの詳細を表示する新しいショートカット
- CORS デバッグのサポートの強化
- XHR ラベルの名前を「Fetch/XHR」に変更
- [ネットワーク] パネルで Wasm リソースタイプをフィルタ
- [Network Conditions] タブでのデバイスの User-Agent Client Hints の使用
- [問題] タブで Quirks モードの問題を報告する
- [パフォーマンス] パネルに Compute Intersections を含める
- Lighthouse パネルの Lighthouse 7.5
- コールスタックの [Restart Frame] コンテキスト メニューを非推奨に
- [試験運用版] プロトコル モニター
- [試験運用版] 人形劇のレコーダー
Chrome 91
- [Web Vitals]情報のポップアップ
- 新しい Memory Inspector
- CSS のスクロールスナップを可視化する
- 新しいバッジ設定のペイン
- アスペクト比情報を含む補正後の画像プレビュー
Content-Encoding
を構成するオプションを含む [新しいネットワーク条件] ボタン- 計算された値を表示するショートカット
accent-color
キーワード- 色とアイコンで問題の種類を分類する
- トラスト トークンを削除する
- [フレームの詳細] ビューでブロックされた機能
- テスト設定でテストをフィルタする
- キャッシュ ストレージ ペインの新しい
Vary Header
列 - JavaScript のプライベート ブランド チェックをサポートする
- ブレークポイントのデバッグのサポートを強化
[]
表記のホバー プレビューをサポート- HTML ファイルの概要を改善
- Wasm デバッグの適切なエラースタック トレース
Chrome 90
- 新しい CSS Flexbox デバッグツール
- 新しい Core Web Vitals のオーバーレイ
- 問題数をコンソールのステータスバーに移動
- Trusted Web Activity の問題を報告する
- コンソールで文字列を(有効な)JavaScript 文字列リテラルとしてフォーマットする
- [Application] パネルの新しい [Trust Tokens] ペイン
- CSS の色域メディア機能をエミュレートする
- プログレッシブ ウェブアプリのツールの改良
- [ネットワーク] パネルの新しい
Remote Address Space
列 - パフォーマンスの改善
- フレームの詳細ビューで許可または禁止される機能を表示する
- [Cookie] ペインの新しい
SameParty
列 - 非標準の
fn.displayName
サポートが非推奨になりました - 設定メニューでの
Don't show Chrome Data Saver warning
のサポート終了 - [試験運用版] [問題] タブで低コントラストの問題を自動的に報告
- [試験運用版] 要素パネルのユーザー補助ツリービュー全体
Chrome 89
- Trusted Types 違反のデバッグ サポート
- ビューポートの範囲を超えてノードのスクリーンショットをキャプチャする
- ネットワーク リクエスト用の新しい [Trust Tokens] タブ
- Lighthouse パネルの Lighthouse 7
- CSS の
:target
状態の強制サポート - 要素を複製するための新しいショートカット
- カスタム CSS プロパティのカラー選択ツール
- CSS プロパティをコピーするための新しいショートカット
- URL にデコードされた Cookie を表示するオプションを追加
- 公開されている Cookie のみを削除する
- ストレージ ペインでサードパーティ Cookie を消去する新しいオプション
- カスタム デバイスの User-Agent Client Hints の編集
- 「ネットワーク ログを記録する」設定を保持する
- [ネットワーク] パネルで WebTransport 接続を表示する
- 「Online」を「No throttling」に名称変更
- コンソール、[ソース] パネル、[スタイル] ペインの新しいコピー オプション
- [Frame details] ビューの新しい Service Worker の情報
- [Frame details] ビューでメモリ情報を測定する
- [問題] タブからフィードバックを送信する
- パフォーマンス パネルでドロップされたフレーム
- Device Mode で折りたたみ式デバイスとデュアル スクリーンをエミュレートする
- [試験運用版] Puppeteer のレコーダーでブラウザのテストを自動化
- [試験運用版] [スタイル] ペインのフォント エディタ
- [試験運用版] CSS Flexbox デバッグツール
- [試験運用版] 新しい [CSP 違反] タブ
- [試験運用版] 新しい色のコントラストの計算 - Advanced Perceptual Contrast Algorithm(APCA)
Chrome 88
- DevTools の起動の高速化
- 新しい CSS の角度可視化ツール
- サポートされていないイメージタイプのエミュレート
- [ストレージ] ペインで保存容量割り当てサイズをシミュレートする
- パフォーマンス パネルの新しいウェブに関する指標レーン
- [Network] パネルで CORS エラーを報告する
- [Frame Details] ビューのクロスオリジン分離情報
- [Frame Details] ビューの新しい Web Workers 情報
- 開いているウィンドウのオープナー フレームの詳細を表示する
- [Service Workers] ペインから [Network] パネルを開く
- プロパティ値をコピー
- ネットワーク イニシエータのスタック トレースをコピーする
- マウスオーバー時に Wasm 変数の値をプレビュー
- コンソールで Wasm 変数を評価する
- ファイル/メモリサイズの一貫した測定単位
- [要素] パネルで疑似要素をハイライト表示する
- [試験運用版] CSS Flexbox デバッグツール
- [試験運用版] コード入力のキーボード ショートカットをカスタマイズする
Chrome 87
- 新しい CSS グリッド デバッグツール
- 新しい [WebAuthn] タブ
- 上部パネルと下部パネルの間でツールを移動する
- [スタイル] ペインの新しい [計算済み] サイドバー ペイン
- [Computed] ペインでの CSS プロパティのグループ化
- Lighthouse パネルの Lighthouse 6.3
- [速度] セクションの
performance.mark()
イベント - [ネットワーク] パネルの新しい
resource-type
フィルタとurl
フィルタ - フレームの詳細ビューの更新
- [その他のツール] メニューでの
Settings
のサポート終了 - [試験運用版] CSS の [概要] パネルで色のコントラストに関する問題を確認して修正する
- [試験運用版] DevTools のキーボード ショートカットのカスタマイズ
Chrome 86
- 新しいメディアパネル
- [要素] パネルのコンテキスト メニューでノードのスクリーンショットをキャプチャする
- [問題] タブの更新
- 欠落しているローカル フォントをエミュレートする
- 非アクティブ ユーザーのエミュレーション
prefers-reduced-data
のエミュレーション- 新しい JavaScript 機能のサポート
- Lighthouse パネルの Lighthouse 6.2
- [Service Workers] ペインでの「その他の送信元」リストのサポートを終了
- フィルタした項目の一致率の概要を表示する
- [Application] パネルの新しいフレームの詳細ビュー
- [スタイル] ペインで色の候補を表示
- [要素] パネルで [プロパティ] ペインを復元する
- [ネットワーク] パネルにおける、人が読める形式の
X-Client-Data
ヘッダー値 - [スタイル] ペインでのカスタム フォントのオートコンプリート
- [ネットワーク] パネルにリソースタイプを継続的に表示する
- [要素] パネルと [ネットワーク] パネルのクリアボタン
Chrome 85
- CSS-in-JS フレームワークのスタイル編集
- Lighthouse パネルに表示された Lighthouse 6
- First Meaningful Paint(FMP)のサポート終了
- 新しい JavaScript 機能のサポート
- [Manifest] ペインに新しいアプリ ショートカットに関する警告が表示される
- [速度] タブの Service Worker の
respondWith
イベント - [計算済み] ペインが一貫して表示される
- WebAssembly ファイルのバイトコード オフセット
- ソースパネルでの線単位のコピーとカット
- コンソール設定の更新
- パフォーマンス パネルの更新
- ブレークポイント、条件付きブレークポイント、ログポイントの新しいアイコン
Chrome 84
- 新しい [問題] タブでサイトの問題を解決する
- 検査モードのツールチップにユーザー補助情報を表示する
- パフォーマンス パネルの更新
- コンソールでの Promise の用語の精度が向上
- [スタイル] ペインの更新
- [要素] パネルの [プロパティ] ペインのサポート終了
- [Manifest] ペインでアプリ ショートカットをサポート
Chrome 83
- 視覚障がいをエミュレート
- ロケールをエミュレートする
- Cross-Origin Embedder Policy(COEP)のデバッグ
- ブレークポイント、条件付きブレークポイント、ログポイントの新しいアイコン
- 特定の Cookie が設定されているネットワーク リクエストを表示する
- コマンド メニューから左に装着する
- メインメニューの [設定] オプションが移動しました
- [Audits] パネルを Lighthouse パネルに
- フォルダ内のすべてのローカル オーバーライドを削除する
- 長いタスクの UI の更新
- [Manifest] ペインでのマスク可能なアイコンのサポート
Chrome 82
Chrome 81
- Device Mode での Moto G4 のサポート
- Cookie に関する変更
- ウェブアプリ マニフェストのアイコンの精度が向上
- CSS の
content
プロパティにカーソルを合わせると、エスケープされていない値が表示される - コンソールのソースマップのエラー
- ファイルの終端からのスクロールを無効にする設定
Chrome 80
- コンソールでの
let
およびclass
再宣言のサポート - WebAssembly デバッグの改善
- [Initiator] タブの [Request Initiator Chains]
- 選択したネットワーク リクエストを [概要] でハイライト表示
- [ネットワーク] パネルの URL とパスの列
- ユーザー エージェント文字列の更新
- 新しい監査パネルの設定 UI
- 関数ごとまたはブロックごとのコード カバレッジ モード
- コード カバレッジはページの再読み込みによって開始することが必要になりました
Chrome 79
- Cookie がブロックされた理由をデバッグする
- Cookie の値を表示する
- さまざまな prefers-color-scheme と prefers-reduced-motion の設定をシミュレートする
- コード カバレッジの更新
- ネットワーク リソースがリクエストされた理由をデバッグする
- コンソールとソースパネルでインデントの設定が再び適用される
- カーソル ナビゲーションの新しいショートカット
Chrome 78
- [Audits] パネルでのマルチクライアントのサポート
- Payment Handler のデバッグ
- 監査パネルに表示される Lighthouse 5.2
- パフォーマンス パネルの Largest Contentful Paint
- メインメニューから DevTools の問題を報告する
Chrome 77
- 要素のスタイルをコピーする
- レイアウト シフトを可視化する
- 監査パネルに表示される Lighthouse 5.1
- OS テーマの同期
- ブレークポイント エディタを開くためのキーボード ショートカット
- [ネットワーク] パネルのプリフェッチ キャッシュ
- オブジェクトを表示する場合のプライベート プロパティ
- [アプリケーション] パネルの通知とプッシュ メッセージ
Chrome 76
- CSS 値を使用したオートコンプリート
- ネットワーク設定の新しい UI
- HAR エクスポートでの WebSocket メッセージ
- HAR のインポートとエクスポートのボタン
- リアルタイムのメモリ使用量
- Service Worker の登録ポート番号
- バックグラウンド取得イベントとバックグラウンド同期イベントを調べる
- Firefox 用の Puppeteer
Chrome 75
- CSS 関数をオートコンプリートする場合の有意義なプリセット
- コマンド メニューからサイトデータを削除する
- すべての IndexedDB データベースを表示する
- カーソルを合わせたときにリソースの非圧縮サイズを表示する
- [Breakpoints] ペインのインライン ブレークポイント
- IndexedDB とキャッシュ リソースの数
- 詳細な検査ツールチップを無効にする設定
- エディタのタブインデントの切り替えの設定
Chrome 74
- CSS プロパティの影響を受けるすべてのノードをハイライト表示する
- 監査パネルに表示された Lighthouse v4
- WebSocket バイナリ メッセージ ビューア
- コマンド メニューで領域のスクリーンショットをキャプチャする
- [ネットワーク] パネルの Service Worker フィルタ
- パフォーマンス パネルの更新
- パフォーマンス パネルの録画での時間のかかるタスク
- [Timing] セクションの First Paint
- 追加のヒント: RGB カラーコードと HSL カラーコードを表示するためのショートカット(動画)
Chrome 73
- ログポイント
- 検査モードの詳細なツールチップ
- コード カバレッジ データをエクスポートする
- キーボードでコンソールを操作する
- カラー選択ツールの AAA のコントラスト比の線
- カスタムの位置情報のオーバーライドを保存する
- コードの折りたたみ
- [フレーム] タブを [メッセージ] タブに名称変更
- 追加のヒント: ネットワーク パネルのプロパティによるフィルタリング(動画)
Chrome 72
- [パフォーマンス] パネルでパフォーマンス指標を可視化する
- DOM ツリーでテキストノードをハイライト表示
- DOM ノードに JS パスをコピーします。
- [Audits] パネルの更新。コマンド メニューから [Audits] パネルにアクセスするための JS ライブラリと新しいキーワードを検出する新しい監査などが含まれています。
- 追加のヒント: Device Mode を使用してメディアクエリを調査する(動画)
Chrome 71
- Live Expression の結果にカーソルを合わせて、DOM ノードをハイライト表示します。
- DOM ノードをグローバル変数として保存する
- HAR のインポートとエクスポートにイニシエータと優先度の情報を追加
- メインメニューからコマンド メニューにアクセスする
- ピクチャー イン ピクチャーのブレークポイント
- 追加のヒント: コンソールで
monitorEvents()
を使用してノードで発生したイベントをログに記録する(動画)
Chrome 70
- コンソールでのライブ式
- 積極的評価で DOM ノードをハイライト表示する
- パフォーマンス パネルの最適化
- より信頼性の高いデバッグ
- コマンド メニューからネットワーク スロットリングを有効にする
- 条件付きブレークポイントをオートコンプリートする
- AudioContext イベントでブレークする
- ndb を使用して Node.js アプリをデバッグする
- その他のヒント: User Timing API を使用して実際のユーザー インタラクションを測定する
Chrome 68
- 積極的な評価
- 引数のヒント
- 関数のオートコンプリート
- ES2017 のキーワード
- 監査パネルに表示された Lighthouse 3.0
- BigInt のサポート
- [Watch] ペインにプロパティ パスを追加する
- [タイムスタンプを表示] を [設定] に移動しました
- 追加のヒント: あまり知られていないコンソール メソッド(動画)
Chrome 67
- すべてのネットワーク ヘッダーで検索する
- CSS の変数値のプレビュー
- フェッチとしてコピー
- 新しい監査、デスクトップ構成オプション、トレースの表示
- 無限ループを停止する
- [パフォーマンス] タブのカスタム速度
- JavaScript VM インスタンスが [メモリ] パネルに明示される
- [ネットワーク] タブを [ページ] タブに名称変更
- ダークモードの更新
- [セキュリティ] パネルの Certificate Transparency(証明書の透明性)情報
- [パフォーマンス] パネルのサイト分離機能
- 追加のヒント: [レイヤ] パネルとアニメーション インスペクタ(動画)
Chrome 66
- [ネットワーク] パネルでのブラックボックス化
- デバイスモードでのズームの自動調整
- [プレビュー] タブと [レスポンス] タブでのプリプリント
- [プレビュー] タブで HTML コンテンツをプレビューする
- HTML 内のスタイルに対するローカル オーバーライドのサポート
- 追加のヒント: イベント リスナー ブレークポイントをより使いやすくするためのブラックボックス フレームワーク スクリプト
Chrome 65
- ローカル オーバーライド
- 新しいユーザー補助ツール
- [変更] タブ
- 新しい SEO 監査とパフォーマンス監査
- パフォーマンス パネルの複数の録画
- 非同期コードのワーカーを使用した信頼性の高いコード ステッピング
- 追加のヒント: Puppeteer を使用して DevTools のアクションを自動化する(動画)
Chrome 64
- パフォーマンス モニター
- コンソール サイドバー
- 類似するコンソール メッセージのグループ化
- 追加のヒント: ホバー疑似クラスを切り替える(動画)
Chrome 63
- マルチクライアント リモート デバッグのサポート
- Workspace 2.0
- 新規監査 4 件
- カスタムデータでプッシュ通知をシミュレートする
- カスタムタグを使用してバックグラウンド同期イベントをトリガーする
- 追加のヒント: イベント リスナー ブレークポイント(動画)
Chrome 62
- コンソールの最上位の待機
- 新しいスクリーンショット ワークフロー
- CSS グリッドによるハイライト表示
- オブジェクトをクエリするための新しい Console API
- Google Play Console の新しいフィルタ
- [ネットワーク] パネルの HAR インポート
- プレビュー可能なキャッシュ リソース
- 予測可能なキャッシュ デバッグ
- ブロックレベルのコード カバレッジ
Chrome 61
- モバイル デバイスのスロットリング シミュレーション
- 保存容量の使用量を表示する
- Service Worker がレスポンスをキャッシュに保存した日時を表示する
- コマンド メニューから FPS メーターを有効にする
- ズームまたはスクロールに対するマウスホイールの動作を設定する
- ES6 モジュールのデバッグ サポート
Chrome 60
- 新しい監査パネル
- サードパーティのバッジ
- 「ここから続行」の新しいジェスチャー
- ステップ イン async
- コンソールでのオブジェクト プレビューの情報量が向上
- コンソールでのコンテキスト選択の拡充
- [カバレッジ] タブでリアルタイムの最新情報を確認
- よりシンプルなネットワーク スロットリング オプション
- 非同期スタックがデフォルトでオン