DevTools の新機能(Chrome 72)

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

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

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

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

タイミングセクションの 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 を扱う際に特に便利ですが、 指定することもできます。

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

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

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

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

DevTools の新機能

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