このページは 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 のあるページで新しい録画を開始し、録音するセレクタの種類で ピアスをオンにします。Shadow DOM 内の要素とのインタラクションを記録し、対応するステップを調べます。

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

Chromium の問題: 1411188。

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

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

録画を開いて [ Export] をクリックし、新しいオプションを選択して .js ファイルを保存します。

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

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

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

拡張機能を入手

カスタムエクスポートオプションなど、レコーダーの使い勝手をカスタマイズするためのオプションを紹介します。レコーダーの拡張機能を入手するには、録音内で [Export] > [Get extensions] をクリックします。

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

レコーダー拡張機能の一覧に、自由に独自の拡張機能を追加できます。皆様のご参加を心よりお待ちしております。

Chromium の問題: 1417104、1413168。

要素 > スタイルの更新

CSS ドキュメント

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

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

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

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

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

Chromium の問題: 1401107

CSS ネストのサポート

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

Chromium の問題: 1172985。

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

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

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

ブレークポイントによってトリガーされたメッセージ（アイコンと適切なソースリンクを含む）をコンソールに表示する方法を変更しました。

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

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

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

Chromium の問題: 1027458。

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

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

スクリプトまたはフォルダを右クリックして、無視に関するオプションのいずれかを選択します。リストにスクリプトやフォルダを追加または削除するオプションが表示される場合があります。Debugger は、リストに追加されたスクリプトを無視し、コールスタックで省略します。

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

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

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

無視するスクリプトを選択すると、[構成] ボタンで [設定] > [無視リスト] に移動します。[] > [無視リストに登録されているソースを非表示] を使用して、無視したソースをファイルツリーで非表示にすることもできます。

Chromium の問題: 883325。

JavaScript Profiler の非推奨化を開始しました

Chrome 58 以降、DevTools チームは最終的に JavaScript Profiler のサポートを終了する予定です。Node.js と Deno のデベロッパーは、JavaScript の CPU パフォーマンスのプロファイリングに [Performance] パネルを使用します。

この DevTools バージョン（112）では、4 フェーズの JavaScript Profiler のサポート終了を開始します。[JavaScript Profiler] パネルに、対応する警告バナーが表示されます。

CPU のプロファイリングには、Profiler ではなく Performance パネルを使用します。

対応する RFC と crbug.com/1354548 で詳細を確認し、フィードバックをお送りください。

Chromium の問題: 1417647。

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

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

[視力低下をエミュレート] 機能で選択されたコントラストを下げるオプション。

リストのオプションが更新され、オプションがどの色の非感度を表すかがわかります。

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

Chromium の問題: 1412719、1412721。

灯台 10

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

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

[Lighthouse] > [] > [] の [以前のナビゲーション] がデフォルトで無効になりました。このオプションでは、ナビゲーションモードで以前の Lighthouse 設定を使用します。

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

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

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

Chromium の問題: 772558。

NoOps Service Worker 取得ハンドラの削除を求めるコンソール警告

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

コンソールで、ウェブサイトで NoOps 取得ハンドラが検出された場合に警告が表示されるようになりました。削除をご検討ください。

NoOps 取得ハンドラと、コンソールでの対応する警告。

Chromium の問題: 1347319。

その他のハイライト

このリリースでの注目すべき修正は次のとおりです。

[Sources] > [Breakpoints] ペインで、あいまいなファイル名の隣に区別のためのファイルパスが表示されるようになりました（1403924）。
[Performance] パネルのフレームチャートの [Main] セクションで、CpuProfiler::StartProfiling が Profiler Overhead として表示されるようになりました（1358602）。
DevTools での予測入力が改善されました。
- ソース: 任意の単語の一貫した補完（1320204）。
- コンソール: Arrow down で最初の候補が選択され、候補に Tab のヒントが表示されます（1276960）。
DevTools に、ドキュメントのピクチャーインピクチャーウィンドウを開いたときに一時停止できるように、イベントリスナーブレークポイントが追加されました（1315352）。
DevTools で、Vue2 webpack アーティファクトを JavaScript として適切に表示する回避策が設定されます（1416562）。
[コンソール] 設定の名前には、「Automaticallyexpand console.trace() messages」という名称が付けられました。（1139616）。

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。