Chrome 65 で DevTools に追加される新機能は次のとおりです。
- ローカル オーバーライド
- 新しいユーザー補助ツール
- [変更] タブ
- 新しい SEO およびパフォーマンス監査
- [パフォーマンス] パネルの複数の録音
- ワーカーと非同期コードを使用した信頼性の高いコード ステップ実行
このリリースノートを読むか、以下の動画版をご覧ください。
ローカル オーバーライド
ローカル オーバーライドを使用すると、DevTools で変更を行い、ページの読み込み後もその変更を保持できます。以前は、DevTools で行った変更はページを再読み込みすると失われます。ローカル オーバーライドはほとんどのファイル形式で機能しますが、いくつか例外があります。制限事項をご覧ください。
図 1. ローカル オーバーライドを使用して、ページの読み込み後も CSS の変更を維持する
仕組み:
- DevTools で変更を保存するディレクトリを指定します。
- DevTools で変更を加えると、変更されたファイルのコピーがディレクトリに保存されます。
- ページを再読み込みすると、DevTools はネットワーク リソースではなく、変更されたローカルファイルを提供します。
ローカル オーバーライドを設定するには:
- [ソース] パネルを開きます。
[オーバーライド] タブを開きます。
図 2. [オーバーライド] タブ
[Setup Overrides] をクリックします。
変更内容を保存するディレクトリを選択します。
ビューポートの上部で [許可] をクリックし、DevTools にディレクトリへの読み取りと書き込みのアクセス権を付与します。
設定を変更します。
制限事項
- DevTools では、[要素] パネルの [DOM ツリー] に加えた変更は保存されません。代わりに、[ソース] パネルで HTML を編集します。
- [スタイル] ペインで CSS を編集した場合、その CSS のソースが HTML ファイルである場合、DevTools はその変更を保存しません。代わりに、[ソース] パネルで HTML ファイルを編集してください。
関連する機能
- ワークスペース。DevTools は、ネットワーク リソースをローカル リポジトリに自動的にマッピングします。DevTools で変更を加えると、その変更がローカル リポジトリにも保存されます。
[変更] タブ
DevTools の新しい [変更] タブを使用して、ローカルで行った変更を追跡します。
図 3. [変更] タブ
新しいユーザー補助ツール
新しい [ユーザー補助] ペインでは、要素のユーザー補助プロパティを調べたり、カラー選択ツールでテキスト要素のコントラスト比を調べたりして、ロービジョンや色覚に障がいのあるユーザーでもアクセスできるようにします。
ユーザー補助機能ペイン
[要素] パネルの [ユーザー補助] ペインでは、現在選択されている要素のユーザー補助プロパティを調べることができます。
図 4. [Accessibility] ペインには、[Elements] パネルの [DOM Tree] で現在選択されている要素の ARIA 属性と計算済みプロパティ、およびユーザー補助ツリー内での位置が表示されます
以下のラベル付けに関する Rob Dodson の A11ycast で、[Accessibility] ペインの実際の動作を確認してください。
カラー選択ツールのコントラスト比
カラー選択ツールにテキスト要素のコントラスト比が表示されるようになりました。テキスト要素のコントラスト比を上げると、ロービジョンや色覚に障がいのあるユーザーがサイトにアクセスしやすくなります。コントラスト比がユーザー補助に与える影響について詳しくは、色とコントラストをご覧ください。
テキスト要素の色のコントラストを上げると、あらゆるユーザーにとって使いやすいサイトになります。つまり、テキストがグレーで背景が白の場合、誰も読むのが難しくなります。
図 5. ハイライト表示された h1
要素のコントラスト比を調べる
図 5 で 4.61 の横に 2 つのチェックマークが表示されている場合、この要素が推奨コントラスト比(AAA)を満たしていることを意味します。チェックマークが 1 つしかない場合は、推奨される最小コントラスト比(AA)を満たしていることを意味します。
さらに表示アイコン をクリックして [コントラスト比] セクションを展開します。[Color Spectrum] ボックスの白い線は、推奨されるコントラスト比を満たす色とそうでない色の境界を表します。たとえば、図 6 のグレーは推奨事項を満たしているため、白い線の下のすべての色も推奨事項を満たしていることを意味します。
図 6. 展開された [コントラスト比] セクション
関連する機能
[監査] パネルでは、自動化されたユーザー補助監査を実施して、ページ上のすべてのテキスト要素のコントラスト比が十分であることを確認できます。
[Audits] パネルを使用してユーザー補助機能をテストする方法については、Chrome DevTools で Lighthouse を実行するをご覧いただくか、以下の A11ycast をご覧ください。
新しい監査
Chrome 65 には、まったく新しいカテゴリの SEO 監査が導入され、多くの新しいパフォーマンス監査が導入されています。
新しい SEO 監査
ページが新しい SEO カテゴリの各監査に合格すると、検索エンジンのランキングが上昇する場合があります。
図 7. 監査の新しい SEO カテゴリ
新しいパフォーマンス監査
Chrome 65 には、多くの新しいパフォーマンス監査機能が組み込まれています。
- JavaScript の起動時間が長い
- 静的アセットに対して非効率的なキャッシュ ポリシーを使用する
- ページのリダイレクトを回避する
- ドキュメントでプラグインが使用されています
- CSS を縮小する
- JavaScript を少なくする
パフォーマンスは重要です。Mynet がページの読み込み速度を 4 倍に改善した後、サイトの滞在時間は 43% 増加し、閲覧ページ数は 34% 増加し、直帰率は 24% 減少し、記事ページビューあたりの収益は 25% 増加しました。詳細
ヒント:ページの読み込みパフォーマンスを改善したいものの、どこから始めればよいかわからない場合は、[監査] パネルをお試しください。URL を入力すると、そのページを改善するためのさまざまな方法に関する詳細なレポートが出力されます。使ってみる
その他の最新情報
- 新しい手動によるユーザー補助監査
- 他の次世代画像形式も含まれるように WebP 監査を更新
- ユーザー補助スコアの見直し
- ユーザー補助監査が適用されないページの場合、その監査はユーザー補助スコアにカウントされなくなります
- レポートの上部に [パフォーマンス] セクションを表示
ワーカーと非同期コードによる信頼性の高いコード ステップ実行
Chrome 65 では、スレッドと非同期コードの間でメッセージを渡すコードにステップインする際の [Step Into] ボタンが更新されています。以前のステップ動作が必要な場合は、代わりに新しい [ステップ] ボタンを使用できます。
スレッド間でメッセージを渡すコードへのステップ実行
スレッド間でメッセージを渡すコードにステップインすると、DevTools で各スレッドで何が起こるかが表示されるようになりました。
たとえば、図 8 のアプリは、メインスレッドとワーカー スレッドの間でメッセージを渡しています。メインスレッドで postMessage()
呼び出しにステップインした後、DevTools はワーカー スレッドの onmessage
ハンドラで一時停止します。onmessage
ハンドラ自体が、メッセージをメインスレッドにポストします。その呼び出しにステップすると、DevTools はメインスレッドで一時停止します。
図 8. メッセージ受け渡しコードの設定(Chrome 65)
以前のバージョンの Chrome でこのようなコードにアクセスすると、図 9 に示すように、Chrome にはコードのメインスレッド側しか表示されていませんでした。
図 9. メッセージ受け渡しコードの設定(Chrome 63)
非同期コードにステップする
非同期コードにステップインする際、DevTools は最終的に実行される非同期コードで一時停止することを想定するようになりました。
たとえば、図 10 では、setTimeout()
にステップ移動した後、それまでのコードがバックグラウンドで実行され、setTimeout()
に渡された関数が一時停止します。
図 10. 非同期コードのステップ(Chrome 65)
Chrome 63 でこのようなコードにアクセスすると、図 11 に示すように、DevTools は時系列で実行されるコード内で一時停止していました。
図 11. 非同期コードのステップ(Chrome 63)
パフォーマンス パネルの複数の録音
[パフォーマンス] パネルで、最大 5 件の録音を一時的に保存できるようになりました。記録は DevTools ウィンドウを閉じると削除されます。[パフォーマンス] パネルの使い方については、ランタイム パフォーマンスの分析を始めるをご覧ください。
図 12. パフォーマンス パネルで複数の録音から選択する
参考: Puppeteer 1.0 で DevTools のアクションを自動化する
Chrome DevTools チームが管理するブラウザ自動化ツールである Puppeteer のバージョン 1.0 がリリースされました。Puppeteer を使用すると、以前は DevTools でのみ可能だった多くのタスク(スクリーンショットのキャプチャなど)を自動化できます。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();
また、PDF の生成など、一般的に有用な多くの自動化タスクのための API も備えています。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
await page.pdf({path: 'hn.pdf', format: 'A4'});
await browser.close();
})();
詳しくは、クイック スタートをご覧ください。
また、Puppeteer を使用すると、DevTools を明示的に開かずにブラウジング中に DevTools の機能を公開できます。例については、DevTools を開かずに DevTools の機能を使用するをご覧ください。
プレビュー チャネルをダウンロードする
Chrome Canary、Dev、Beta を既定の開発ブラウザとして使用することをご検討ください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが実際に体験する前にサイト上の問題を検出したりできます。
Chrome DevTools チームへのお問い合わせ
投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。
- crbug.com からご提案やフィードバックをお送りください。
- DevTools の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
- @ChromeDevTools にツイートします。
- 「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。
DevTools の新機能
DevTools の新機能シリーズで取り上げたすべての内容の一覧。
Chrome 123
- イースター エッグを見つける
- [要素] パネルの更新
- [要素] > [スタイル] でフォーカスされているページをエミュレートする
var()
フォールバックのカラー選択ツール、角度時計、イージング エディタ- CSS の長さツールのサポートは終了しました
- [パフォーマンス] > [メイントラック] で選択した検索結果のポップオーバー
- ネットワーク パネルの更新
- [Network] > [EventStream] タブの [クリア] ボタンと検索フィルタ
- [ネットワーク] > [Cookie] のサードパーティ Cookie の除外理由に関するツールチップ
- ソース内のすべてのブレークポイントを有効または無効にする
- Node.js 用 DevTools で読み込まれたスクリプトを表示する
- Lighthouse 11.5.0
- ユーザー補助機能の改善
- その他のハイライト
Chrome 122
- レコーダー拡張機能の公式コレクションが公開
- ネットワークの改善
- [ステータス] 列の失敗の理由
- コピー サブメニューの改善
- パフォーマンスの改善
- タイムラインのパンくずリスト
- メイントラックのイベント イニシエータ
- Node.js DevTools の JavaScript VM インスタンス セレクタ メニュー
- ソースの新しいショートカットとコマンド
- 要素の改善
- ::view-transition 擬似要素がスタイルで編集可能に
- ブロック コンテナでの align-content プロパティのサポート
- エミュレートされた折りたたみ式デバイスの形状のサポート
- 動的テーマ設定
- [ネットワーク] パネルと [アプリケーション] パネルに表示されたサードパーティ Cookie の段階的廃止に関する警告
- Lighthouse 11.4.0
- ユーザー補助機能の改善
- その他のハイライト
Chrome 121
- 要素の改善
- [ネットワーク] パネルのフィルタバーの合理化
@font-palette-values
サポート- サポートされるケース: 別のカスタム プロパティの代替としてのカスタム プロパティ
- ソースマップのサポートの改善
- パフォーマンス パネルの改善
- 拡張コンバージョンのトラック
- [Bottom-Up]、[Call Tree]、[Event Log] タブの高度なフィルタリング
- [ソース] パネルのインデント マーカー
- [Network] パネルでオーバーライドされたヘッダーとコンテンツに関するツールチップを表示
- リクエスト ブロック パターンを追加、削除するための新しいコマンド メニュー オプション
- CSP 違反テストが削除されます
- Lighthouse 11.3.0
- ユーザー補助機能の改善
- その他のハイライト
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 ルールに関する問題が報告される
- エミュレートするデバイスのリストを更新
- [ソース] のスクリプトタグにインライン JSON をプリティ プリントする
- コンソールでの非公開フィールドをオートコンプリートする
- Lighthouse 11.1.0
- ユーザー補助機能の改善
- Web SQL のサポート終了
- [Application] > [Manifest] でのスクリーンショットのアスペクト比の検証
- その他のハイライト
Chrome 118
- [要素] > [スタイル] のカスタム プロパティに関する新しいセクション
- その他のローカル オーバーライドの改善
- 検索機能の強化
- ソースパネルの改善
- [ソース] パネルのワークスペースの合理化
- ソース内のペインの並べ替え
- 構文のハイライト表示とプリティ プリント(より多くのスクリプト タイプに対応)
- Preferreds-reduced-transparency のメディア機能をエミュレートする
- 灯台 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] に入力される
- ユーザー操作が遅い場合の警告
- ウェブに関する指標の更新
- JavaScript Profiler のサポート終了: フェーズ 3
- その他のハイライト
Chrome 113
- ネットワーク レスポンス ヘッダーをオーバーライドする
- Nuxt、Vite、Rollup のデバッグの改善
- [要素] > [スタイル] での CSS の改善
- 無効な CSS プロパティと値
- アニメーションの短縮プロパティのキーフレームへのリンク
- 新しいコンソール設定: Enter 入力時のオートコンプリート
- コマンド メニューで作成済みファイルが強調表示される
- JavaScript Profiler のサポート終了: ステージ 2
- その他のハイライト
Chrome 112
- レコーダーの更新
- レコーダーのリプレイ拡張機能
- ピアス セレクタで録音する
- Lighthouse の分析機能を使用して、録画を Puppeteer スクリプトとしてエクスポートする
- レコーダーの拡張機能を入手する
- [要素] > [スタイル] の更新
- [スタイル] ペインの CSS ドキュメント
- CSS ネストのサポート
- コンソールでのログポイントと条件付きブレークポイントのマーキング
- デバッグ中に無関係なスクリプトを無視する
- JavaScript Profiler の非推奨化の開始
- 低コントラストをエミュレート
- 灯台 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
- デバッグ中にフレームを再起動する
- [レコーダー] パネルの「遅いリプレイ」オプション
- [Recorder] パネルの拡張機能を作成する
- [ソース] パネルで作成済み / デプロイ済みごとにファイルをグループ化する
- パフォーマンス分析情報パネルの新しいカスタム速度トラック
- 要素に割り当てられたスロットを表示
- パフォーマンス記録でハードウェアの同時実行をシミュレートする
- CSS 変数のオートコンプリート時に色以外の値をプレビューする
- バックフォワード キャッシュ ペインでブロッキング フレームを特定する
- JavaScript オブジェクトのオートコンプリート候補の改善
- ソースマップの改善
- その他のハイライト
Chrome 103
- [Recorder] パネルでダブルクリックおよび右クリック イベントをキャプチャする
- Lighthouse パネルの新しい期間とスナップショット モード
- パフォーマンス分析情報パネルのズーム コントロールの改善
- パフォーマンスの録音を削除する場合は確定してください
- [要素] パネルでペインを並べ替える
- ブラウザ外で色を選択する
- デバッグ中のインライン値のプレビューの改善
- 仮想認証システムの大きな blob をサポートする
- [ソース] パネルの新しいキーボード ショートカット
- ソースマップの改善
Chrome 入門ガイド
- プレビュー機能: 新しい [パフォーマンス分析情報] パネル
- ライトモードとダークモードをエミュレートするための新しいショートカット
- [ネットワーク プレビュー] タブのセキュリティを改善
- ブレークポイントでの再読み込みの改善
- コンソールの更新
- ユーザーフローの記録の開始時にキャンセルする
- 継承されたハイライト疑似要素を [スタイル] ペインに表示する
- その他のハイライト
- [試験運用版] CSS の変更をコピーする
- [試験運用版] ブラウザ外での色の選択
Chrome 入門ガイド
- 記録されたユーザーフローを JSON ファイルとしてインポート / エクスポートする
- [Styles] ペインでカスケード レイヤを表示する
hwb()
カラー関数のサポート- 私有地の表示を改善
- その他のハイライト
- [試験運用版] Lighthouse パネルの新しい期間とスナップショット モード
Chrome 入門ガイド
- [Styles] ペインでルールの @supports を表示、編集する
- 一般的なセレクタをデフォルトでサポート
- 録画のセレクタをカスタマイズする
- 録音の名前を変更する
- カーソルを合わせたときにクラスまたは関数のプロパティをプレビューする
- パフォーマンス パネルに部分的に表示されたフレーム
- その他のハイライト
Chrome 99
- WebSocket リクエストのスロットリング
- [Application] パネルの新しい Reporting API ペイン
- [Recorder] パネルで要素の表示/クリック可能になるまでの待機をサポート
- コンソールのスタイル、フォーマット、フィルタリングの改善
- ソースマップ ファイルを使用して Chrome 拡張機能をデバッグする
- [ソース] パネルのソースフォルダ ツリーの改善
- [Sources] パネルにワーカー ソースファイルを表示する
- Chrome の自動ダークモードを更新
- タッチしやすいカラー選択ツールと分割ペイン
- その他のハイライト
Chrome 98
- プレビュー機能: 全画面アクセシビリティ ツリー
- [変更] タブの変更の精度が向上
- ユーザーフローの記録のタイムアウトを延長
- [バックフォワード キャッシュ] タブでページがキャッシュ可能であることを確認する
- 新しいプロパティ ペイン フィルタ
- CSS 強制カラーメディア機能をエミュレートする
- カーソルを合わせたときにルーラーを表示するコマンド
- Flexbox エディタでの
row-reverse
とcolumn-reverse
のサポート - XHR を再生してすべての検索結果を展開できる新しいキーボード ショートカット
- Lighthouse パネルに表示された Lighthouse 9
- ソースパネルの改善
- その他のハイライト
- [試験運用版] [Reporting API] ペインのエンドポイント
Chrome 97
- プレビュー機能: 新しいレコーダー パネル
- デバイスモードでデバイスリストを更新する
- HTML として編集によるオートコンプリート
- コードのデバッグ エクスペリエンスの向上
- デバイス間で DevTools の設定を同期する
Chrome 96
- プレビュー機能: 新しい CSS の [概要] パネル
- CSS の長さの編集とコピーの操作を復元、改善
- CSS Preferreds-const メディア機能をエミュレートする
- 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 リソースタイプをフィルタ
- [ネットワーク状態] タブでのデバイスの User-Agent Client Hints の使用
- [問題] タブで Quirks モードの問題を報告する
- パフォーマンス パネルに Compute Intersections を含める
- Lighthouse パネルに表示された Lighthouse 7.5
- コールスタックの [Restart Frame] コンテキスト メニューが非推奨になりました
- [試験運用版] プロトコル モニター
- [試験運用版] 人形劇のレコーダー
Chrome 91
- ウェブに関する主な指標の情報が
- 新しい Memory Inspector
- CSS の Scroll-snap を可視化する
- 新しいバッジ設定ペイン
- アスペクト比情報を含む強化された画像プレビュー
Content-Encoding
を設定するオプションを含む新しいネットワーク条件ボタン- 計算値を表示するためのショートカット
accent-color
キーワード- 色とアイコンで問題の種類を分類する
- トラスト トークンを削除する
- [Frame details] ビューでブロックされる機能
- テスト設定でテストをフィルタする
- キャッシュ ストレージ ペインの新しい
Vary Header
列 - JavaScript プライベート ブランド チェックをサポートする
- ブレークポイントのデバッグのサポートの強化
[]
表記のマウスオーバー プレビューをサポート- HTML ファイルの概要を改善
- Wasm デバッグ用の適切なエラー スタック トレース
Chrome 90
- 新しい CSS Flexbox デバッグツール
- 新しい Core Web Vitals のオーバーレイ
- 問題数をコンソールのステータスバーに移動
- Trusted Web Activity に関する問題を報告する
- コンソールで文字列を(有効な)JavaScript 文字列リテラルとしてフォーマットする
- [Application] パネルの [New Trust Tokens] ペイン
- CSS の色域メディア機能をエミュレートする
- プログレッシブ ウェブアプリのツールの改善
- [Network] パネルの新しい
Remote Address Space
列 - パフォーマンスの改善
- フレームの詳細ビューに許可/禁止される機能を表示する
- [Cookie] ペインの新しい
SameParty
列 - 非標準の
fn.displayName
サポートが非推奨になりました - 設定メニューの
Don't show Chrome Data Saver warning
のサポート終了 - [試験運用版] [問題] タブでの低コントラストの問題の自動報告
- [試験運用版] [要素] パネルの完全なユーザー補助ツリービュー
Chrome 89
- Trusted Types 違反のデバッグ サポート
- ビューポート以外のノードのスクリーンショットをキャプチャする
- ネットワーク リクエスト用の新しい [信頼トークン] タブ
- Lighthouse パネルの Lighthouse 7
- CSS の
:target
状態の強制サポート - 要素を複製するための新しいショートカット
- カスタム CSS プロパティのカラー選択ツール
- CSS プロパティをコピーするための新しいショートカット
- URL デコードされた Cookie を表示するための新しいオプション
- 表示される Cookie のみを消去する
- [ストレージ] ペインでサードパーティ Cookie を消去する新しいオプション
- カスタム デバイスの User-Agent Client Hints の編集
- 「ネットワーク ログを記録する」設定を維持する
- [ネットワーク] パネルで WebTransport 接続を表示する
- 「オンライン」を「スロットリングなし」に名称変更
- コンソール、[Sources] パネル、[Styles] ペインの新しいコピー オプション
- [Frame details] ビューの新しい Service Worker 情報
- Frame details ビューでメモリ情報を測定する
- [問題] タブからフィードバックを送信する
- パフォーマンス パネルでフレームがドロップされる
- デバイスモードで折りたたみ式デバイスとデュアル スクリーンをエミュレートする
- [試験運用版] Puppeteer のレコーダーでブラウザのテストを自動化する
- [試験運用版] [スタイル] ペインのフォント エディタ
- [試験運用版] CSS Flexbox デバッグツール
- [試験運用版] 新しい CSP 違反タブ
- [試験運用版] 新しい色のコントラスト計算 - Advanced Perceptual Contrast Algorithm(APCA)
Chrome 88
- DevTools の起動の高速化
- 新しい CSS 角度可視化ツール
- サポートされていない画像タイプのエミュレート
- [ストレージ] ペインで保存容量割り当てサイズをシミュレートする
- パフォーマンス パネルにウェブに関する指標の新しいレーンを表示
- [ネットワーク] パネルで CORS エラーを報告する
- [Frame details] ビューのクロスオリジン分離情報
- [Frame details] ビューの新しい Web Worker 情報
- 開いているウィンドウのオープナー フレームの詳細を表示する
- [Service Workers] ペインから [Network] パネルを開く
- プロパティ値をコピー
- ネットワーク イニシエータのスタック トレースをコピーする
- マウスオーバー時に Wasm 変数の値をプレビュー
- コンソールで Wasm 変数を評価する
- ファイル/メモリサイズの一貫した測定単位
- [要素] パネルで疑似要素をハイライト表示する
- [試験運用版] CSS Flexbox デバッグツール
- [試験運用版] 和音のキーボード ショートカットをカスタマイズする
Chrome 87
- 新しい CSS グリッド デバッグツール
- 新しい [WebAuthn] タブ
- 上部パネルと下部パネルの間でツールを移動する
- [スタイル] ペインの新しい [計算済み] サイドバー
- [計算済み] ペインでの CSS プロパティのグループ化
- Lighthouse パネルに表示された Lighthouse 6.3
- [タイミング] セクションの
performance.mark()
イベント - [Network] パネルの新しい
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 パネルに変更
- フォルダ内のすべてのローカル オーバーライドを削除する
- 長時間の ToDo リスト UI の更新
- [Manifest] ペインでのマスク可能なアイコンのサポート
Chrome 82
Chrome 81
- デバイスモードでの Moto G4 のサポート
- Cookie 関連の更新
- ウェブアプリ マニフェストのアイコンの精度が向上
- CSS の
content
プロパティにカーソルを合わせると、エスケープされていない値が表示される - コンソールのソースマップ エラー
- ファイルの終わりを超えたスクロールを無効にする設定
Chrome 80
- コンソールでの
let
およびclass
の再宣言のサポート - WebAssembly デバッグの改善
- [Initiator] タブの [Request Initiator Chains]
- 選択したネットワーク リクエストを [概要] でハイライト表示する
- [ネットワーク] パネルの URL とパスの列
- ユーザー エージェント文字列の更新
- 新しい監査パネルの設定 UI
- 関数ごとまたはブロックごとのコードのカバレッジ モード
- ページの再読み込みによってコード カバレッジを開始する必要がある
Chrome 79
- Cookie がブロックされた理由をデバッグする
- Cookie の値を表示する
- さまざまな Preferreds-color-scheme 設定と preferreds-reduced-motion 設定をシミュレートする
- コード カバレッジの更新
- ネットワーク リソースがリクエストされた理由をデバッグする
- コンソールパネルとソースパネルでインデントの設定を再び考慮
- カーソル ナビゲーションの新しいショートカット
Chrome 78
- 監査パネルでのマルチクライアントのサポート
- 支払いハンドラのデバッグ
- 監査パネルの Lighthouse 5.2
- パフォーマンス パネルの Largest Contentful Paint
- メインメニューから DevTools の問題を提出する
Chrome 77
- 要素のスタイルをコピーする
- レイアウト シフトを可視化する
- 監査パネルの Lighthouse 5.1
- OS テーマの同期
- ブレークポイント エディタを開くためのキーボード ショートカット
- [ネットワーク] パネルでのプリフェッチ キャッシュ
- オブジェクト表示時のプライベート プロパティ
- [Application] パネルの通知とプッシュ メッセージ
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 パスをコピーします
- 監査パネルの更新。JS ライブラリを検出する新しい監査や、コマンド メニューから [Audits] パネルにアクセスするための新しいキーワードなどが含まれています。
- 参考ヒント: Device Mode を使用してメディアクエリを調べる(動画)
Chrome 71
- Live Expression の結果にカーソルを合わせると、DOM ノードがハイライト表示されます。
- DOM ノードをグローバル変数として保存する
- HAR のインポートとエクスポートにイニシエータと優先度の情報を追加
- メインメニューからコマンド メニューにアクセスする
- ピクチャー イン ピクチャー ブレークポイント
- 参考ヒント:
monitorEvents()
を使用して、コンソールでノードで発生したイベントをログに記録する(動画)
Chrome 70
- コンソールの [Live Expressions]
- 積極的な評価で DOM ノードをハイライト表示する
- パフォーマンス パネルの最適化
- デバッグの信頼性が向上
- コマンド メニューからネットワーク スロットリングを有効にする
- 条件付きブレークポイントのオートコンプリート
- AudioContext イベントで中断
- ndb を使用して Node.js アプリをデバッグする
- ヒント: User Timing API を使用して実際のユーザー インタラクションを測定する
Chrome 68
- 積極的な評価
- 引数のヒント
- 関数のオートコンプリート
- ES2017 のキーワード
- 監査パネルの Lighthouse 3.0
- BigInt のサポート
- 監視ペインにプロパティ パスを追加する
- [タイムスタンプを表示] を [設定] に移動
- 参考ヒント: あまり知られていないコンソールのメソッド(動画)
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
- 新しいコンソール フィルタ
- [Network] パネルでの HAR インポート
- プレビュー可能なキャッシュ リソース
- 予測可能なキャッシュ デバッグ
- ブロックレベルのコード カバレッジ
Chrome 61
- モバイル デバイスのスロットリング シミュレーション
- 保存容量の使用量を確認する
- Service Worker がレスポンスをキャッシュに保存した日時を表示する
- コマンド メニューから FPS メーターを有効にする
- ズームまたはスクロールに対するマウスホイールの動作を設定する
- ES6 モジュールのデバッグ サポート
Chrome 60
- 新しい監査パネル
- サードパーティのバッジ
- 「ここで続行」の新しいジェスチャー
- 非同期ステップを開始する
- コンソールでより有益なオブジェクト プレビューが可能に
- コンソールでのより有益なコンテキスト選択
- [カバレッジ] タブのリアルタイム更新
- シンプルなネットワーク スロットリング オプション
- 非同期はデフォルトでオン