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

DevTools の新機能（Chrome 85）

Jecelyn Yeen

CSS-in-JS フレームワークのスタイル編集

[Styles] ペインで、CSS Object Model（CSSOM）API で作成したスタイルの編集に対するサポートが改善されました。CSS-in-JS のフレームワークとライブラリの多くは、内部で CSSOM API を使用してスタイルを構築しています。

また、JavaScript で追加されたスタイルを、コンポーズ可能なスタイルシートを使用して編集できるようになりました。コンストラクティブスタイルシートは、Shadow DOM の使用時に再利用可能なスタイルを作成して配布するための新しい方法です。

たとえば、CSSStyleSheet（CSSOM API）で追加された h1 スタイルは、以前は編集できません。[スタイル] ペインで、次の編集ができるようになりました。

Chromium の問題 #946975

[Lighthouse] パネルに表示された Lighthouse 6

Lighthouse パネルでは Lighthouse 6 が実行されている。主な変更の概要については、Lighthouse 6.0 の新機能をご覧ください。すべての変更点の一覧については、v6.0.0 リリースノートをご覧ください。

Lighthouse 6.0 では、Largest Contentful Paint（LCP）、Cumulative Layout Shift（CLS）、Total Blocking Time（TBT）の 3 つの新しい指標がレポートに追加されました。LCP と CLS は Google の新しい Core Web Vitals の 2 つであり、TBT はもう一つの Core Web Vitals である First Input Delay のラボ測定プロキシです。

また、パフォーマンススコアの式も、ユーザーの読み込みエクスペリエンスをより適切に反映するように重み付けがされています。

Lighthouse 6.0 の新しいパフォーマンス指標

Chromium の問題 #772558

First Meaningful Paint（FMP）のサポート終了

First Meaningful Paint（FMP）は、Lighthouse 6.0 で非推奨になりました。また、[パフォーマンス] パネルからも削除されています。FMP の代替として推奨されるのは Largest Contentful Paint です。非推奨になった理由については、First Meaningful Paint をご覧ください。

Chromium の問題 #1096008

新しい JavaScript 機能のサポート

DevTools で、最新の JavaScript 言語機能の一部のサポートが強化されました。

オプションのチェーン構文のオートコンプリート - コンソールでプロパティのオートコンプリートが、オプションのチェーン構文をサポートするようになりました。たとえば、name?. が name. と name[ に加えて機能するようになりました。
プライベートフィールドの構文ハイライト表示 - プライベートクラスフィールドが [ソース] パネルで構文ハイライト表示され、プリティプリントされるようになりました。
Nullish 結合演算子の構文ハイライト表示 - DevTools で、nullish 結合演算子が [Sources] パネルに適切にプリティプリントされるようになりました。

Chromium の問題 #1083214、#1073903、#1083797

[Manifest] ペインに表示される新しいアプリのショートカットに関する警告

アプリのショートカットを使用すると、ユーザーはウェブアプリで一般的なタスクやおすすめのタスクを簡単に開始できます。

次の場合、[Manifest] ペインに警告が表示されるようになりました。

アプリのショートカットアイコンを 96x96 ピクセル未満にする
アプリのショートカットアイコンとマニフェストアイコンが正方形でない（無視されるため）

アプリのショートカットに関する警告

Chromium の問題 #955497

[Timing] タブの Service Worker の `respondWith` イベント

[ネットワーク] パネルの [タイミング] タブに、Service Worker の respondWith イベントが追加されました。respondWith は、Service Worker の fetch イベントハンドラが実行される直前の時間から、fetch ハンドラの respondWith Promise が解決される時間です。

Service Worker 「respondWith」

Chromium の問題 #1066579

[計算済み] ペインの一貫した表示

[要素] パネルの [計算済み] ペインが、すべてのビューポートサイズで常にペインとして表示されるようになりました。以前は、DevTools のビューポートの幅が狭いと、[計算済み] ペインが [スタイル] ペイン内で結合されていました。

Chromium の問題 #1073899

WebAssembly ファイルのバイトコードオフセット

DevTools で、Wasm 逆アセンブリの行番号を表示するためにバイトコードオフセットを使用するようになりました。これにより、バイナリデータを表示していることが明確になり、Wasm ランタイムがロケーションを参照する方法との整合性が高まります。

バイトコードオフセット

Chromium の問題 #1071432

ソースパネルで行単位でコピーおよびカット

ソースパネルエディタで、選択せずにコピーまたは切り取りを実行すると、DevTools によって現在の行コンテンツがコピーまたは切り取られます。たとえば、次の動画では、カーソルは行 1 の最後にあります。キーボードショートカットの「Cut」を押すと、行全体がクリップボードにコピーされて削除されます。

Chromium の問題 #800028

コンソール設定の更新

同じコンソールメッセージのグループ化を解除する

コンソール設定の [グループ類似] 切り替えが、重複するメッセージに適用されるようになりました。以前は、同様のメッセージにのみ適用されていました。

たとえば、以前は [Group 類似ユーザー] がオフになっている場合でも、DevTools でメッセージ hello のグループ化は解除されませんでした。これで、hello メッセージがグループ化解除されます。

Chromium の問題 #1082963

選択したコンテキストのみの設定を維持する

コンソール設定の [選択したコンテキストのみ] の設定が維持されるようになりました。以前は、DevTools を閉じて再度開くたびに、設定がリセットされていました。この変更により、設定の動作が他のコンソール設定オプションと整合するようになります。

選択したコンテキストのみ

Chromium の問題 #1055875

パフォーマンスパネルの更新

[パフォーマンス] パネルの JavaScript コンパイルキャッシュ情報

[パフォーマンス] パネルの [概要] タブに、JavaScript コンパイルキャッシュ情報が常に表示されるようになりました。以前は、コードキャッシュが発生しない場合、DevTools にはコードキャッシュに関連する情報が表示されませんでした。

JavaScript コンパイルのキャッシュ情報

Chromium の問題 #912581

パフォーマンスパネルのナビゲーションタイミングの配置

パフォーマンスパネルでは、録画の開始日時に基づいてルーラーの時間を表示していました。これは、ユーザーが移動する記録に関しては変更され、DevTools では代わりにナビゲーションに対する相対的なルーラー時間が表示されるようになりました。

[パフォーマンス] パネルでナビゲーションのタイミングを調整

また、DOMContentLoaded、First Paint、First Contentful Paint、Largest Contentful Paint イベントの時間を、ナビゲーションの開始からの相対時間に変更し、PerformanceObserver によってレポートされるタイミングと一致するようにしました。

Chromium の問題 #974550

ブレークポイント、条件付きブレークポイント、ログポイントの新しいアイコン

[Sources] パネルで、ブレークポイント、条件付きブレークポイント、ログポイントのデザインが新しくなりました。ブレークポイントは、より明るく親しみやすい色でフラグのデザインを一新されます。条件付きブレークポイントとログポイントを区別するために、アイコンが追加されます。

ブレークポイント

Chromium の問題 #1041830

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

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

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

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

crbug.com からご提案やフィードバックをお送りください。
DevTools の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。