DevTools でよりスマートなコンソールのオートコンプリートを使用して入力を減らす方法、スタイルペインで直接 @keyframe
ルールを編集する方法、CSS カスタム変数の使い方、ダークサイドに参加する方法について学びます。
コンソールのオートコンプリート機能を強化
私や他の多くの人と同様に、コンソールにコマンドを入力してアプリをデバッグし、うまくいっていないのを確認して、イテレーションして何度も入力します。そこで、以前入力した文章を次のようにオートコンプリートするようになりました。
[スタイル] ペインで @keyframe ルールを直接編集する
DevTools にアニメーション インスペクタとイージング エディタを導入した際、[Style] ペインに @keyframe
ベースの CSS アニメーションを表示しないのはトランジションに限られていました。それはもう過去の話です。積極的になりましょう!動画のツイートでプレビューをご覧ください。
カスタム CSS プロパティのサポート
CSS には多くの便利な機能が導入されており、その一つがカスタム変数です(Chrome 49 でリリース予定)。DevTools にはフルサポートが含まれているので、これまで Sass で変数を使用したことがある方は、ネイティブ変数をお試しください。[Styles] ペインですぐにプロパティを編集し、依存する要素をすぐに更新できるためです。
DevTools のダークモード
ついに、この数年で何十回も寄せられたリクエストにお応えしました。「DevTools でダークサイドを選択できるようになりました。DevTools の設定に移動し、テーマをダークに設定してお楽しみください。多くの機能は自動生成されるため、まだベータ版ですので、改善の余地がある部分がございましたらぜひお知らせください。
その他の主なメリット
- [コンソール] タブ全体をクリックすると、コンソール ドロワーが自動的に折りたたまれるようになりました。
- [ソース] のファイルツリーを全面的に見直し、新しいアイコンと新しいグループ化機能を追加しました。
いつものように、Twitter または以下のコメントでご意見をお寄せください。また、バグについては crbug.com/new までお送りください。
来月まで!
Paul Bakaus、DevTools チーム