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

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

What's New In DevTools (Chrome 72)

• パフォーマンス指標のビジュアル化
• テキストノードをハイライト表示
• Shadow DOMに役立つ「Copy JS path」
• JavaScriptライブラリの検出
• 動画バージョン

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

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

TimingsセクションのFMP

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

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

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

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

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

Shadow DOMに役立つ「Copy JS path」

Puppeteerのpage.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

動画バージョン

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