DevTools Digest(CDS Edition): 将来像と RAIL プロファイリング

DevTools の常時オンの効率化された新しい Device Mode のモバイル ファースト化について説明します。色ボタンを使用すると、セレクタに色をすばやく追加したり、DevTools の新機能を確認したりできます。

著者の未来に迫る

先日 Chrome Dev Summit を終えたばかりで、現在と将来の DevTools の活用方法をご紹介しました。このダイジェストでは、試験運用中の機能や大幅な進展については通常言及していませんが、今回は例外として扱います。講演全体を視聴する時間がない場合は、このコースの要点をご覧ください。

デバイスモード バージョン 2

Google は、Device Mode のこの新しい、大胆な新機能の開発に引き続き取り組んでいますが、すべてのお客様にお試しいただけるよう、このたび Canary 版を有効にしました。今回の変更により、Google は、モバイル開発がデフォルト、デスクトップ開発が「アドオン」となるモバイル ファーストの未来に向けて DevTools を進化させています。今後数週間かけてイテレーションを行い、その後のブログ投稿で詳細をお知らせします。

高度なアニメーション検査

開発中のアニメーション検査により、何が動いているのかを全体的かつ詳細に把握できます。一度に 1 つの要素の遷移を示すのではなく、複雑なアニメーションをグループ化するヒューリスティックが追加され、表示中のすべての要素に集中できるようになりました。動画をご覧ください。完全にリリースしたら、大きな単独のブログ投稿でお知らせします。

レイアウト モード(プレビュー)

まだゴールはできませんが、新しいレイアウト モードはかなり有望な機能です。この機能は完全に完成することを楽しみにしています。レイアウト モードでは、ページ上のすべての要素に対して WYSIWYG 編集機能が DevTools に追加されます。現時点では、高さ、幅、パディング、マージンをコンテキスト内で編集できます。準備が整うまで少し時間がかかる場合がありますが、最新情報が入り次第お知らせいたします。

更新された [タイムライン] パネルによるパフォーマンス プロファイリング

新しい RAIL パフォーマンス モデルの導入に向けた大規模な取り組みの一環として、[Timeline] パネルに多数の小規模な変更や大規模な変更が加えられ、それらが一体となってパフォーマンス プロファイリングのストーリーが大きく変化、改善されました。そこで、個々の変更を個別に紹介するのではなく、Google の Paul Irish が、ステージで稼働しているサイト(この例では Hotel Tonight のモバイルサイト)のパフォーマンスを適切にデバッグする方法を紹介してくれました。新たに発表された機能には、読み込みとパフォーマンスのフィルム ストリップ含まれるネットワークのウォーターフォールツリービューの概要ドメインとファイル別のパフォーマンス費用を表示する機能などがあります。

任意の要素に前景色と背景色を簡単に追加

背景色や色のプロパティを要素に追加する場合、カラー選択ツールを開くだけでは不十分です。代わりに、「背景: 赤」などと入力するたびにカラー選択ツール アイコンが表示されます。次に実際の色を選択します。

これを簡略化できると考えたのです。セレクタの右下にカーソルを合わせると表示される便利なボタンが 2 つ追加され、ワンクリックで色を追加して選択ツールを表示できるようになりました。

その他の主なメリット

  • 汎用的なメディアタイプを表示することで、これまでのスタイルパネルの多くのスペースが無駄になっていました。異常でなければ、セレクタに表示される情報を非表示にしました。
  • スタイルパネルで CSS セレクタにカーソルを合わせると、そのセレクタが適用されるページ上の要素の数を確認できるようになりました。
  • まだ印刷をやり遂げていませんか?印刷されたページがどのように見えるかを確認するための印刷メディア エミュレーションも引き続きご利用いただけます。[レンダリング設定] に移動しました。
  • 検査する要素を選択する際に、自動的に展開され、関連する DOM サブツリーが閉じるようになりました。説明しづらいですが、見ることは信じています

いつものように、Twitter または以下のコメントでご意見をお寄せください。また、バグについては crbug.com/new までお送りください。

来月まで!
Paul Bakaus、DevTools チーム