DevTools の新機能（Chrome 58）

ケイス・バスクス
Kayce Basques
Twitter GitHub Glitch

DevTools リリースノートのパート 1 へようこそ。これ以降、Chrome の新しいバージョンを初めて開くと、DevTools によって [新機能] ドロワーが開き、そのバージョンのリリースノートへのリンクが表示されます。

特長

  • [タイムライン] パネルの名前が [パフォーマンス] パネルに変更されました。
  • プロファイル パネルの名前が [メモリ] パネルに変更されました。
  • Cookie の値が編集できるようになりました。
  • DevTools は、メモリ不足エラーが発生する前に自動的に一時停止するようになりました。

新しい機能と特長

編集可能な Cookie

[Cookie] タブでセルをダブルクリックして、値を編集します。

Cookie の編集。
図 1. Cookie の編集

ご協力いただいた kdzwinel に感謝いたします。

[Styles] ペインでの検査と編集が可能な CSS 変数

[Styles] ペインで CSS 変数を検査および編集できるようになりました。実際に試すには、CSS 変数のデモをご覧ください。

メモリ不足ブレークポイント

アプリが短期間に大量のメモリを割り当てると、DevTools が自動的に一時停止してヒープ上限を増やすようになりました。これにより、ヒープを検査し、コンソールでコマンドを実行してメモリを解放し、問題のデバッグを続行できます。詳しくは、Chrome では 1 つの小さなステップ、V8 では One Giant Heap をご覧ください。

メモリ不足ブレークポイントで一時停止しました
図 2. メモリ不足ブレークポイントで一時停止

キャンバス作成時のブレークポイント

新しいキャンバス コンテキストが作成されるたびにトリガーされるイベント リスナー ブレークポイントを作成できるようになりました。

[Event Listener Breakpoints] ペインの [Create canvas context] チェックボックスを介したキャンバス作成ブレークポイント
図 3. [Event Listener Breakpoints] ペインの [Create canvas context] チェックボックスを介したキャンバス作成ブレークポイント

[タイミング] タブの開始時間の統計情報

[Timing] タブの上部で、リクエストがキューに追加され、いつ開始されたかを確認できます。

[タイミング] タブの開始時間の統計情報。
図 4. [タイミング] タブの開始時間の統計情報

[Timing] タブのサーバー統計情報

[速度] タブにカスタム サーバー統計情報を挿入できるようになりました。例については、サーバー速度の値のデモをご覧ください。

[Timing] タブのサーバー統計情報
図 5. [Timing] タブのサーバー統計情報

ご協力いただいた sroussey に感謝いたします。

変化あり

[タイムライン] パネルは [パフォーマンス] パネルになりました

用途を正確に反映するため、[タイムライン] パネルの名前が [パフォーマンス] パネルに変更されました。

[プロファイル] パネルは [メモリ] パネルになりました

用途がわかりやすくなるように、[プロファイル] パネルの名前が [メモリ] パネルに変更されました。

CPU Profiler は非表示のパネルの背後にあります

[プロファイル] パネルは [メモリ] パネルと呼ばれるようになったため、このパネルに CPU Profiler を配置しても意味がありません。さらに、長期的な目標は、パフォーマンス パネルからすべてのユーザーのプロファイリングを取得することです。それまでの間は、[Settings] > [More Tools] > [JavaScript Profiler] から古い CPU Profiler にアクセスできます。

パフォーマンス パネルで CPU をプロファイリングする方法については、Chrome DevTools: Chrome 58 の JavaScript CPU プロファイリングをご覧ください。

新しいコンソール UI

コンソール パネルとドロワーで、一部の UI が変更されました。一部の一般的でない機能は非表示の場所に移動され、人気のある機能にアクセスしやすくなっています。

  • コンソール設定 コンソールの設定 をクリックして、コンソールの動作をカスタマイズするための設定にアクセスします。
  • [ログを保持] が [コンソールの設定] で非表示になりました。
  • [フィルタ] ボタンとペインが消えました。代わりにプルダウン メニューを使用してください。
  • ログをフィルタするためのテキスト ボックスが常に表示されるようになりました。これは、以前は [フィルタ] ペインで非表示になっていました。
  • フィルタリング用のテキスト ボックスは自動的に正規表現を受け入れるため、[Regex] チェックボックスは表示されなくなります。
  • [違反を非表示] チェックボックスが消えました。ロギングレベルのプルダウンを [Verbose] に設定して、違反を確認します。
  • 古い UI で [Show all messages] チェックボックスをオフにすることは、新しい UI では [Console Settings] で [Selected context only] チェックボックスをオンにすることと同じです。
新しいコンソール UI
図 6. 新しいコンソール UI

WebGL イベント リスナー ブレークポイントが移動しました

WebGL のイベント リスナー ブレークポイントは、WebGL カテゴリから Canvas カテゴリに移動しました。WebGL カテゴリは削除されました。