Goalist Design Blog

Devtoolsでの作業が消える悲劇を二度と起こさないためのChrome65からの新機能!(「検証」の使い方入門:後編)

こんにちはミツイです。
先日は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!

f:id:k-mitsui:20181011160848p:plain

2.選んだフォルダの使用許諾が必要です。

f:id:k-mitsui:20181011160037p:plain

3.選んだフォルダが表示されていればOK。

f:id:k-mitsui:20181011160900p:plain

4.今回はとある要素のheight、とある要素のbackgroundを変更。

f:id:k-mitsui:20181011161310p:plain f:id:k-mitsui:20181011161319p:plain

5.すると、、変更した部分を含むファイルができていてます!

今回だと、style.min.cssがそのファイル。
ちゃんと変更が反映されています。
リロードしても、このファイルを優先して読み込むので変更が効いたまま!

f:id:k-mitsui:20181011161340p:plain f:id:k-mitsui:20181011161330p:plain

6.さらに、変更点を確認する方法!

show console drawerでコンソールドロワーを開き、changesタブを開くと、変更点が分かります。
とはいえ、今回のファイルはminifyされているので意味ないですね。。

f:id:k-mitsui:20181011161350p:plain

f:id:k-mitsui:20181011161416p:plain

7.ファイルは、いつでも読み込み直すことができます!

f:id:k-mitsui:20181011161456p:plain
先程のファイルはローカルに保存されているので、select for overridesで選ぶだけでいつでも読み込むことができます。 これで、安心してDevTools上でcss編集することができますね!
しかし、minifyされているとchangesの比較ができないのはもったいない。。
changesタブでも自動整形を使えるようにするなど、カイゼンして欲しい部分です。


Contrast ratio in the Color Picker

DevToolsでは色の■をクリックするとカラーピッカーが開きます。
今回のアップデートで、このカラーピッカーにコントラスト比が出るようになりました。

1.■をクリックすると、、、

f:id:k-mitsui:20181011161539p:plain

2.カラーピッカーが開きます。

contrast ratioと書いてある部分がコントラスト比です。13.77になってますね。
f:id:k-mitsui:20181011161552p:plain

4.さらに詳細を開くと、、、

憎いのは彩度明度のグラデーションの部分。
白い曲線が引いてあり、そこから下にしないとコントラストがなくなって見づらい、ということが表現されています。
contrast ratioの下にあるAAやAAAはWeb Content Accessibility Guidelinesのレベルです。
AAAの方がレベルが高いです。
丸の中にAaとある部分で、背景色と文字色が表示されています。わかりやすいですね。
f:id:k-mitsui:20181011161602p:plain

New SEO audits

auditsとは、会計検査とか審査の意味。
SEOテストが簡単に受けられるようになってます。

1.まずはauditsパネルを開きます。

f:id:k-mitsui:20181011162757p:plain

2.さっそくrun auditsをクリック

f:id:k-mitsui:20181011162805p:plain

3.シミュレーションが流れます。

f:id:k-mitsui:20181011162825p:plain

4.結果

ゴーリストHPで試した結果です。
「Progressive Web App」の点数が58点と低い。。
アンドロイド表示時の設定等、今まで気にしてこなかった部分に気づけたりします。
f:id:k-mitsui:20181011162832p:plain
f:id:k-mitsui:20181011162843p:plain

パフォーマンスの改善案がズラリと。
7月にGoogleの新アルゴリズム「スピードアップデート」が導入されましたが、auditsの機能が追加されたのも、もっとカイゼンしなさいということでしょうか。

まとめ

Chromeも69になってガラッと見た目が変わりましたが、DevToolsは65ですでに大きく進化していました。
機能を全て理解して使いこなす必要もないとは思いますが、自分が欲しい機能があることくらいは知っておきたいですね。
この記事が知る機会になってたら幸いです。
ではまた。