こんにちは、さち です。
先日、Stylish用の CSS を作るために
Firefox の開発ツールを使ってツイッターのソースを調べていました。
しかし、そのとき不具合が発生。
「インスペクタ」で要素を選択しているにも関わらず
その要素の CSS の「ルール」に何も表示されないのです。
実際の症状
- ツイッターのページを開いた状態。
- 開発ツール（Ctrl + Shift + I）の「インスペクタ（Ctrl + Shift + C）」を開き
<body> の要素を選択します。
（左下にある表示のとおり、ページの読み込みは完了した状態です）
- しかし、CSS の「ルール」に何も表示されません。
本来は、<body> に関する CSS が表示されるエリアです。
- 開発ツールの設定で「キャッシュを無効」にしてあるので…
- 「再読み込み」ボタンをクリックします。
これで、キャッシュを無視してページを読み込み直すはず。
- しかし、結局 CSS は表示されません…。
何度か再読み込みを行いましたが症状は一向に改善せず。
うーん、今までこんな事なかったのになぁ……。
解決方法
- 「キャッシュを無効」にしてあるし、まさかなぁ…と思いつつも
一応、手動でキャッシュ無効の再読み込み（スーパーリロード）をしてみます。
「Shift」キーを押しながら「再読み込み」ボタンをクリックすればOKです。
（「Ctrl + F5」キー，「Ctrl + Shift + R」キーでもスーパーリロードができます）
- すると、CSS の「ルール」が表示されました！
開発ツールの設定で「キャッシュを無効」にしていたので
普通に再読み込みをすればスーパーリロードになると思ったのですが
どうも違うみたいです。
結局、CSS が表示されなかった原因は分からずじまい。
（今のところ、ツイッター以外のサイトで同症状は確認していない）
とりあえず、手動でスーパーリロードすれば大体直るので
しばらく様子を見ようと思います。
コメント