DevTools が、常に有効になった効率的な新しい Device Mode でどのようにモバイル ファーストに移行したかをご紹介します。色ボタンを使用して、セレクタにすばやく色を追加したり、DevTools に間もなく導入される機能を確認したりできます。
オーサリングの未来を垣間見る
Chrome Dev Summit で、現在と今後の DevTools の使い方を説明しました。このダイジェストでは、まだ試験運用中の機能や大きな進歩がある機能について、通常は触れませんが、今回は例外を設けます。全編を視聴する時間がない場合は、こちらが要点です。
デバイスモード バージョン 2
Google は、このデバイスモードの大胆な新機能の開発に積極的に取り組んでいますが、皆様にお試しいただけるよう、本日よりお客様の Canary でこの機能を有効にしました。この変更により、Google は DevTools をモバイルファーストの未来へと押し上げます。モバイル開発がデフォルト、デスクトップ開発が「アドオン」となります。今後数週間でさらにイテレーションを行い、作業終了後はブログ投稿を延長します。
強力なアニメーション検査
進行中のアニメーション検査では、動作しているものについて、全体的かつ詳細に把握することができます。一度に 1 つの要素に対する遷移を表示する代わりに、複雑なアニメーションをグループ化するヒューリスティックを追加して、表示されているすべての要素に集中できるようにしました。動画をご覧ください。全面的なリリースが始まりましたら、より大規模な独立したブログ投稿を公開する予定です。
レイアウト モード（プレビュー）
まだゴールデンタイムにはなっていませんが、非常に有望なのは、新しいレイアウト モードです。この機能が完全に構築されるのを楽しみにしています。レイアウト モードでは、ページ上の任意の要素に対して、WYSIWYG 編集機能が DevTools に追加されます。ここまでは、高さ、幅、パディング、マージンを状況に応じて編集できます。実際にお試しいただけるようになるまでもう少し時間がかかりそうですが、新しい情報が入り次第お知らせいたします。
更新された [タイムライン] パネルを使用したパフォーマンス プロファイリング
新しい RAIL パフォーマンス モデルの導入をさらに推進する一環として、[Timeline] パネルに多数の小さな変更が加えられました。これらの変更によってパフォーマンス プロファイリングが大幅に改善されました。そこで、個々の変更を個別に紹介するのではなく、Paul Irish がサイトのパフォーマンスを適切にデバッグする方法を紹介してくれました。この例では、Hotel Tonight のモバイルサイトがステージ上で公開されています。新たに発表された機能には、読み込みとパフォーマンスのフィルム ストリップ、含まれるネットワーク ウォーターフォール、ツリービュー サマリー、ドメインとファイルごとのパフォーマンス費用を表示する機能が含まれます。
任意の要素に前景色と背景色を簡単に追加する
要素に背景色や色のプロパティを追加しようとするたびに、カラー選択ツールを開くだけでは不十分でした。ほとんどの場合、ほとんどの場合、「background: red;」のように入力するたびにカラー選択ツールのアイコンが表示され、希望する色を選択します。
これを単純化すればよいと考えました。セレクタの右下にカーソルを合わせると表示される便利なボタンを 2 つ追加しました。これにより、ワンクリックで色を追加して選択ツールを表示できるようになりました。
その他のおすすめ
- これまでは、スタイルパネルに汎用メディアタイプを表示させることで、表示スペースを大幅に無駄にしていました。不審な操作ではない場合、セレクタの前にそれらの項目が非表示になるようになりました。
- スタイルパネルで CSS セレクタにカーソルを合わせると、適用されているページ上の要素の数を確認できるようになりました。
- まだ印刷を諦めていませんか？印刷メディア エミュレーションは、ページが印刷されたときにどのように見えるかを確認するためのもので、表示設定に移動しました。
- 検査する要素を選択する際、関連する DOM サブツリーが自動的に展開され、閉じられるようになりました。説明するのは難しいですが、見ることは「信じる」ことです。
いつものように、Twitter または以下のコメントを通じてご意見をお寄せください。バグについては crbug.com/new にお寄せください。
どうぞよろしくお願いいたします。
Paul Bakaus、DevTools チーム