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

DevTools の新機能（Chrome 70）

Kayce Basques

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

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

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

この文書をお読みいただくか、こちらの動画をご覧ください。

コンソールでのライブ式

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

[Create Live Expression]（）をクリックします。Live Expression UI が開きます。

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

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

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

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

積極的な評価で DOM ノードをハイライト表示する

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

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

コンソールで「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 ファイル全体を無視するようにします。これらの修正は、[ソース] パネルの動作が通常遅くなる原因となっていた問題にも対処しています。

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

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

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

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

条件付きブレークポイントのオートコンプリート

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

オートコンプリート UI

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

ご存じですか？ Autocomplete UI を作成できたのは、コンソールも機能している 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 の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。