こんにちはミツイです。
先日はChromeのDevToolsについて書きましたが、今回はその続編としてChrome 65で新しく追加された機能について。
エンジニア（さらに言えばフロントエンジニア）が使うツールはUI・UXが優れたものが多いと思うんですが、ChromeのDevToolsもやはりよくできてます。
歴史も長く使っている人も多いツールなので全体的に複雑であることは否めませんが、部分部分のUIは「凝りすぎでしょ！」と思うくらいよくできてます。
Chrome65で追加された機能も、ちょっと感動するほど「これが欲しかった」感があるので、ご紹介します。
※ちなみに2018/10/12現在、Chromeのバージョンは69です。ニュース性のある記事ではないのであしからず。。
Local Overrides
前回の記事で書いたとおり僕は、cssを書く時間の少なくとも半分以上をChromeのDevTools上で作業しています。
そこで怖いのが、編集作業は保存されていないということ。
ふとした瞬間にページをリロードしてしまい、しばらく編集していた内容が消えてしまった、何ていう経験は皆さんも覚えがあるのではないでしょうか？
そんな事故をなくすための機能、Local Overridesのご紹介です。
1.sourcesパネルのoverridesタブでfolder for overridesをselect！
2.選んだフォルダの使用許諾が必要です。
3.選んだフォルダが表示されていればOK。
4.今回はとある要素のheight、とある要素のbackgroundを変更。
5.すると、、変更した部分を含むファイルができていてます！
今回だと、style.min.cssがそのファイル。
ちゃんと変更が反映されています。
リロードしても、このファイルを優先して読み込むので変更が効いたまま！
6.さらに、変更点を確認する方法！
show console drawerでコンソールドロワーを開き、changesタブを開くと、変更点が分かります。
とはいえ、今回のファイルはminifyされているので意味ないですね。。
7.ファイルは、いつでも読み込み直すことができます！
先程のファイルはローカルに保存されているので、select for overridesで選ぶだけでいつでも読み込むことができます。
これで、安心してDevTools上でcss編集することができますね！
しかし、minifyされているとchangesの比較ができないのはもったいない。。
changesタブでも自動整形を使えるようにするなど、カイゼンして欲しい部分です。
Contrast ratio in the Color Picker
DevToolsでは色の■をクリックするとカラーピッカーが開きます。
今回のアップデートで、このカラーピッカーにコントラスト比が出るようになりました。
1.■をクリックすると、、、
2.カラーピッカーが開きます。
contrast ratioと書いてある部分がコントラスト比です。13.77になってますね。
4.さらに詳細を開くと、、、
憎いのは彩度明度のグラデーションの部分。
白い曲線が引いてあり、そこから下にしないとコントラストがなくなって見づらい、ということが表現されています。
contrast ratioの下にあるAAやAAAはWeb Content Accessibility Guidelinesのレベルです。
AAAの方がレベルが高いです。
丸の中にAaとある部分で、背景色と文字色が表示されています。わかりやすいですね。
New SEO audits
auditsとは、会計検査とか審査の意味。
SEOテストが簡単に受けられるようになってます。
1.まずはauditsパネルを開きます。
2.さっそくrun auditsをクリック
3.シミュレーションが流れます。
4.結果
ゴーリストHPで試した結果です。
「Progressive Web App」の点数が58点と低い。。
アンドロイド表示時の設定等、今まで気にしてこなかった部分に気づけたりします。
パフォーマンスの改善案がズラリと。
7月にGoogleの新アルゴリズム「スピードアップデート」が導入されましたが、auditsの機能が追加されたのも、もっとカイゼンしなさいということでしょうか。
まとめ
Chromeも69になってガラッと見た目が変わりましたが、DevToolsは65ですでに大きく進化していました。
機能を全て理解して使いこなす必要もないとは思いますが、自分が欲しい機能があることくらいは知っておきたいですね。
この記事が知る機会になってたら幸いです。
ではまた。
