ページで使えるクラス名を DevTools で一覧表示・補完する

Monaca/Onsen UI チームの又川（@n_matagawa）です。

CSS を追記しすぎてカオスになったページは「どんなクラス名が使えるのか分からない」「そもそもどんな CSS ライブラリが追加されているのか分からない」という状況に陥ることがよくありますよね。そんなときは DevTools のクラス名自動補完機能を使いましょう。

動画で説明します。この例では UIKit が読み込まれたページで利用可能なクラス名を一覧表示しています。

DevTools を開いて「(1) 適当な要素を選択し、(2) .cls ボタンをクリックして、(3) Add new class の部分に適当な文字を入力する」だけです。

もうこれ無しではクラス名を入力する気になれない……そのくらい超強力な機能です。

Windows や Linux の場合は Ctrl+Space で全候補が出ます。

macOS の場合は「(1) 適当なクラス名を入力し、(2) 半角スペースを入力する」ことで無理矢理全候補を出せます（Chrome 86 (2020/10) の場合）。

いつ追加された機能なのかと思って DevTools と Chromium のソースコードを調べてみたところ、Chrome 55 (2016/12) でひっそり追加された機能だったようです。

DevTools: Autocomplete class names in ClassesPaneWidget · chromium/chromium@dca6957

https://github.com/chromium/chromium/commit/dca69570d35a1f982f72543d81d66a240a030696

Google Developers でも特に告知されていませんでした。DevTools はこんな風に告知が追いつかないペースで新機能が続々と追加されているので、たまに漁ってみると面白い機能が見つかるかもしれません。

ではまた！