[B! css][ChromeDevTools] cyber_snufkinのブックマーク

Chromeのデベロッパーツールで、CSSの詳細度が表示されて便利になります

ようやくか、という声も聞こえてきそうですが、ChromeのデベロッパーツールでCSSの詳細度が表示されるようになります。 CSSを普段使用している人はセレクタを見ただけで詳細度が分かると思いますが、こういうちょっとしたアップデートが重ねられていくのは便利になりますね。 CSSの詳細度を表示できるようになったのは、先日アップデートされたChrome Canaryの最新版です。 Chrome 115の安定版は、7/12にリリース予定です。

cyber_snufkin 2023/06/01

リンク

デベロッパツールの新機能が便利！そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。インライン要素にwidthを設定デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca

cyber_snufkin 2022/11/03

リンク

CSSの実装はコンテナクエリで大きく変わる！コンテナクエリをデベロッパーツールで検証およびデバッグする方法

Webのレスポンシブは、メディアクエリによるページベースだけでなく、コンテナクエリによる親コンテナベースの実装ができるようになります。このCSSの新機能コンテナクエリによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。Googleのデベロッパーによるコンテナクエリをデベロッパーツールで検証およびデバッグする方法を紹介します。 Inspect and debug CSS container queries by Sofia Emelianova, Jecelyn Yeen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づき翻訳しています。はじめにコンテナとその子孫を見つけるコンテナクエリを確認する方コンテナ要素を検索する方法コンテナクエリをデバッグする方法はじめにこの記事では、Chromeの

cyber_snufkin 2022/07/15

リンク

CSSアニメーションがGPUで処理されているか確認する方法

CSSアニメーションによるGPU処理昔はWebサイトでアニメーションを行う際はJavaScriptがよく使用されたが、現在はCSSアニメーションが使用されることが多い。理由はJavaScriptは主にCPUで処理するが、CSSはGPUを併用して処理するため処理負荷が軽く、スマートフォンなどの低スペックな端末でもスムーズにアニメーションを行うことができるからだ。ただし、CSSを使用してアニメーションを行っていても、正しく使用しないとGPUで効率的に処理することができない。 GPU処理の確認方法 Chromeの場合はまずChrome Developer Toolを開いて3点ボタンをクリックしてRenderingを選択する。 RenderingタブでPaint flashing、Layer borders、FPS meterにチェックを入れるとアニメーション部分に枠線が付き、fpsやGPU

cyber_snufkin 2017/12/06

リンク

Chromeで不要なCSS/JavaScriptを洗い出す

こんにちは！開発部の武内です。 Webフロントエンドの開発はここ数年で急激に高度化していますが、それを大きく後押ししている一因にブラウザ付属の開発ツールがあります。 Chrome、Firefox、Edge、Safariなどに付属していますが、どれも非常に高機能です。 Webフロントエンドエンジニアで使っていない方はいないのではないでしょうか。グラフィカルなデザイン調整コードのステップ実行通信のロギング etc… 今回、Chrome 59のアップデートでCSS/JavaScriptのカバレッジ機能が追加されたので試してみました。 CSS and JS code coverage What’s New In DevTools (Chrome 59) Find unused CSS and JS code with the new Coverage tab. When you load