目次
Chrome90にて追加された機能
Google Chrome 90が 2020年4月14日に公開されました。
そこでいろんな機能が追加されていたのでまとめてみました。
CSS flexbox
chrome90ではchromeのdevtoolにてcssのflexboxの設定を直感的に操作することが可能になりました。
flexboxの枠組みの表示
display: flex
が指定されている要素の横にflex
ボタンが表示される様になりました。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-17.17.50.png)
こちらをクリックすると画面上のdisplay: flex
が当たっている要素に関して枠組みが表示される様になります。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-17.19.03-1024x120.png)
これでどの様に要素が配置されているのか分かりやすくなります。
配置に関して直感的に設定する
devtoolのstylesのタブにて、display: flex
の横にボタンが配置される様になりました。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-17.25.49.png)
ここをクリックすると、どの様に配置するかの選択を行える様になります。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-17.26.36.png)
動きに関しては動画の方が分かりやすいと思うので動画を添付しました。
Core Web Vitalsの表示
Core Web Vitalsとは読み込み時間(LCP)インタラクティブ性(FID)ページ・コンテンツの視覚的安定性(CLS)などのUX指標のことです。
参考: https://developers-jp.googleblog.com/2020/05/web-vitals.html
このCore Web Vitalsを画面上に表示することができる様になりました。
まず、devtoolの右上の3点のメニューをクリックしてRun commandをクリックします。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-17.46.57.png)
そして show rendering
を検索し、クリックします。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-17.48.44.png)
そうするとRendering
のメニューが表示されるのでそこからCore Web Vitalsにチェックします。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-17.50.09.png)
そうすると画面右上に読み込み時間(LCP)インタラクティブ性(FID)ページ・コンテンツの視覚的安定性(CLS)の値が表示されます。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-17.51.36.png)
Color Palettes
cssの設定をdevtoolから変更する際にColor Palettesから色を選択することが出来ます。
カラーコードの左横にある色が表示されている部分をクリックすると色の選択が表示され、したにColor Palettesが表示されるのでそこから色を選択することが出来ます。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-17.59.18.png)
まだ、右側にあるソートのアイコンの様なものをクリックすればMaterial ColorやPage Colorの選択肢が表示されます。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-18.00.46.png)
ApplicationタブでTrust Tokenを確認
Trust TokenはBotからの攻撃への対策として使用されるものの様です。
Trust Token is a new API to help combat fraud and distinguish bots from real humans, without passive tracking.
https://developer.chrome.com/blog/new-in-devtools-90/
このTrust TokenがApplicationタブで確認できる様になりました。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-18.21.41-1024x524.png)
color gamut
の設定をブラウザで行う
color-gamut
は、ユーザーエージェントや出力機器が対応している色のおよその範囲を調べるために使用するものです。
このcolor-gamutで設定し、どの様に動作するか確認することができる様になりました。
まずRenderingのタブを開く必要があるので、devtoolの右上の3点のメニューをクリックしてRun commandをクリックし、show rendering
を検索しクリックします。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-18.31.57-1024x243.png)
Renderingタブ内のEmulate CSS media feature color-gamutの部分でセレクトで選択することが可能です。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-18.33.06.png)
DOM TreeとAccessibility Treeを変更するボタンが表示される様になった
Accessibility TreeとDOM Treeを簡単に変更することができる様になりました。
まず、DOM Treeの表示ができる様にする必要があるので、まず左上の歯車のアイコンをクリックして設定パネルを表示します。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-18.46.21.png)
そしたら次にExperimentsタブのEnable full accessibility tree view in Elements pane
にチェックをつけます。
そうするとElementsのタブの中にトグルするためのボタンが表示されるのでここをクリックすることで表示を変えることが出来ます。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-18.44.33-1024x116.png)
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-18.44.42-1024x93.png)
その他の変更点
Chrome90にて追加された機能で紹介したもの以外でも色々変更点があった様なのでそこに関しても軽くまとめてみました。
ダブルクオーテーションがエスケープされる様に
consoleにてダブルクオーテーションがエスケープされる様になりました。
![](https://lanlib.com/wp-content/uploads/2021/04/スクリーンショット-2021-04-18-18.19.22.png)
パフォーマンスの向上
devtool使用ときのpageの読み込みのスピードが向上した様です。
fn.displayNameがfn.nameに変更
今までは
function example() { debugger }
example.displayName = 'example function'
と設定していたのが対応しなくなり、
function example() { debugger }
example.name = 'example function'
の様に設定する様に変更されました。
コメントを残す