このページは 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（初回入力遅延）のラボ測定プロキシです。

また、ユーザーの読み込みエクスペリエンスをより適切に反映するため、パフォーマンススコアの式の重み付けも変更しました。

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[ に加えて機能するようになりました。
プライベートフィールドの構文のハイライト表示 - プライベートクラスフィールドが、[Sources] パネルで適切に構文ハイライト表示され、プリティプリントされるようになりました。
null 値結合演算子の構文のハイライト表示 - DevTools で、[Sources] パネルで null 結合演算子が適切にプリティプリントされるようになりました。

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

[マニフェスト] ペインの新しいアプリショートカットに関する警告

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

次の場合に [マニフェスト] ペインに警告が表示されるようになりました。

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

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

Chromium の問題 #955497

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

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

Service Worker の「respondWith」

Chromium の問題 #1066579

Computed ペインの一貫した表示

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

Chromium の問題 #1073899

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

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

バイトコードオフセット

Chromium の問題 #1071432

[Sources] パネルで行ごとにコピーと切り取りを行う

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

Chromium の問題 #800028

コンソール設定の更新

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

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

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

Chromium の問題 #1082963

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

コンソール設定の [Selected context only] の設定が保持されるようになりました。これまでは、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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。