このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 112）

Sofia Emelianova

Jecelyn Yeen

レコーダーの更新

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

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

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

カスタムリプレイ UI。

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

Chromium の問題: 1400243。

ピアスセレクタで録音する

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

Shadow DOM を含むページで新しい録画を開始し、[記録するセレクタの種類] で [ Pierce] をオンにします。Shadow DOM 内の要素とのインタラクションを記録し、対応するステップを検査します。

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

Chromium の問題: 1411188。

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

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

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

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

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

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

広告表示オプションを取得する

カスタムエクスポートオプションなど、レコーダーの使用方法をカスタマイズするオプションをご確認ください。録画で [エクスポート] > [拡張機能を取得] をクリックして、Recorder の拡張機能を取得します。

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

レコーダー拡張機能のリストに独自の拡張機能を追加してください。皆様の動画がリストに表示されるのを楽しみにしております。

Chromium の問題: 1417104、1413168。

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

CSS のドキュメント

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

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

ツールチップには [詳細] リンクもあり、このプロパティの MDN CSS リファレンスに移動できます。

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

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

Chromium の問題: 1401107。

CSS のネストサポート

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

Chromium の問題: 1172985。

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

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

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

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

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

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

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

Chromium の問題: 1027458。

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

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

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

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

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

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

無視するスクリプトを選択すると、[設定] ボタンから [設定] > [無視リスト] に移動します。無視されたソースをファイルツリーから非表示にするには、 > [無視リストのソースを非表示にする] を選択します。

Chromium の問題: 883325。

JavaScript プロファイラのサポート終了の開始

Chrome 58 以降、DevTools チームは、JavaScript プロファイラを段階的に非推奨とし、Node.js デベロッパーと Deno デベロッパーが JavaScript CPU パフォーマンスのプロファイリングにパフォーマンス パネルを使用するようにすることを計画していました。

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

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

詳しくは、対応する 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。

無効なサービスワーカーの取得ハンドラを削除するよう求めるコンソール警告

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

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

無効な取得ハンドラと、コンソールに表示される対応する警告。

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 で [その他] > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
@ChromeDevTools にツイートします。
DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。