DevTools の新機能（Chrome 85）

Jecelyn Yeen

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

[Styles] ペインで、CSS オブジェクト モデル（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 言語機能の一部がより適切にサポートされるようになりました。

  • オプショナル チェーン構文の自動補完 - Console のプロパティの自動補完で、オプショナル チェーン構文がサポートされるようになりました。たとえば、name. と name[ に加えて name?. も使用できるようになりました。
  • プライベート フィールドの構文のハイライト表示 - プライベート クラス フィールドが、ソースパネルで適切に構文ハイライト表示され、美しく表示されるようになります。
  • null 合体演算子の構文ハイライト - DevTools で、[ソース] パネルの null 合体演算子が適切にプリティプリントされるようになりました。

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

マニフェスト ペインに新しいアプリ ショートカットの警告が表示される

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

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

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

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

Chromium の問題 #955497

[タイミング] タブのサービス ワーカー respondWith イベント

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

Service Worker の「respondWith」

Chromium の問題 #1066579

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

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

Chromium の問題 #1073899

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

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

バイトコード オフセット

Chromium の問題 #1071432

ソースパネルでの行単位のコピーと切り取り

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

Chromium の問題 #800028

コンソール設定の更新

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

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

たとえば、以前は、[類似をグループ化] がオフになっているにもかかわらず、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

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

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

ブレークポイント

Chromium の問題 #1041830

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

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

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。