常にオンの新しい Device Mode を導入し、DevTools をモバイル ファーストに進化させる方法を学びます。カラーボタンを使用してセレクタに色をすばやく追加し、DevTools の今後の機能を確認できます。
コンテンツ作成の未来
Chrome Dev Summit から帰ってきたばかりです。そこでは、現在の DevTools と今後の DevTools の使用方法についてお話ししました。通常、このダイジェストでは、まだ試験運用版である機能や、開発が進んでいる機能については言及しませんが、今回は例外とします。講演の全編を視聴する時間がない場合は、要点を以下にまとめます。
デバイスモード バージョン 2
デバイスモードのこの新しい大胆なイテレーションを現在も懸命に開発していますが、皆様にお試しいただけるよう、本日 Canary で有効にしました。この変更により、DevTools はモバイルファーストの未来へと進みます。モバイル開発がデフォルトになり、パソコン開発が「アドオン」になります。今後数週間かけてさらに反復処理を行い、完了したら詳細なブログ投稿でお知らせします。
強力なアニメーション検査
現在開発中のアニメーション検査では、動いているオブジェクトの詳細な状況を把握できます。1 つの要素の遷移を一度に表示するのではなく、複雑なアニメーションをグループ化するヒューリスティクスを追加しました。これにより、表示されているすべての要素に集中できます。動画をご覧ください。リリースが完了しましたら、より詳細なスタンドアロンの投稿を公開します。
レイアウト モード（プレビュー）
まだ完成には至っていませんが、非常に期待できる新機能として、新しいレイアウト モードがあります。この機能が完全に構築されるのが待ち遠しいです。レイアウト モードでは、ページ上の任意の要素に対して DevTools に WYSIWYG 編集機能が追加されます。現時点では、高さ、幅、パディング、余白はコンテキスト内で編集できます。ご利用いただけるようになるまでもうしばらくお待ちください。最新情報をお知らせいたします。
更新されたタイムライン パネルによるパフォーマンス プロファイリング
新しい RAIL パフォーマンス モデルの導入の一環として、タイムライン パネルに大小数百もの変更が加えられました。これらの変更により、パフォーマンス プロファイリングの機能が大幅に改善されています。そのため、個々の変更を個別に示すのではなく、Google の Paul Irish が、サイトのパフォーマンス（この場合は Hotel Tonight のモバイルサイト）を適切にデバッグする方法を実演しました。新たに発表された機能には、読み込みとパフォーマンスのフィルムストリップ、ネットワーク ウォーターフォール、ツリービューの概要、ドメインとファイルごとのパフォーマンス コストの表示機能などがあります。
任意の要素に前景色と背景色を簡単に追加
要素に background-color プロパティや color プロパティを追加する際に、色選択ツールを開くだけではいけませんでした。ほとんどの方は、毎回「background: red;」などと入力してカラー選択ツールのアイコンを表示し、目的の色を選択していると思います。
これを簡素化できないかと考えました。セレクタの右下をホバーすると表示される便利なボタンを 2 つ追加しました。これにより、色を追加したり、ワンクリックで選択ツールを表示したりできるようになりました。
その他のおすすめ
- これまでは、汎用メディアタイプを表示することで、スタイルパネルのスペースを無駄にしていました。通常でない場合は、セレクタの前に非表示になります。
- スタイルパネルで CSS セレクタを長押しすると、ページ上のどの要素に適用されているかを確認できるようになりました。
- まだ印刷を諦めていない場合は、印刷メディア エミュレーションは引き続き使用でき、ページが印刷されたときの外観を確認できます。この機能はレンダリング設定に移動されました。
- 検査する要素を選択すると、関連する DOM サブツリーが自動的に開閉されるようになりました。説明するのは難しいですが、百聞は一見にしかずです。
いつものように、Twitter または以下のコメント欄からご意見をお寄せください。バグは crbug.com/new に送信してください。
来月まで
Paul Bakaus と DevTools チーム