DevTools の新機能（Chrome 70）

Kayce Basques

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

Chrome 70 の DevTools の新機能と主な変更点は次のとおりです。

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

コンソールのライブ式

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

  1. [ライブ エモーションを作成] ライブ式を作成する をクリックします。ライブ エクスプレッションの 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. コマンド メニューのネットワーク スロットリング コマンド

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

オートコンプリート UI を使用して、条件付きブレークポイント式をすばやく入力できます。

オートコンプリート UI

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

ご存じですか？ 自動入力 UI は 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 の新機能シリーズで取り上げられたすべての内容のリスト。