2007年03月05日
CSS、JavaScriptのチェックにはFirebug
最近はWEB系の仕事が増えてきています。PHP言語を主に請け負っているのですが、WEBの仕事をしているとどうしてもPHP言語だけではどうにもなりません。PHP以外に絶対必要な言語がHTMLとCSS、JavaScriptです。
HTMLは別にいいのですが、CSSとJavaScriptは私にとってなかなかの天敵だったりします。
CSSはプログラミング言語としては比較的簡単な言語(CSSは「プログラミング言語ではない」とは言われるかもしれませんが)なのですが、ブラウザによって表示方法が異なったり複雑化するとどの部分が影響しているかを見つけるのが結構大変だったりします。
JavaScriptは自分が逃げているせいもあるかもしれませんが、単なる知識不足であったりします。それでも「あ~でもない、こ~でもない」といじる時があるのですが、不具合が発生した時はどの部分がNGなのかを見つけるのが結構大変だったりします。
そんな中、非常に便利なツールがあります。Firefoxを利用しているユーザーならきっと知っていると思う「Firebug」というアドオンソフトです。なぜかゴキブリのアイコンです。
このFirebugは閲覧しているページのHTMLやCSS、JavaScriptなどを解析してくれてJavaScriptならステップ実行も可能です。
さらに、CSSでは見ているページのCSSを使用している箇所をマウスで選択するとその部分のCSSが表示されます。表示されたCSSを変更すると、即座にその結果がブラウザ上に表示されるため、「ここをこう変更したらどうなるだろう?」なんてことがリアルタイムで確認することが出来るのです。
その他にそのページを表示するのにどのくらいの時間がかかってしまうかのページ解析機能も搭載しています。
WEB開発には「絶対!」と言って良いほど欠かせない、そして、これ以上便利なツールはないソフトです。
もし、まだ導入していない人は試しに入れてみてください。絶対、便利ですよ。
Firebug | Firefox Add-ons | Mozilla Corporation
Firebug - Web Development Evolved
HTMLは別にいいのですが、CSSとJavaScriptは私にとってなかなかの天敵だったりします。
CSSはプログラミング言語としては比較的簡単な言語(CSSは「プログラミング言語ではない」とは言われるかもしれませんが)なのですが、ブラウザによって表示方法が異なったり複雑化するとどの部分が影響しているかを見つけるのが結構大変だったりします。
JavaScriptは自分が逃げているせいもあるかもしれませんが、単なる知識不足であったりします。それでも「あ~でもない、こ~でもない」といじる時があるのですが、不具合が発生した時はどの部分がNGなのかを見つけるのが結構大変だったりします。

Firebug
このFirebugは閲覧しているページのHTMLやCSS、JavaScriptなどを解析してくれてJavaScriptならステップ実行も可能です。
さらに、CSSでは見ているページのCSSを使用している箇所をマウスで選択するとその部分のCSSが表示されます。表示されたCSSを変更すると、即座にその結果がブラウザ上に表示されるため、「ここをこう変更したらどうなるだろう?」なんてことがリアルタイムで確認することが出来るのです。
その他にそのページを表示するのにどのくらいの時間がかかってしまうかのページ解析機能も搭載しています。
WEB開発には「絶対!」と言って良いほど欠かせない、そして、これ以上便利なツールはないソフトです。
もし、まだ導入していない人は試しに入れてみてください。絶対、便利ですよ。
Firebug | Firefox Add-ons | Mozilla Corporation
Firebug - Web Development Evolved
Category is 開発言語.
<%PingExcerpt%>
<%PingBlogName%> at <%PingDateTime%>