Chromeのパフォーマンスが大幅に向上しました！ (Chrome 87の新機能の解釈)

本日、Chrome は最新バージョン 87 に更新されました。これが今年最後の Chrome 更新です。このバージョンは、ここ数年で Chrome のパフォーマンスが最も大きく向上しており、開発者ツールも大幅に更新されました。

一部のユーザーは、Chrome のパフォーマンスの問題は長い間批判されてきたと信じています。しかし、新しい Edge が登場した後、パフォーマンスが突然向上しました。これは明らかに、Edge に対する Google の影響によるものです。市場シェア、プレッシャーの増大。

さらに、Mac 上の Chrome のアイコンも更新されており、特に Big Sur に適応するように設計されている必要があります。

原文: https://developers.google.com/web/updates/2020/10/devtools

PS: 最新の Chrome アップデートビデオのナレーションは日本人女性です、この話された英語は本当に魅力的です...

1. 新しい CSS グリッド デバッグ ツール

DevTools の CSS グリッド サポートのサポートが強化されました。

CSS グリッドのデバッグ

ページ上の HTML 要素に display:grid または display:inline-grid がある場合 では、[要素] パネルの隣にグリッド タグが表示されます。マーカーをクリックして、ページ上のグリッド オーバーレイの強調表示を切り替えます。

新しい [レイアウト] サブパネルには、グリッドを表示するためのいくつかのオプションを提供する [グリッド] タブがあります。

詳細については、ドキュメントを参照してください。

Chromium の問題に対応: 1047356

2. 新しい WebAuthn パネル

新しい WebAuthn タブを使用して、オーセンティケーターをシミュレートし、デバッグできるようになりました。 Web認証API。

WebAuthn

図のように、[その他のオプション] > [その他のツール] > [WebAuthn] を選択して、WebAuthn パネルを開きます。

[WebAuthn] タブ

[WebAuthn] タブが表示されるまで、ネイティブ WebAuthn デバッグは Chrome ではサポートされていません。開発者は、Web アプリケーションをテストするために物理認証システムを必要とします。

新しい WebAuthn タグを使用すると、Web 開発者は、物理的な認証システムを必要とせずに、認証システムをシミュレートし、その機能をカスタマイズし、そのステータスを確認できるようになりました。これにより、デバッグ作業が容易になります。

WebAuthn 機能の詳細については、ドキュメントを参照してください。

Chromium の問題に対応: 1034663

3. 開発者ツール パネルが垂直分割画面をサポートするようになりました

DevTools は、DevTools ツール パネルの移動をサポートするようになりました。上下に配置すると、任意の 2 つのツール パネルを分割画面で同時に表示できます。

たとえば、[要素] パネルと [ソース] パネルの両方を表示したい場合は、[ソース] パネルを右クリックして [一番下に移動] を選択します。

下部に移動

同様に、下部のタブを右クリックして [上部に移動] を選択すると、下部のタブを上部に移動できます。

トップに移動

4. 要素パネルの機能更新

4.1 スタイル サブ-panel

で計算サイドバーを表示する [スタイル] パネルで計算サイドバーを切り替えることができるようになりました。

デフォルトでは、[スタイル]パネルの計算サイドバーは折りたたまれており、ボタンをクリックして展開状態に切り替えることができます。

計算されたサイドバー ペイン

Chromium の問題に対応: 1073899

4.2 計算されたパネルでの CSS プロパティのグループ化

CSS プロパティを [計算済み] サイドバーでカテゴリ別にグループ化できるようになりました。

この新しいグループ化機能を使用すると、Computed で関連する CSS プロパティのグループを見つけて選択的に焦点を当てることがさらに簡単になります。

[要素] パネルで要素を選択し、[グループ] チェックボックスをクリックして CSS プロパティをグループ化/グループ解除します。

CSS プロパティのグループ化

Chromium の問題に対応: 1096230、1084673、1106251

5. Lighthouse の更新 Lighthouse 6.4

Lighthouse パネルが Lighthouse 6.4 に更新されました。新機能の完全なリストについては、リリース ノートを確認してください。

