DevTools の新機能（Chrome 58）

Kayce Basques

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

特長

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

新しい機能と特長

編集可能な Cookie

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

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

kdzwinel の協力に感謝します。

[スタイル] ペインでの、確認と編集が可能な CSS 変数

[スタイル] ペインで CSS 変数の検証と編集ができるようになりました。実際に試すには、CSS 変数のデモをご覧ください。

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

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

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

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

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

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

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

[Timing] タブの上部で、リクエストがキューに追加され、開始されたタイミングを確認できるようになりました。

[Timing] タブの開始時間の統計情報。
図 4. [Timing] タブの開始時間の統計情報

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

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

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

sroussey の貢献に感謝いたします。

変更回数

[タイムライン] パネルを [パフォーマンス] パネルに変更しました

[タイムライン] パネルの名前を [パフォーマンス] パネルに変更しました。

[Profiles] パネルを [Memory] パネルに変更

[Profiles] パネルの名前を [Memory] パネルに変更しました。

非表示のパネルの背後に CPU Profiler がある

[Profiler] パネルの名前が [Memory] パネルに変わり、このパネルに CPU Profiler を配置しても意味がなくなります。さらに、長期的な目標は、[パフォーマンス] パネルですべてのユーザーのプロファイリングを取得することです。それまでの間は、[設定] > [その他のツール] > [JavaScript プロファイラ] から古い CPU プロファイラにアクセスできます。

[Performance] パネルで CPU をプロファイリングする方法については、Chrome DevTools: JavaScript CPU Profiling in Chrome 58 をご覧ください。

新しいコンソール UI

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

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

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

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