Chrome 70 デベロッパーツールが便利になってる！Web制作者がチェックしておきたい新機能のまとめ

10月16日にリリースされたChromeではログインしただけで勝手に設定が同期される機能が改善され、新機能として指紋認証、PWAのサポート、非HTTPSページで「保護されていない通信」がレッドに表示されるようになりました。

デベロッパーツールも同時にアップデートされ、その新機能はWeb制作がより捗る便利なものばかりです。

What's New In DevTools (Chrome 70)

• Live Expression機能
• DOMノードの強調表示
• パフォーマンスパネルの最適化
• 信頼性の高いデバッグ
• コマンドメニューでNetworkのスロットを設定
• 条件付きブレークポイントのオートコンプリート
• AudioContextイベントの停止
• ndbを使ってNode.jsアプリのデバッグ
• 実際のユーザーとのやりとりを測定する「User Timing API」

Live Expression機能

Consoleで値をリアルタイムに監視したい場合、Live Expression機能で表示することができます。

Live Expression機能

1. Consoleタブを選択し、「Create Live Expression」アイコンをクリック。
2. 監視する式を入力。
3. Live Expression UIの外側をクリックして式を保存します。

値は250ミリ秒ごとに更新されます。

DOMノードの強調表示

ConsoleのDOMノードに評価される式を入力すると、そのノードをEager Evaluationでビューポートにハイライト表示するようになりました。

DOMノードの強調表示

1. Consoleタブを選択。
2. DOMノードに評価される式を入力。

入力する式

以下の便利な式を使用できます。

• 「document.activeElement」で、現在フォーカスのあるノードを強調表示。
• 「document.querySelector(s)」で、任意のノードを強調表示。sはCSSセレクタで、DOMツリー内のノード上をホバリングするのと同じ。
• 「$0」で、DOMツリーで現在選択されているノードを強調表示。
• 「$0.parentElement」で、現在選択されているノードの親を強調表示。

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

今までのパフォーマンスパネルは大きなページをプロファイリングする際にはデータの処理とビジュアル化に時間がかかりました。Chrome 70ではこの処理とビジュアル化が高速になりました。

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

信頼性の高いデバッグ

Chrome 70では、ブレークポイントが消える、トリガされないなど、いくつかのバグが修正されています。

ソースマップに関連するバグも修正されています。TypeScriptユーザーはコードをステップを実行しながら、デベロッパーツールにTypeScriptファイルをブラックボックス化するよう指示し、代わりにデベロッパーツールはバンドルされたJavaScriptファイル全体をブラックボックスにします。
また、Sourcesパネルがゆっくり実行される問題も修正されています。

コマンドメニューでNetworkのスロットを設定

コマンドメニューでNetworkのスロットを高速3Gや低速3Gに設定できるようになりました。

コマンドメニューでNetworkのスロットを設定

• コマンドメニュー（command+shift+P）を開く。
• 「throttling」（throくらいで表示される）を入力。

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

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

ブレークポイントの式を簡単入力

AudioContextイベントの停止

Event Listener Breakpointsパネルで、AudioContextのイベントハンドラを一時停止します。

AudioContextイベントの停止

1. Sourcesタブを選択。
2. 拡張からEvent Listener Breakpointsパネルを開く。

ndbを使ってNode.jsアプリのデバッグ

ndbはNode.jsアプリケーション用の新しいデバッガです。 デベロッパーツールの通常のデバッグ機能に加えて、ndbには次の機能があります。

• 子プロセスの検出と添付。
• モジュールの前にブレークポイントを配置。
• デベロッパーツールUI内のファイルの編集。
• 現在の作業ディレクトリ外にあるすべてのスクリプトをブラックボックス化。

ndb -GitHub

実際のユーザーとのやりとりを測定する「User Timing API」

User Timing APIを使用すると、実際のユーザーがあなのたページでタスクを完了するのにかかる時間を測定することができます。

例えば、行動を促すボタンをクリックするまでに、ユーザーがページ上で費やした時間を測定するとします。まず、DOMContentLoadedなどのページ・ロード・イベントに関連付けられたイベント・ハンドラで、移動の開始をマークします。

次に、移動の終了をマークし、ボタンがクリックされたときの継続時間を計算します。

これで測定値を抽出し、分析して、匿名の集計データを収集することができます。

デベロッパーツールでは、パフォーマンスレコーディングのUser Timingセクションで測定値を自動的にマークアップします。

User Timingセクション

この機能はコードのデバッグや最適化の際にも便利です。例えば、ライフサイクルの特定のフェーズを最適化する場合、ライフサイクル機能の開始時と終了時にwindow.performance.mark()を呼び出します。Reactではこれをdevelopmentモードで行います。