DevTools の新機能（Chrome 70）

Kayce Basques

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

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

この記事を読み進めるか、またはこのドキュメントの動画版をご覧ください。

コンソールのライブ式

値をリアルタイムでモニタリングする場合は、ライブ式を Console の上部に固定します。

  1. [Create Live Expression] ライブ式を作成する をクリックします。ライブ エクスプレッションの UI が開きます。

    ライブ式の UI

    図 1. ライブ式の UI

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

    ライブ式 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 ツリーでノードをホバーするのと同じです。
  • $0: DOM ツリーで現在選択されているノードをハイライト表示します。
  • $0.parentElement: 現在選択されているノードの親をハイライト表示します。

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

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

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

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

デバッグの信頼性の向上

Chrome 70 では、ブレークポイントが消えたりトリガーされなかったりする原因となっていたバグを修正しました。

また、ソースマップに関するバグも修正されています。TypeScript の一部ユーザーは、コードをステップ実行する際に特定の TypeScript ファイルを無視するように DevTools に指示していましたが、代わりに、バンドルされた JavaScript ファイル全体が無視されていました。また、ソースパネルの動作が全体的に遅くなる問題も修正されています。

コマンド メニューからネットワーク帯域幅調整を有効にする

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

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

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

条件付きブレークポイントの自動入力

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

オートコンプリート UI

図 7. オートコンプリート UI

ご存じですか？ 予測入力 UI は、Google Play Console の基盤となっている CodeMirror によって実現しました。

AudioContext イベントでブレークする

[イベント リスナー ブレークポイント] ペインを使用して、AudioContext ライフサイクル イベント ハンドラの最初の行で一時停止します。

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

[イベント リスナー ブレークポイント] ペイン内の AudioContext イベント。

図 8. [イベント リスナー ブレークポイント] ペイン内の AudioContext イベント

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

ndb は、Node.js アプリケーション用の新しいデバッガです。ndb には、DevTools で利用できる通常のデバッグ機能に加えて、次の機能も用意されています。

  • 子プロセスの検出とアタッチ
  • モジュールの前にブレークポイントを配置する必要があります。
  • 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 の新機能、更新、その他のトピックについて話し合います。

DevTools の新機能

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