ケータイサイトの動作チェックにFirefox

EditCSSでページを表示したままCSSを切り替えてチェックできたり、
Web Developerでブロック要素の適用範囲やid/class属性のチェックができたりと、Blogサイト作成に便利すぎるFirefoxですが、
ケータイサイトの構築にも便利である事が判りました。

動的ケータイサイトの構築で一番鬱陶しいのは、UserAgentを騙らないとサイトの動作チェックができない事じゃないかと思います。
かといって実機でチェックするのは、各キャリア端末を用意するのが大変だし、用意できてもHTMLソースやHTTPの内容を確認できないし…で、私はわざわざチェックのためだけに、Perlでクライアント用のスクリプト組んだりしていたのですが、今回Firefoxのプラグインの導入でその辺が解決できそうです。

まずは、UserAgentの切り替えが簡単にできるUser Agent Toolbar Widget。
こいつをインストール後、メニューのView->Toolbars->Customizeを開くと、

みたいな感じで、UA Stringなるアイコン？が選択できるようになってるのが判る。
これをFirefoxのツールバー上にドラッグ&ドロップすると、ツールバー上に文字列選択メニューが出来て、これでUAを変換できるようになるのだ。

デフォルトで13通りくらいのUAが切り替えられて、そこにないものは直接入力で切り替えられる。
一度設定したのを覚えられないのが玉に瑕だが、携帯電話のUAだろうが何にでも置き換えられるので非常に便利だ。
一度設定したものを覚えておきたいならUser Agent Switcherという別選択肢もある。
ただしこちらの場合、5通りまでしか設定できないので注意を要する。

また、動作チェック中のHTTPヘッダ監視には、Live HTTP HeadersというExtentionが使える。
インストール後、メニューのTools->Live HTTP Headersを選んで表示される別窓を表示させておくと、表示中に本ウィンドウの方がWebサーバとやり取りした際に流れたHTTPのリクエスト/レスポンスヘッダを全て表示してくれる。
クッキーがうまく処理できているか等、チェックするのに非常に便利。

もうIEには(ry

Posted with ecto