このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 72）

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

JS パスをコピー

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

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

JS パスをコピー

図 3. JS パスをコピー

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

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

監査パネルの更新

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

検出された JavaScript ライブラリ

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

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

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

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

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。