このページは 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 を使用して新しい記録を開始し、[Selector types to recording] で [Pierce] をオンにします。Shadow DOM 内の要素とのインタラクションを記録し、対応するステップを検査します。

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

Chromium の問題: 1411188

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

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

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

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

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

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

拡張機能を入手

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

[Export] プルダウンメニューの [Get extensions] オプション。

必要に応じて、レコーダー拡張機能のリストに独自の拡張機能を追加してください。お客様のご参加を心よりお待ちしております。

Chromium に関する問題: 1417104、1413168。

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

CSS ドキュメント

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

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

ツールチップの [詳細] リンクを使用すると、このプロパティの MDN CSS リファレンスに移動できます。

CSS について熟知していると、ツールチップは面倒に感じられるかもしれません。すべてオフにするには、[ 表示しない] チェックボックスをオンにします。

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

Chromium の問題: 1401107。

CSS のネストのサポート

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

Chromium の問題: 1172985

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

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

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

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

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 によって、このデバイスが [設定] > [デバイス] に追加されました。

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

Chromium の問題: 772558。

NoOps の Service Worker 取得ハンドラを削除するよう促すコンソールの警告

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

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

NoOps フェッチハンドラと、それに対応するコンソールの警告

Chromium の問題: 1347319。

その他のハイライト

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

[Sources] > [Breakpoints] ペインで、あいまいなファイル名の横に区別されたファイルパスが表示されるようになりました。（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 動画でコメントを残してください。