DevTools でコンソールの予測入力がよりスマートになる仕組み、@keyframe ルールを [Styles] ペインで直接編集する方法、CSS カスタム変数を活用する方法、ダークサイドに参加する方法について説明します。
コンソールのスマートな予測入力
私や他の人と同じように、コンソールでコマンドを入力してアプリをデバッグすると、アプリが動作しないことを確認できます。それを繰り返し入力し、何度か繰り返します。そこで、ユーザーが入力したすべての文が次のように自動入力されます。
[スタイル] ペインで @keyframe ルールを直接編集する
DevTools にアニメーション インスペクタとイージング エディタを導入したとき、スタイルペインに @keyframe ベースの CSS アニメーションが表示されていなかったため、遷移に制限されていました。もう過去の話になってもいいですね。積極的に取り組んでください。プレビューについては、動画のツイートをご覧ください。
カスタム CSS プロパティのサポート
CSS にはさまざまなメリットがありますが、そのうちの 1 つがカスタム変数（Chrome 49 でリリース）です。DevTools には完全なサポートが含まれているので、Sass で変数を使ったことがあれば、ネイティブ 変数を試してみてください。
DevTools のダークモード
ついに Google は、過去数年間にわたって何十回も耳にしたリクエストに応じました。DevTools でダークサイドを選択できるようになりました。DevTools の設定に移動し、テーマをダークモードに設定して楽しむ。多くの機能が自動生成されているため、これはまだベータ版です。改善の余地がある部分を見つけた場合は、ぜひお知らせください。
その他のおすすめ
- コンソール ドロワー全体をクリックすると、コンソール ドロワーが自動的に折りたたまれるようになりました。
- [Sources] 内のファイルツリーが全面的に見直され、新しいアイコンと新しいグループ化機能が加わりました。
いつものように、Twitter または以下のコメントを通じてご意見をお寄せください。バグについては crbug.com/new にお寄せください。
どうぞよろしくお願いいたします。
Paul Bakaus、DevTools チーム