Web制作に役立つ、Chrome 72 デベロッパーツールの新機能のまとめ

先週の1/29にリリースされたChrome 72に伴い、デベロッパーツールも新機能がアップデートされました。Web制作に役立つ新機能を紹介します。

サイトのキャプチャ

What's New In DevTools (Chrome 72)

パフォーマンス指標のビジュアル化

ページのロードを記録した後、DOMContentLoadedやFirst Meaningful PaintのようなパフォーマンスメトリックをTimingsセクションにマークするようになりました。

デベロッパーツールのキャプチャ

TimingsセクションのFMP

  1. Performanceパネルに移動。
  2. Recordボタンをクリックして、ロードを記録。
  3. Timingsセクションを展開。

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

DOMツリーでテキストノードをホバーすると、ビューポートでそのテキストノードをハイライト表示します。

デベロッパーツールのキャプチャ

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

  1. Elementsパネルに移動。
  2. DOMツリーを展開して、テキストノードをホバー。

Shadow DOMに役立つ「Copy JS path」

Puppeteerpage.click()を使用して、ノードをクリックする自動テストを書き、DOMノードへの参照を素早く取得したいとします。今までのワークフローでは、Elementsパネルに移動し、DOMツリー内のノードを右クリックしてCopy > Copy selectorを選択し、そのCSSセレクタをdocument.querySelector()に渡していたと思います。しかし、ノードがShadow DOM内にある場合は、セレクタがShadow ツリー内からのパスを生成するため、この方法は機能しません。

新しいデベロッパーツールでは、DOMノードへの参照をすばやく取得するには、DOMノードを右クリックしてCopy > Copy JS pathを選択します。これでノードを指すdocument.querySelector()式をコピーできます。この方法は、Shadow DOMで特に役立ちますが、どのDOMノードでも使用できます。

デベロッパーツールのキャプチャ

Shadow DOM内にも対応

  1. Elementsパネルに移動。
  2. DOMツリーを展開して、ノードをクリック。
  3. Copy > Copy JS pathを選択。

以下のような式をクリップボードにコピーします。

JavaScriptライブラリの検出

Auditsパネルは今回のアップデートで、Lighthouse 3.2をサポートしました。3.2では、Detected JavaScriptライブラリと呼ばれる新しい監査が含まれています。この監査は、Lighthouseがこのページで検出したJavaScriptライブラリを検出します。

デベロッパーツールのキャプチャ

JavaScriptライブラリを検出

  1. Auditsパネルに移動し、auditsを実行。
  2. Best Practices内のPassed auditsを展開。
  3. Detected JavaScript librariesを参照。

コマンドメニューに対応したので、「Lighthouse」または「PWA」で、Auditsパネルにアクセスすることができます。

デベロッパーツールのキャプチャ

PWAと入力するだけでOK

動画バージョン

アップデートの内容は動画で見ることもできます。

sponsors

top of page

©2019 coliss