Firefoxでアプリケーションキャッシュをデバッグする

Firefox23（現在はAurora）になって、アプリケーションキャッシュがデバッグできるようになったみたいなことをどっかで見たので（どこで見たか忘れた）やってみることにした。

アプリケーションキャッシュというと強力な機能なんだけど実際に使いづらいという印象があってまだ積極的に使ってない。使い方としてはマニフェストファイルにキャッシュしたいデータを定義してmanifest属性でそれを指定するだけという超カンタンなんだけど簡単なだけに動きがブラックボックス的で挙動がわかりづらい。

あと開発者ツールでキャッシュ状況を閲覧したり操作したりできないから要望がなかったらまあいいやみたいな感じで敬遠してた感があった。ChromeではResourseパネルにApplication Cacheの項目があってたしかキャッシュ状況は閲覧できたはず。

Firefoxでは23から開発ツールバーでappcacheコマンドが打てるようになった。これを使ってアプリケーションキャッシュのデバッグがいろいろできそうな感じ。現在23はAuroraで提供されているので、Auroraで実際に試してみた。

まず、Auroraの[ツール] -> [Web開発] -> [開発ツールバー] をクリックする。

すると、ブラウザの最下部に、黒いテキストボックスが表示される。これが開発ツールバー。いわゆるFirefoxで開発するためのコマンドラインでaddonとか開発用ツールをコマンドでコントロールできる。

このコマンドラインで、「help appcache」と打つとこんな感じで表示される。

コマンドは4種類。
appcache clear：アプリケーションキャッシュを削除する
appcache list：キャッシュの一覧を表示する
appcache validate：マニフェストファイルをバリデートする
appcache viewentry：別タブで指定キャッシュの情報を表示する

だそうで。ためしにアプリケーションキャッシュのDemoサイトにアクセスしてみてappcache listを打つとこんな感じで表示された。

Chromeと比べてけっこう情報量が多い。要るか要らないかは別として。でもData sizeはうれしいかも。どうせならData sizeの合計もほしいかも。

あとclearやvalidateなんかは実際開発時に使えると思う。マニフェストファイルのバリデートはCache Manifest Validatorでオンラインできるんだけどここのコマンドでできるほうが便利。

うん、使える。アプリケーションキャッシュを使う開発ではこのappcacheコマンドを使うだろうなあと思いました。