DevTools の新機能（Chrome 112）

Sofia Emelianova

Jecelyn Yeen

レコーダーの更新

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

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

サンプル拡張機能を試してみてください。新しいカスタム リプレイ オプションを選択して、カスタム リプレイ 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 スクリプトを実行して、flow.report.html ファイルで Lighthouse レポートを取得します。

拡張機能を取得する

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

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

Chromium の問題: 1417104、1413168。

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

CSS ドキュメント

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

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

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

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

Chromium の問題: 1401107。

CSS ネストのサポート

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

Chromium の問題: 1172985。

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

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

• オレンジ色の疑問符 ? が付いた条件付きブレークポイントの console.* 呼び出し
• ピンク色の 2 つのドット .. が付いたログポイント メッセージ

コンソールで、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 ではなく、パフォーマンス パネルを使用して 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 によって、このデバイスが [設定] > [デバイス] に追加されました。

Chromium の問題: 772558。

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

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

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

Chromium の問題: 1347319。

その他のハイライト

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

• [ソース] > [ブレークポイント] ペインに、あいまいなファイル名の横に区別可能なファイルパスが表示されるようになりました（1403924）。
• [パフォーマンス] パネルのフレーム グラフの [メイン] セクションで、CpuProfiler::StartProfiling が Profiler Overhead として指定されるようになりました（1358602）。
• DevTools の自動補完機能の改善:
  • ソース: 任意の単語の一貫した補完（1320204）。
  • コンソール: Arrow down は最初の候補を選択し、候補は Tab ヒントを取得します（1276960）。
• DevTools に、ドキュメントのピクチャー イン ピクチャー ウィンドウを開いたときに一時停止できるイベント リスナー ブレークポイントが追加されました（1315352）。
• DevTools で、Vue2 webpack アーティファクトを JavaScript として適切に表示する回避策を設定しました（1416562）。
• コンソール設定の名前が「console.trace() メッセージを自動的に展開する」に変更されました。（1139616）。

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

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

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

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

• フィードバックや機能リクエストは、crbug.com からお送りください。
• DevTools の more_vert その他のオプション > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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