このページは 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 を使って実際のユーザーインタラクションを測定しましょう。

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

コンソールでのライブ式

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

[Create Live Expression]（ライブ式を作成）アイコンをクリックします。Live Expression UI が開きます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デバッグの信頼性の向上

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

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

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

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

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

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

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

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

予測入力 UI

図 7. 予測入力 UI

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

AudioContext イベントで中断

AudioContext ライフサイクルイベントハンドラの最初の行で一時停止するには、[Event Listener Breakpoints] ペインを使用します。

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

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

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

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

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

子プロセスの検出とアタッチ
モジュールが必要な前にブレークポイントを配置する。
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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。