DevTools の新機能（Chrome 72）

Kayce Basques

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

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

これらのリリースノートの動画バージョン

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

ページ読み込みを記録した後、DevTools は DOMContentLoaded や タイミングセクションの First Meaningful Paint

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

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

DOM ツリーのテキストノードにカーソルを合わせると、そのテキストノードが 表示されなくなります。

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

JS パスをコピー

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

DOM ノードへの参照をすばやく取得するには、DOM ノードを右クリックして [コピー] を選択します。JS をコピー あります。DevTools で、クリップボードにコピーされるデータを参照する document.querySelector() 式が、 あります。前述のように、これは Shadow 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 ������力��て [Audits] パネルにアクセスできるようになりました。

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

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

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

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

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

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

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。