DevTools の新機能（Chrome 70）

Kayce Basques
Kayce Basques

ご利用の再開ありがとうございます。前回の Chrome 68 の更新から約 12 週間が経過しました。スキップしました Chrome 69。これは、投稿に必要な新機能や UI の変更が十分でなかったためです。

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

本ドキュメントをお読みいただくか、以下の動画をご覧ください。

コンソールでのライブ式

Live Expression をコンソールの上部に固定すると、その値をリアルタイムでモニタリングできます。

  1. [Create Live Expression] をクリックします。 ライブ表現を作成。ライブ 式 UI が開きます。

    ライブ式 UI

    図 1. ライブ式 UI

  2. モニタリングする式を入力します。

    Live Expression UI に Date.now() を入力する。

    図 2. ライブ式 UI に「Date.now()」と入力すると、

  3. Live Expression UI の外側をクリックして、式を保存します。

    保存されたライブ式。

    図 3. 保存されたライブ式

ライブ式の値は 250 ミリ秒ごとに更新されます。

積極的評価で DOM ノードを強調

DOM ノードを評価する式をコンソールに入力し、[積極的な評価] をクリックします。 ビューポートでそのノードがハイライト表示されます

コンソール��「document.activeElement」と入力すると、ビューポートでノードがハイライト表示されます。

図 4. 現在の式はノードと評価されるため、そのノードは ビューポート

便利な式をいくつか紹介します。

  • document.activeElement: 現在フォーカスされているノードをハイライト表示します。
  • document.querySelector(s): 任意のノードをハイライト表示します。s は CSS セレクタです。この これは、[DOM Tree] のノードにカーソルを合わせるのと同じです。
  • $0: DOM ツリーで現在選択されているノードをハイライト表示します。
  • $0.parentElement: 現在選択されているノードの親をハイライト表示します。

パフォーマンス パネルの最適化

大きなページをプロファイリングすると、以前は [パフォーマンス] パネルでの処理と処理に数十秒かかっていた データを可視化します。[Summary] タブでイベントの詳細を確認するためにクリックする場合もあります。 読み込みに数秒かかっています。Chrome 70 では処理と可視化が高速になっています。

パフォーマンス データを処理して読み込みます。

図 5. パフォーマンス データの処理と読み込み

デバッグの信頼性の向上

Chrome 70 では、ブレークポイントが表示されなくなった、またはトリガーされなかった一部のバグが修正されました。

また、ソースマップに関連するバグも修正されます。一部の TypeScript ユーザーは、DevTools で 特定の TypeScript ファイルが使用され、DevTools は バンドルされた JavaScript ファイル全体を指定します。これらの修正により、[Sources] パネルの原因となっていた問題も解決されます。 通常は実行速度が遅くなります

コマンド メニューからネットワーク スロットリングを有効にする

コマンド メニューから、ネットワーク スロットリングを高速 3G または低速 3G に設定できるようになりました。

コマンド メニューのネットワーク スロットリング コマンド。

図 6. コマンド メニューのネットワーク スロットリング コマンド

予測入力の条件付きブレークポイント

Autocomplete UI を使用して、条件付きブレークポイント式をより速く入力できます。

予測入力 UI

図 7. 予測入力 UI

ご存じですか？ Autocomplete UI は、CodeMirror によって実現しました。CodeMirror は できます。

AudioContext イベントで中断

[Event Listener Breakpoints] ペインを使用して、AudioContext の最初の行で一時停止します。 使用することもできます。

AudioContext は、Web Audio API の一部で、音声の処理と合成に使用できます。

[Event Listener Breakpoints] ペインの AudioContext イベント。

図 8. [Event Listener Breakpoints] ペインの AudioContext イベント

ndb を使用して Node.js アプリをデバッグする

ndb は、Node.js アプリケーション用の新しいデバッガです。通常のデバッグ機能に加えて、 提供します。また、次のサービスも提供します。

  • 子プロセスの検出とアタッチ
  • モジュールが必要な前にブレークポイントを配置する。
  • DevTools UI 内でのファイルの編集。
  • デフォルトでは、現��の作業ディレクトリの外部にあるスクリプトをすべて無視します。

ndb UI。

図 9. ndb の UI

詳細については、ndb の README をご覧ください。

参考: User Timing API を使って実際のユーザー インタラクションを測定する

実際のユーザーがページ上でクリティカル ジャーニーを完了するまでにかかる時間を測定したい場合、検討事項 User Timing API を使用してコードをインストルメント化します。

たとえば、ユーザーがホームページをクリックする前に滞在した時間を測定するとします。 行動を促すフレーズ（CTA）ボタン。まず、カスタマー ジャーニーの ページ読み込みイベントに関連付けられたイベント ハンドラ（DOMContentLoaded など）:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

次に、ジャーニーの終点を指定し、ボタンがクリックされたときにレンタル時間を計算します。

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

測定値を抽出して分析サービスに送るのも簡単です。 匿名の集計データを収集する:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

DevTools では、ブラウザの [カスタム速度] セクションでカスタム速度の測定値が自動的にマークアップされます。 パフォーマンスの録画。

[カスタム速度] セクション。

図 10. [カスタム速度] セクション

これは、コードのデバッグや最適化を行う際にも便利です。たとえば、キャンペーンタイプを ライフサイクルの特定のフェーズで、コマンドの最初と最後に window.performance.mark() を呼び出します。 ライフサイクル関数があります。React は開発モードでこの処理を行います。

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

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

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

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

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

DevTools の新機能

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