DevTools の新機能(Chrome 72)

Chrome 72 で導入される Chrome DevTools の新機能と主な変更点は次のとおりです。

リリースノートの動画版

パフォーマンス指標を可視化する

ページの読み込みを記録した後、DevTools の [タイミング] セクションで DOMContentLoadedFirst Meaningful Paint などのパフォーマンス指標がマークされるようになりました。

タイミング セクションの First Meaningful Paint

図 1. タイミング セクションの First Meaningful Paint

テキストノードのハイライト表示

DOM ツリーのテキストノードにカーソルを合わせると、ビューポート内のそのテキストノードがハイライト表示されます。

テキストノードのハイライト表示

図 2. テキストノードのハイライト表示

JS パスをコピー

(Puppeteer の page.click() 関数などを使用して)ノードをクリックする自動化テストを作成しているときに、その DOM ノードへの参照をすばやく取得したいとします。通常のワークフローとしては、[要素] パネルに移動し、DOM ツリー内のノードを右クリックして [コピー] > [セレクタをコピー] を選択し、その CSS セレクタを document.querySelector() に渡します。ただし、ノードが Shadow DOM 内にある場合、セレクタが Shadow ツリー内からパスを生成するため、このアプローチは機能しません。

DOM ノードへの参照をすばやく取得するには、DOM ノードを右クリックして、[Copy] > [Copy JS path] を選択します。DevTools が、ノードを指す document.querySelector() 式をクリップボードにコピーします。前述のように、これは Shadow DOM を使用する場合に特に便利ですが、任意の DOM ノードにも使用できます。

JS パスをコピー

図 3. JS パスをコピー

DevTools によって、次のような式がクリップボードにコピーされます。

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

監査パネルの更新

監査パネルで Lighthouse 3.2 が実行されるようになりました。バージョン 3.2 には、検出された JavaScript ライブラリという新しい監査が含まれています。この監査では、Lighthouse がページで検出した JS ライブラリが一覧表示されます。この監査は、レポートの [おすすめの方法] > [合格した監査] で確認できます。

検出された JavaScript ライブラリ

図 4. 検出された JavaScript ライブラリ

また、コマンド メニューから Lighthouse または PWA と入力して、[監査] パネルにアクセスできるようになりました。

コマンド メニューに「lighthouse」と入力する

図 5. コマンド メニューに lighthouse を入力する

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

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