DevTools がダークに、@keyframe の編集、よりスマートなオートコンプリートが使用可能に

DevTools でよりスマートなコンソールのオートコンプリートを使用して入力を減らす方法、スタイルペインで直接 @keyframe ルールを編集する方法、CSS カスタム変数の使い方、ダークサイドに参加する方法について学びます。

コンソールのオートコンプリート機能を強化

私や他の多くの人と同様に、コンソールにコマンドを入力してアプリをデバッグし、うまくいっていないのを確認して、イテレーションして何度も入力します。そこで、以前入力した文章を次のようにオートコンプリートするようになりました。

オートコンプリート

[スタイル] ペインで @keyframe ルールを直接編集する

DevTools にアニメーション インスペクタとイージング エディタを導入した際、[Style] ペインに @keyframe ベースの CSS アニメーションを表示しないのはトランジションに限られていました。それはもう過去の話です。積極的になりましょう!動画のツイートでプレビューをご覧ください。

カスタム CSS プロパティのサポート

DevTools のカスタム CSS プロパティ

CSS には多くの便利な機能が導入されており、その一つがカスタム変数です(Chrome 49 でリリース予定)。DevTools にはフルサポートが含まれているので、これまで Sass で変数を使用したことがある方は、ネイティブ変数をお試しください。[Styles] ペインですぐにプロパティを編集し、依存する要素をすぐに更新できるためです。

DevTools のダークモード

ダークモードの動作

ついに、この数年で何十回も寄せられたリクエストにお応えしました。「DevTools でダークサイドを選択できるようになりました。DevTools の設定に移動し、テーマをダークに設定してお楽しみください。多くの機能は自動生成されるため、まだベータ版ですので、改善の余地がある部分がございましたらぜひお知らせください

その他の主なメリット

  • [コンソール] タブ全体をクリックすると、コンソール ドロワーが自動的に折りたたまれるようになりました。
  • [ソース] のファイルツリーを全面的に見直し、新しいアイコンと新しいグループ化機能を追加しました。

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

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