DevTools の新機能(Chrome 77)

要素のスタイルをコピーする

[DOM Tree] のノードを右クリックして、その DOM ノードの CSS をクリップボードにコピーします。

スタイルをコピーします。

図 1. 要素のスタイルをコピーします。

Adam ArgyleVisBugアイデアに感謝します。

レイアウト シフトを可視化する

お気に入りのウェブサイトでニュース記事を読んでいるとします。ページを読んでいるときに 動画があちこちに散らばっているため 視聴の場を失ってしまいますこの問題をレイアウトと呼びます。 シフトします。通常は、画像や広告の読み込みが完了すると発生します。ページでスペースが予約されていない 画像と広告のテキストが分離されるため、ブラウザはその他すべてのコンテンツを下にシフトして、 できます。この問題を解決するには、プレースホルダを使用します。

DevTools でレイアウト シフトを検出できるようになりました。

  1. コマンド メニューを開きます。
  2. Rendering」と入力します。
  3. [Show Rendering] コマンドを実行します。
  4. [レイアウト シフトの領域] チェックボックスをオンにします。ページを操作すると、レイアウト シフトが ハイライト表示されます。

レイアウト シフト。

図 2. レイアウト シフト。

Chromium の問題 #961846

[Audits] パネルでの Lighthouse 5.1

これで、Audits パネルで Lighthouse 5.1 が実行されるようになりました。新しい監査には以下が含まれます。

  • 有効な apple-touch-icon を提供する。iOS のホーム画面に PWA を追加できることを確認します。
  • リクエスト数とファイルサイズを小さくする。ネットワーク リクエストの合計数と ドキュメント、スクリプト、スタイルシート、画像など、さまざまなカテゴリのファイルサイズ。
  • First Input Delay の最大値。ユーザーが ユーザーの最初のページインタラクションと そのインタラクションに対するブラウザの応答ですこの指標は は推定入力レイテンシの指標に代わるものです。可能性のある初回入力遅延の最大値は考慮されません。 パフォーマンスカテゴリのスコアです

新しい [Audits] パネルの UI。

図 3. 新しい [Audits] パネルの UI。

Lighthouse 5.1 の Node バージョンと CLI バージョンには、チェックすべき重要な新機能が 3 つあります。

  • パフォーマンス バジェット。リクエストを指定してサイトの回帰を防ぐ 数とファイルサイズの上限を指定します。
  • プラグイン。独自のカスタム監査で Lighthouse を拡張できます。
  • スタックパック。特定の技術スタックに合わせた監査を追加できます。WordPress スタックパック 最初に発送されます。React と AMP Stack Pack は現在開発中です。

OS のテーマの同期

OS のダークモードを使用している場合、DevTools は独自のダークモードに切り替わります。 自動的に適用されます。

ブレークポイント エディタを開くキーボード ショートカット

Ctrl+Alt+B または Command+Option+B(Mac): ソースパネルのエディタにフォーカス [Breakpoint Editor] を開きます。Breakpoint Editor を使用してログポイントを作成し、 条件付きブレークポイント

ブレークポイント エディタ。

図 4. ブレークポイント エディタ

[ネットワーク] パネルのプリフェッチ キャッシュ

リソースが読み込まれたときに [Network] パネルの [Size] 列に (prefetch cache) と表示されるようになりました プリフェッチキャッシュから キャッシュに保存されますプリフェッチは、後続のページの表示速度を上げるための新しいウェブ プラットフォーム機能です。 表示されます。[Can I use...] では、2019 年 7 月の時点で世界のブラウザの 83.33% でサポートされていると報告されています。

リソースがプリフェッチ キャッシュから取得されたことを示す [サイズ] 列。

図 5. [サイズ] 列には、prefetch2.htmlprefetch2.css の取得元が表示されます。 (prefetch cache)

プリフェッチのデモで試してみる。

Chromium の問題 #935267

オブジェクト表示時のプライベート プロパティ

コンソールのオブジェクト プレビューにプライベート クラスのフィールドが表示されるようになりました。

オブジェクトの検査時に、コンソールに「#color」などの非公開フィールドが表示されるようになりました。

図 6. 左側の Chrome の旧バージョンでは、#color これに対して右側の新しいバージョンは存在します。

[Application] パネルの通知とプッシュ メッセージ

[Application] パネルの [Background Services] セクションで、push メッセージと 通知。push メッセージは、サーバーが Service Worker に情報を送信したときに発生します。 通知は、Service Worker またはページのスクリプトがユーザーに情報を表示したときに発生します。

Chrome 76 のバックグラウンド フェッチおよびバックグラウンド同期機能と同様、 そのページのプッシュ通知と通知は、たとえそのページであっても、 Chrome を閉じても、閉じられます。

新しい [Notifications] ペインと [Push Messages] ペイン。

図 7. [Application] パネルの新しい [Push Messages] ペインと [Notifications] ペイン。

Chromium の問題 #927726

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

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

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

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

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

DevTools の新機能

DevTools の新機能」シリーズで紹介されているすべてのリスト。