DevTools の新機能（Chrome 112）

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

レコーダーの更新

リプレイ拡張機能のサポート

レコーダーでは、拡張機能を使用して DevTools に埋め込むことができるカスタム再生オプションのサポートが導入されました。

サンプル拡張機能を試してみてください。新しいカスタム リプレイ オプションを選択して、カスタム リプレイ UI を開きます。

カスタム リプレイ UI。

ニーズに合わせてレコーダーをカスタマイズし、ツールと統合するには、独自の拡張機能の開発を検討してください。chrome.devtools.recorder API を確認し、拡張機能の例をご覧ください。

Chromium の問題: 1400243。

ピアスのセレクタで記録する

カスタム、CSS、ARIA、テキスト、XPath セレクタに加えて、ピアース セレクタを使用して記録できるようになりました。これらのセレクタは CSS のセレクタのように動作しますが、シャドー ルートを貫通することもできます。

シャドウ DOM を含むページで新しい録音を開始し、[記録するセレクタの種類] で チェックボックス。 [Pierce] をオンにします。シャドー DOM 内の要素とのやり取りを記録し、対応するステップを検査します。

ピアース セレクタを使用するようにレコーダーを設定する。ピアース セレクタの動作。

Chromium の問題: 1411188。

Lighthouse 分析を含む Puppeteer スクリプトとしてエクスポートする

レコーダーに、新しいエクスポート オプション「Puppeteer（Lighthouse 分析を含む）」が導入されました。Puppeteer を使用すると、Chrome を自動化して制御できます。Lighthouse を使用すると、ウェブサイトのパフォーマンスを把握して改善できます。

録音を開き、エクスポート] をクリックします。 [エクスポート] をクリックして新しいオプションを選択し、.js ファイルを保存します。

Puppeteer（Lighthouse 分析を含む）をエクスポートします。

Puppeteer スクリプトを実行して、flow.report.html ファイルで Lighthouse レポートを取得します。

Chrome で Lighthouse レポートが開きました。

拡張機能を取得する

カスタム エクスポート オプションなど、レコーダーの操作性をカスタマイズするオプションについて説明します。録画で エクスポート] をクリックします。 [エクスポート] > [拡張機能を取得] をクリックして、Recorder の拡張機能を取得します。

[エクスポート] プルダウン メニューの [拡張機能を取得] オプション。

レコーダー拡張機能のリストに、独自の拡張機能を追加することもできます。皆様の動画がリストに掲載されることを楽しみにしております。

Chromium の問題: 1417104、1413168。

[要素] > [スタイルの更新]

CSS ドキュメント

CSS プロパティのドキュメントを 1 日に何回調べますか？[要素] > [スタイル] ペインで、プロパティにカーソルを合わせると簡単な説明が表示されるようになりました。

CSS プロパティに関するドキュメントを含むツールチップ。

また、このプロパティに関する MDN CSS リファレンスに移動できる [詳細] リンクもツールチップに表示されます。

CSS に精通している場合は、ツールチップが煩わしく感じるかもしれません。すべてオフにするには、[チェックボックス。 表示しない] をオンにします。

再びオンにするには、設定] をタップします。 [設定] > [設定] > [要素] > チェックボックス。 [CSS ドキュメントのツールチップを表示] をオンにします。

Chromium の問題: 1401107。

CSS ネストのサポート

[要素] > [スタイル] ペインで CSS ネスト構文が認識され、ネストされたスタイルが適切な要素に適用されるようになりました。

Chromium の問題: 1172985。

コンソールでのログポイントと条件付きブレークポイントのマーク付け

拡張ブレークポイントの UX がさらに改善され、コンソールでブレークポイントによってトリガーされたメッセージがマークされるようになりました。

コンソールでブレークポイントによってトリガーされたメッセージがアイコンと適切なソースリンクで表示されるように変更されました。

コンソールで、Chrome が V8 で JavaScript の一部を実行するために作成する VM<number> スクリプトではなく、ソースファイルのブレークポイントへの適切なアンカーリンクが提供されるようになりました。

ブレークポイント メッセージの横にあるリンクをクリックすると、ブレークポイント エディタに直接移動します。

ブレークポイント エディタを開くログポイント メッセージの横にあるアンカー リンク。

Chromium の問題: 1027458。

デバッグ中に無関係なスクリプトを無視する

