DevTools の新機能（Chrome 70）

Kayce Basques
Kayce Basques
X GitHub

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

Chrome 70 の DevTools に追加される新機能と主な変更点は次のとおりです。

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

コンソールのライブ式

値をリアルタイムでモニタリングしたい場合は、ライブ式をコンソールの最上部に固定します。

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

    ライブ式 UI

    図 1. ライブ式 UI

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

    ライブ式 UI に Date.now() と入力する。

    図 2. ライブ式 UI に Date.now() を入力する

  3. ライブ式 UI の外側をクリックして、式を保存します。

    保存されたライブ式。

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

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

先行評価中に DOM ノードをハイライト表示

コンソールで DOM ノードに評価される式を入力すると、事前評価によってビューポート内のノードがハイライト表示されるようになりました。

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

図 4. 現在の式はノードとして評価されるため、そのノードがビューポートでハイライト表示されます。

以下に、役立つ表現をいくつかご紹介します。

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

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

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

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

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

より信頼性の高いデバッグ

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

また、ソースマップに関連するバグも修正されています。TypeScript ユーザーがコードのステップ実行中に特定の TypeScript ファイルを無視するように DevTools に指示すると、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 では、パフォーマンスの記録の [ユーザー タイミング] セクションに、ユーザー タイミングの測定値が自動的にマークアップされます。

[User Timing] セクション。

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

これは、コードのデバッグや最適化を行う場合にも役立ちます。たとえば、ライフサイクルの特定のフェーズを最適化する場合は、ライフサイクル関数の最初と最後に window.performance.mark() を呼び出します。React は開発モードでこれを行います。

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

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

Chrome DevTools チームに問い合わせる

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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