DevTools の新機能(Chrome 77)

要素のスタイルをコピー

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

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

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

インスピレーションを与えてくれた Adam ArgyleVisBug に感謝します。

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

お気に入りのウェブサイトでニュース記事を読んでいるとしたら、ページを読み進めていると コンテンツが次から次へと回っているのでこの問題はレイアウト シフトと呼ばれます。通常は、画像や広告の読み込みが完了したときに発生します。このページには画像と広告用のスペースが予約されていないため、ブラウザはそれらすべてのスペースを空けるために他のすべてのコンテンツを下に移動する必要があります。この問題を解決するには、placeholdersを使用します。

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

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

レイアウト シフト。

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

Chromium の問題 #961846

[監査] パネルの Lighthouse 5.1

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

  • 有効な apple-touch-icon を指定している。iOS のホーム画面に PWA を追加できることを確認します。
  • リクエスト数とファイルサイズを小さくする。ドキュメント、スクリプト、スタイルシート、画像など、さまざまなカテゴリについて、ネットワーク リクエストの合計数とファイルサイズを報告します。
  • Maximum Potential First Input Delay。ユーザーによる最初のページ操作から、その操作に対するブラウザのレスポンスまでに想定される最大時間を測定します。この指標は、推定入力レイテンシの指標に代わるものです。初回入力候補の最大遅延は、パフォーマンス カテゴリのスコアには考慮されません。

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

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

Lighthouse 5.1 の Node および CLI バージョンには、確認に値する新しい主要機能が 3 つあります。

  • パフォーマンス バジェット。時間の経過とともにサイトが機能しなくなるのを防ぐには、ページあたりのリクエスト数とファイルサイズを指定します。
  • プラグイン。独自のカスタム監査で Lighthouse を拡張できます。
  • スタックパック。特定の技術スタックに合わせた監査を追加します。先にリリースされたのは WordPress Stack Pack ですReact と AMP スタックパックは現在開発中です。

OS テーマの同期

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

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

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

Breakpoint Editor。

図 4. Breakpoint Editor

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

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

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

図 5. [Size] 列には、prefetch2.htmlprefetch2.css(prefetch cache) から取得されたことが示されます。

試してみるには、プリフェッチのデモをご覧ください。

Chromium の問題 #935267

オブジェクトを表示する際のプライベート プロパティ

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

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

図 6. 左側の Chrome の古いバージョンでは、オブジェクトの検査時に #color フィールドは表示されませんが、右側の新しいバージョンでは表示されます。

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

[Application] パネルの [バックグラウンド サービス] セクションで、プッシュ メッセージと通知がサポートされるようになりました。プッシュ メッセージは、サーバーが Service Worker に情報を送信するときに行われます。通知は、Service Worker またはページ スクリプトがユーザーに情報を表示したときに発生します。

Chrome 76 のバックグラウンド取得とバックグラウンド同期の機能と同様に、記録を開始すると、このページを閉じた状態や Chrome を閉じている場合でも、このページのプッシュ メッセージと通知は 3 日間記録されます。

新しい [通知] ペインと [プッシュ メッセージ] ペイン。

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

Chromium の問題 #927726

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

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

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

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

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

DevTools の新機能

DevTools の新機能シリーズで取り上げたすべての内容の一覧。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59