☰

Firefox Web 開発ツールで「適用されたスタイルのみを表示する」?

tag-icon • tag-icon firefox firefox-extensions firebug
Firefox Web 開発ツールで「適用されたスタイルのみを表示する」?

私は長い間 Firebug ユーザーでした。最近 Firefox が 51 にアップデートされたのですが、すぐに Firebug に問題が生じ始めました。

Firebug ページを訪問したところ、Firebug はもう開発されていないことがわかり、ショックを受けました。

次に進むために、Firefox に組み込まれている Web 開発ツール (WDT) を使用することにしました。しかし、このツールには 1 つ欠けているものがあるようです。

Firebug インスペクタでは、ページ上の要素を選択すると、「適用されたスタイルのみを表示する」などのオプションが表示されていました。WDT にはこのオプションがないようで、パネル内の CSS スタイルがすべて取り消し線で消されているのを見るのは見苦しいです。

WDT でその機能を使用する方法はありますか?

ファイアフォックス

答え1

Firefox DevToolsでは現時点ではこの機能は提供されていません（Firefox 51.0.1時点）。そのため、バグレポートの要求。

また、私はFirebug ユーザー移行ガイドにメモを追加しました。

答え2

そのようなオプションは存在しません。ただし、計算された適用されたスタイルのみを表示するタブ。

display: noneそのためには、 Firefox 開発ツールのデフォルトのスタイルを何らかの方法で編集または上書きする必要があります (たとえば、 )。

ファイル内/devtools/client/themes/rules.css（行423）があります：

.ruleview-overridden {
  text-decoration: line-through;
}

268行目:

.theme-firebug .ruleview-overridden .ruleview-propertyname,
.theme-firebug .ruleview-overridden .ruleview-propertyvalue {
  text-decoration: line-through;
}

この記事も役立つかもしれません。

答え3

もしあなたが必要ならば保存適用されたスタイルのみをChromeで確認するには、Chromeデベロッパーツール（チュートリアルはこちら)。ただし、Firefox ソリューションが必要な場合は、ページを単一の .html ファイルとして保存し、そのファイル内から CSS のみを取得できます。

そのためには、まずFirefox版のアドオンを入手してくださいシングルファイル

SingleFile をインストールしたら、ページを .html ファイルとしてダウンロードし、<style>タグ内の CSS をコピーできます。

縮小されるので、おそらく次のようなツールを使って縮小を解除する必要があるでしょう。最小化

これを試す人は、スタイルが適用済み、必ずしも「未使用」というわけではありません。要素に特定のスタイルを追加しようとするスクリプトがどこかにあるかもしれませんが、キャプチャ時に適用されていない場合、SingleFile (または Chrome Dev Tools) にはそれが含まれません。そのような警告...ただし、Web ページの特定のチャンクを分離してそのルールセットを取得する場合、このアプローチは役立ちます。

関連情報