Lighthouse

Lighthouse 6.4 の新機能:

1. フォントのプリロード: font-display: オプションを使用するすべてのフォント ファイルが

   ## にプリロードされているかどうかをレポートします。
2. #有効なソースマップ: ページ上の非サードパーティ JS のソースマップ ファイルが正しいかどうかをレポートします。

3. 大規模な JavaScript ライブラリ (実験的機能): 大規模な JavaScript ライブラリをレポートします。ページ上の JS ライブラリ (例: moment.js)

は、Chromium の問題: 772558

6 に対応します。パフォーマンス パネルのイベント ライン (タイミング) 、「パフォーマンス.mark() イベントのマーク」に移動します。

「パフォーマンス」パネル レコードの「タイミング」セクションで、

Performance.mark() イベントがマークされます。

Performance.mark events

7. [ネットワーク] パネルに新しいリソース タイプと URL フィルター条件が追加されました

# [ネットワーク] パネルで

resource-type および url キーワードを使用してネットワーク リクエストをフィルタリングできるようになりました。

たとえば、

resource-type: image を使用して、画像に対するネットワーク要求を除外します。

resource-type filter

その他のフィルター条件をクリックすると、

resource-type と # # のフィルター使用法に類似した条件が表示されます。 #url。 Chromium の問題に対応: 1121141、1104188

8. [アプリケーション] パネルの [フレーム] サブパネルに関連する更新

8.1サポート表示## エンドポイントに報告された #COEP

および COOPCOEP のレポート先フィールドが、「セキュリティと分離」セクションで表示されるようになりました。 [アプリケーション] パネルの [フレーム] サブパネルの

(クロスオリジン エンベッダー ポリシー) および

COOP (クロスオリジン オープナー ポリシー)。 レポート API は、Report-To という新しい HTTP ヘッダーを定義します。COEP

(Cross-Origin Embedder Policy) および

COOP (Cross-Origin のポリシー) に違反した場合、オープナー ポリシー)、ブラウザはこのヘッダーで指定されたアドレスにレポートを送信します。

エンドポイントへのレポート

COEP

と

COOP を有効にして Web サイトをクロスオリジンにする方法についてクロスオリジン分離については、この記事を参照してください。Chromium の問題に対応: 1051466

8.2 COEP および COOP のレポート専用モードの表示

Devtools COEP と COOP がレポート専用である場合、新しいラベル表示が追加されます

レポート専用ラベル

このビデオを見てください。情報漏洩を防ぐ方法と、COOP と COEP を有効にする方法を学びます。

Chromium の問題に対応: 1051466

9. [その他のツール] メニューの [設定] ボタンを削除します

[その他のツール] メニューの設定は廃止されましたを推奨します。メインパネルから設定を開いてください。

#メイン パネルの設定

Chromium の問題に対応: 1121312

10. 実験的な機能

次の機能はすべて、[設定] > [実験] で関連するオプションを有効にする必要があります。

10.1 CSS 概要パネルは、色のコントラストの問題の表示と修復をサポートします

CSS概要パネルの表示 ページ上の低コントラストのテキストの色のリスト。 このデモ ページでは、色のコントラストが低いというマイナスのケースを示しています。この CSS 概要パネルを開いて、問題のあるすべての要素のリストを表示します。

色のコントラストが低い問題

リスト内の要素をクリックして要素パネルで要素を開くと、DevTools が修正に役立つ自動色の提案を提供します。テキストの色のコントラストが低い問題。

Chromium の問題に対応: 1120316

10.2 DevTools がカスタム キーボード ショートカットをサポート

DevTools でキーボード ショートカットをカスタマイズできるようになりました。 [設定] > [ショートカット] に移動し、コマンドの上にマウスを置き、[編集] ボタンをクリックしてショートカット キーをカスタマイズします。

キーボード ショートカットのカスタマイズ

すべてのショートカットをリセットするには、[デフォルトのショートカットを復元] をクリックしてデフォルトのショートカットを復元します。

Chromium の問題に対応: 174309