TOP > IT・テクノロジー > Chromeの新機能CSS Overviewがすごく便利!ページに使用しているCSSの概要や未使用の宣言がすぐ分かる | コリス

Chromeの新機能CSS Overviewがすごく便利!ページに使用しているCSSの概要や未使用の宣言がすぐ分かる | コリス

82コメント 2020-07-06 09:52 | コリスキャッシュ

Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの...

ツイッターのコメント(82)

結構便利な新機能。
使ってみるかな
デザイナー陣にはこれ見てほしい。/
社内でシェアしたら喜んでくれてハッピー。僕も入れてみたら便利だーと感じたのでハッピー。
6. とりあえず on にした
fontawesomeの使用箇所を探すのに使ったけど便利
作るときの方が使えそう
これは結構便利。web担当は入れた方が良い。
サイトで使われているカラーが一覧で見れるのは便利!
めちゃくちゃ便利すぎてびびった。
サイト分析するときに捗りそう。
知らなかった!!!
すごく便利!は大袈裟やけどちょっと使えそう🤔
よさそう
こんな機能あるんや。
ディベロッパーツールが
充実してくれるのは
すごく助かりますね!

私はドシロートなので
正直ピンときてないですが
逆にこういう環境が当たり前で成長したい
Chromeの新機能として、CSS Overviewができた
Settings→Experiments→CSS OverviewをチェックONしてchromeを再起動すればもう使える

これでCSSの内容がチェックできて便利!!
めちゃ便利そう。今度使ってみよう。
Overviewを使えばCSSの調査や確認が楽になりそうですね!
何これめっちゃ便利!?
>
よむしかにゃい。
なんと!CSSのチェックにこれは便利そうですね!要確認です。
直感的でわかりやす~
これ、とても便利で良いっすねー!フォントとかカラーとか確認するのに良さそう。
ただ、CSSって大抵はサイト全体で使うから、これだけで未使用のセレクタとかまで含めたCSS最適化していくのは難しそう。
検証するときに便利でありがたい
Chromeのデベロッパーツールで新機能のcss overviewが試験的に追加されたそうです
セレクタの数、色、フォント、未使用宣言など使用されている箇所がわかるように一覧で表示されます

自分はMacでは使えましたがWindowsでは無理であったため注意してください

参考サイト
おぉ、マジか。これで 1 つ拡張機能を減らせる
これはなんかおもろいぞ
CSSの概要が分かるChromeデベロッパツールの新機能。今はまだ実験的な機能ということだけど、未使用の宣言が見れたりとかは検証の際に便利そう。
サイトの背景やフォントのカラーを確認する時に検証機能を使ってCSSの要を見に行く作業がなくなるのは嬉しい!
凄い。便利。特に色合いとか調べるのが楽になりそう。
これは早速使ってみたい
CSSの勉強に良さそう(KONAMI)
これ良いな
きになる
これものすっごい便利
画像ファイルとかフォルダ分けしてくれたりいろいろ使いやすくなってますね
デベロッパーツール
実験的との事ですが、CSSでどんな記述がされていて、さらに未使用の宣言が分かるなど、かなり細かく見る事ができてこれは便利。
へぇー!なんか便利そう!!使ってみよーっと!
CSSOverviewを実行するだけで、そのページで使われているブレイクポイントやカラーなどをまとめて表示してくれる。
Chromeに神機能がキテるー!
もっと見る (残り約32件)
 

いま話題のニュース

PR