スポンサーリンク

Firefox:「インスペクタ」で要素を選択してもCSSが表示されない

この記事は約2分で読めます。

操作画面

こんにちは、さち です。

先日、Stylish用の CSS を作るために
Firefox の開発ツールを使ってツイッターのソースを調べていました。

しかし、そのとき不具合が発生。
「インスペクタ」で要素を選択しているにも関わらず
その要素の CSS の「ルール」に何も表示されないのです。

スポンサーリンク

実際の症状

  1. ツイッターのページを開いた状態。
    操作画面
  2. 開発ツール(Ctrl + Shift + I)の「インスペクタ(Ctrl + Shift + C)」を開き
    <body> の要素を選択します。
    (左下にある表示のとおり、ページの読み込みは完了した状態です)
    操作画面
  3. しかし、CSS の「ルール」に何も表示されません。
    本来は、<body> に関する CSS が表示されるエリアです。
    操作画面
  4. 開発ツールの設定で「キャッシュを無効」にしてあるので…
    操作画面
  5. 「再読み込み」ボタンをクリックします。
    これで、キャッシュを無視してページを読み込み直すはず。
    操作画面
  6. しかし、結局 CSS は表示されません…。
    操作画面

何度か再読み込みを行いましたが症状は一向に改善せず。
うーん、今までこんな事なかったのになぁ……。

解決方法

  1. 「キャッシュを無効」にしてあるし、まさかなぁ…と思いつつも
    一応、手動でキャッシュ無効の再読み込み(スーパーリロード)をしてみます。
    「Shift」キーを押しながら「再読み込み」ボタンをクリックすればOKです。
    (「Ctrl + F5」キー,「Ctrl + Shift + R」キーでもスーパーリロードができます)
    操作画面
  2. すると、CSS の「ルール」が表示されました!
    操作画面

開発ツールの設定で「キャッシュを無効」にしていたので
普通に再読み込みをすればスーパーリロードになると思ったのですが
どうも違うみたいです。

結局、CSS が表示されなかった原因は分からずじまい。
(今のところ、ツイッター以外のサイトで同症状は確認していない)
とりあえず、手動でスーパーリロードすれば大体直るので
しばらく様子を見ようと思います。

コメント

タイトルとURLをコピーしました