DOM要素に適用されるすべてのCSSを取得するためのブラウザ拡張機能はありますか？

Question

Firebugは素晴らしいですし、あなたが選択したDOMの要素に適用されたCSSをすべて見ることができますが、どちらかを行うことができます：

a）CSSで定義されているように、 （非常に便利ですが、私が探しているものではありません）または

b）すべてのCSSルールとこの要素が持つ値です。

私が望むのは、要素を選択できるツールや拡張機能で、コピー可能な形式で、その要素に定義されているすべてのCSSが表示されます。要素がfont-style：normalを持っているのは、それがその要素のデフォルトだからです。私はそこには望んでいません（Firebugはこれをすべて計算結果ビューに表示します）。

基本的に私のことができるようにしたい：私はまさに私自身のウェブサイトで（ボタンのように）ウェブサイトで複製したい要素を参照してください

1. 。
2. このツールを使用して、その要素に適用されるCSSの束を取得します。
3. 自分のCSSで貼り付けてください。
4. 私のウェブサイトで同じように見える要素を取得します。わーい！

Answer 1

Chromeのデフォルトの要素インスペクタ（F12キー）に切り替えると、必要な機能がすべてオンになります。計算されたスタイルパネルの便利な "継承された"チェックボックスを含むすべてを見つける

Answer 2

Google Chromeには、「Chrome開発ツール」というFirebugのようなツールが組み込まれています。それは私の経験から非常に強力で、私は約1年前にFirefox/FirebugからChromeに切り替えました。開発者用ツールを入手するにはいくつかの方法があります。 https://developers.google.com/chrome-developer-tools/docs/overview

要素を選択して要素タブを開いているChromeデベロッパーツールを開くと、右側の計算されたスタイル領域が展開され、その要素を構成するすべてのスタイルが表示されます。

特定のスタイルは、その左に拡張可能な三角形がある場合は、スタイリングから何が来るのか、スタイルシートや場所を見つけることができます。

Answer 3

あなたは、Firefoxに組み込まれている検査官がそれを行うことができ、そのための任意の拡張子を必要としません。要素を右クリックし、[要素の検査]を選択します。下のツールバーの「スタイル」ボタンをクリックします。そこには、その要素に適用されたすべてのスタイルを含むサイドバーがあります。

Answer 4

私は質問がほぼ4歳であることを知っていますが、今日それを探している人がいれば、それを処理するChrome拡張機能があります。 https://github.com/kdzwinel/SnappySnippet

Chrome Inspectorに新しいタブが追加され、ボタンをクリックするだけで、選択した要素とその子要素のHTMLとCSSがすべて取得されます。次に、それをcodepen、jsfiddle、jsbin、またはコピー＆ペーストにエクスポートできます。

Answer 5

私はSnappySnippetを試してみたところ、CSSStealがはるかに優れていることがわかりました。CSSだけを取得し、SnappySnippetとは違って、ドキュメントと同じフォーマットで表示します。