昨日の夕方まではメインブラウザに「Sleipnir」を使っていた。理由はそれ以前に使っていた「firefox」がメモリを喰うっぽいから。

でも、会社の人（エンジニアさん）がfirefoxを使ってデバッグ（firebug）をしているのを見て即乗換えを決意。

最近、あまり詳しくないJavaScriptを勉強中なので、何かツールを入手しなければ、とは思っていたし、firefoxならついでにhtmlとcssのデバッグもできるようになるだろうと思ってさ。

んで、実はまだ「FireBug」はほとんど触っていないのだが、意外な事に、cssのデバッグが非常に効率がよくなった、というか今までで最強の環境ができた。

そのツールは「CSSViewer」と「Webdeveloper」の機能の一つである「EditCSS」。試してはいないけど、cssのデバッグ用なら「Webdeveloper」の代わりに別の拡張「EditCSS」だけでも良いくらいである。

手順としては、デバッグしたいページを開いて、「ツール」→「CSSViewer」でCSSViewerを起動して編集したい箇所のcss適応状況を「CSSViewer」で確認する。それで大体の症状が分かるはずなので「EditCSS」を開いて現在のCSSを編集。

ここで一つ注意。「EditCSS」は指定されているCSSファイルをそのまま読み込んでローカルで適応させる、という拡張なんだと思う。なので、実は背景等にURL指定している画像が相対パスで指定されていたらその箇所だけ適応されなくなってしまう。なので、

#head { background : #fff url(../img/head_back.gif); }

#head { background : #fff url(http://hostname.com/img/head_back.gif); }

等に変更する必要がある。

これで変更箇所は分かりやすくなるし、その場で編集、確認ができる。

これ、かなり便利だ。