DevTools の新機能（Chrome 72）

Kayce Basques

Chrome 72 で予定されている Chrome DevTools の新機能と主な変更点は次のとおりです。

• [パフォーマンス] パネルでパフォーマンス指標を可視化します。
• DOM ツリーでテキスト ノードをハイライト表示します。
• DOM ツリーから DOM ノードに JS パスをコピーします。
• [監査] パネルの更新: JS ライブラリを検出する新しい監査や、コマンド メニューから [監査] パネルにアクセスするための新しいキーワードなど。

このリリースノートの動画版

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

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

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

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

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

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

JS パスをコピー

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

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

図 3. JS パスをコピー

DevTools は、次のような式をクリップボードにコピーします。

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

監査パネルの更新

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

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

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

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

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

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

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、更新、その他のトピックについて話し合います。

• フィードバックや機能リクエストは crbug.com から送信してください。
• DevTools で more_vert [その他] > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。