このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 70）

Kayce Basques

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

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

コンソールのライブ式。
積極的な評価で DOM ノードを強調する。
パフォーマンスパネルの最適化。
デバッグの信頼性の向上。
コマンドメニューからネットワークスロットリングを有効にする。
条件付きブレークポイントのオートコンプリート。
AudioContext イベントでブレークする。
ndb を使用して Node.js アプリをデバッグする。
ボーナスヒント: User Timing API を使用して実際のユーザー操作を測定する。

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

コンソールのライブ式

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

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

図 1. ライブ式の UI
モニタリングする式を入力します。

図 2. ライブ式 UI に Date.now() を入力する
Live Expression UI の外側をクリックして、式を保存します。

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

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

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

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

注: ハイライト表示されたノードは、入力したときにのみ更新されます。一定の間隔で更新されることはありません。たとえば、フォーカスされている要素を追跡する document.activeElement を入力してから、ページをタブで移動しても、DevTools では最初に式を入力したときにアクティブだったノードがハイライト表示されます。

コンソールに 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 の新機能、更新、その他のトピックについて話し合います。

フィードバックや機能リクエストは、crbug.com からお送りください。
DevTools の [] > [その他のオプション] > [ヘルプ] > [DevTools の問題を報告する] を使用して、DevTools の問題を報告します。
@ChromeDevTools にツイートします。
DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。