コードの最も重要な部分に集中できるように、[ソース] > [ページ] ペインのファイルツリーから、無関係なスクリプトを [無視リスト] に追加できるようになりました。

スクリプトまたはフォルダを右クリックして、無視関連のオプションのいずれかを選択します。スクリプトまたはフォルダをリストに追加または削除するオプションが表示されることがあります。リストに追加されたデバッガが無視するスクリプトは、コールスタックから除外されます。

無視関連のオプションを含むフォルダとスクリプトのコンテキスト メニュー。

無視リストに登録されたスクリプトとフォルダはすべて、ファイルツリーでグレー表示されます。

無視リストに登録されたスクリプトとフォルダはグレー表示されます。その他のオプションのプルダウン メニューにある試験運用版のオプションを使用して、非表示にできます。

無視されたスクリプトを選択すると、[設定] ボタンから 設定] をタップします。 [設定] > [無視リスト] に移動します。その他メニュー。 > 無視リストのソースを非表示にする 試験運用中。 を使用して、無視したソースをファイルツリーから非表示にすることもできます。

Chromium の問題: 883325。

JavaScript プロファイラの非推奨化が開始されました

Chrome 58 の時点で、DevTools チームは最終的に JavaScript プロファイラを非推奨とし、Node.js と Deno のデベロッパーが JavaScript CPU パフォーマンスのプロファイリングに [パフォーマンス] パネルを使用できるようにする計画を立てていました。

この DevTools バージョン（112）では、4 段階の JavaScript プロファイラの非推奨化が開始されます。[JavaScript プロファイラ] パネルに、対応する警告バナーが表示されるようになりました。

Profiler の上部に非推奨バナーが表示されます。

Profiler ではなく、パフォーマンス パネルを使用して CPU をプロファイリングします。

詳細については、対応する RFC と crbug.com/1354548 をご覧ください。

Chromium の問題: 1417647。

低コントラストをエミュレート

[レンダリング] タブの [色覚異常をエミュレート] リストに、[コントラストの低下] という新しいオプションが追加されました。このオプションを使用すると、コントラスト感度が低いユーザーにウェブサイトがどのように表示されるかを確認できます。

[色覚異常をエミュレート] 機能で選択された低コントラスト オプション。

リスト オプションが更新され、各オプションがどの色覚異常に対応しているかがわかるようになりました。

DevTools を使用すると、コントラストの問題をすべて一度に検出して修正できます。詳しくは、ウェブサイトの読みやすさを向上させるをご覧ください。

Chromium の問題: 1412719、1412721。

Lighthouse 10

[Lighthouse] パネルで Lighthouse 10.0.1 が実行されるようになりました。詳しくは、Lighthouse 10.0.1 の新機能をご覧ください。

DevTools の Lighthouse パネルの基本的な使用方法については、Lighthouse: ウェブサイトの速度を最適化するをご覧ください。

Lighthouse > 設定] をタップします。 > 空のチェックボックス。 [レガシー ナビゲーション] がデフォルトで無効になりました。このオプションでは、ナビゲーション モードで以前の Lighthouse 構成を使用します。

以前のナビゲーションを無効にしました。

Lighthouse 10 では、デフォルトのエミュレーション デバイスとして Moto G Power が使用されるようになりました。DevTools によって、このデバイスが 設定] をタップします。 [設定] > [デバイス] に追加されました。

デバイスリストの Moto G Power。

Chromium の問題: 772558。

no-op サービス ワーカー フェッチ ハンドラを削除するためのコンソールの警告

Chrome 112 では、ナビゲーションの速度を低下させる可能性があるにもかかわらず、目的を果たさない no-op（操作なし）の Service Worker フェッチ ハンドラがスキップされます。このようなハンドラは、ウェブサイトがプログレッシブ ウェブアプリとして認定されるために必須ではなくなりました。

ウェブサイトで no-op フェッチ ハンドラが見つかった場合、コンソールに警告が表示されるようになりました。削除することを検討してください。

no-op フェッチ ハンドラと、コンソールに表示される対応する警告。

Chromium の問題: 1347319。

その他のハイライト

このリリースでの重要な修正は次のとおりです。

プレビュー チャネルをダウンロードする

Chrome の Canary、Dev、Beta をデフォルトの開発ブラウザとして使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーがサイトの問題を発見する前に、問題を特定することもできます。

Chrome DevTools チームに問い合わせる

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

DevTools の新機能シリーズで取り上げたすべての内容のリスト。