Web屋メモ

Web系エンジニアのメモです。

<< RadRails日本語化その2  macportsでlighttpd + fastcgi + PHPセットアップ覚え書き >>

スポンサーサイト

一定期間更新がないため広告を表示しています

- | - | - | 
blogram投票ボタン

Javascriptデバッガ Firebug

Firefoxの拡張機能にFirebugというものがあります。
一般的にはJavascriptデバッガと言われているので、Javascriptをばりばりコーディングする人しか使わないかと思いきや、プログラマもデザイナーもWeb開発に関わる人すべてにおすすめしたいツールです。

インストールはこちらから

当然、Firefox拡張機能なので、Firefoxでインストールしてください。

インストールして、Firefoxを再起動すると、ウィンドウ右下にFirebugアイコンfirebugアイコンが表示されます。


上図のアイコンではなく、firebug disableアイコンが表示されている時は、アイコンを右クリックして、Disable Firebugをクリックしてください。
firebug to enable


では、実際に使ってみます。
Firebugアイコンfirebugアイコンをクリックします。

Firefoxウィンドウの下3分の1程度が下図のようになります。
firebugコンソール
最初は[Console]タブが表示されていると思います。
[HTML][CSS][Script][DOM][Net]タブで、それぞれの内容が表示されるようになります。
Consoleは、CSSのエラーとワーニングやJavascriptのエラーとワーニングが表示されます。構文チェックに使えますね。

さらに、このConsoleはJavascriptのコードを実行することができるんです。
コンソールの下にある>>> の右側にJavascriptコードを入力してエンターを押すと、その場でJavascriptが実行されます。
たとえば、
>>> alert('アラートを表示してみる');
と入力してエンターを押すと、アラートダイアログが表示されます。

続いて、[HTML]ですが、現在表示されているページのHTMLソースが構造化されて表示されます。
▶を押すと、そのタグの子要素が展開される仕組みで、とても分かりやすいです。
タグにマウスカーソルをあわせると、そのタグが表示している箇所に半透明レイヤーを重ねてくれるので、HTMLソースとブラウザ表示の照らし合わせが容易にできますし、タグをクリックすれば、その要素に影響を与えているスタイルが右側に表示されます。
firebugHTML

ただ、通常は、タグからブラウザ表示を追うのではなく、表示部品からタグを追いたい場合が多いと思います。
そのときは、[HTML]タブの上にある[Inspect]ボタン押します。
そうすると、ブラウザで表示している部品にマウスカーソルをあてることで、その箇所のHTMLソースの箇所をハイライト表示してくれます。
firebugインスペクト

これだけでもだいぶ使えるツールですが、Firebugはさらに進んでいます。
このHTMLソースは見るだけではなく、編集ができるんです。(サーバにあるファイルが編集されるわけではありません。編集しているブラウザ上だけで反映されます。)
編集したい要素をクリックすると簡易編集モードになって、ある程度自由に書き換えることができます。
[Inspect]の右隣の[Edit]を押せば、もっと自由に編集できるようにもなります。

今回はここまでですが、まだまだ他の機能があるので、何度か紹介してみたいと思います。
ブラウザ | comments(0) | trackbacks(2) | 
blogram投票ボタン

スポンサーサイト

- | - | - | 
blogram投票ボタン

COMMENTS

COMMENT?

 
 
 


TRACKBACK

Jungle Java at 2007/02/28 5:55 PM
Jungle Java - JavaScript のデバッグ(3)
「Firefox」の魅力のかなりの部分は、自由に利用することのできる豊富な拡張機能に支えられています。 「Web Developer」とか「Venkman」とか、これまでにもWeb開発に役立つ様々な拡張機能...
at 2007/10/20 1:25 PM
できるホームページHTML入門 Windows対応 (
仕事で使うことになり、初歩の初歩からということで購入しました。解説がとても詳細で、繰り返し実践し、覚えようと考えています。これからHTMLを覚える方には入門編として最適の一冊だと思います。ホームページを作りたい初心者にはおススメの本です。ある程度パソコン
TB URL :: http://sir2.jugem.jp/trackback/15
S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    
<< October 2017 >>
求人情報サイト[ InterNext Career] スカウト登録
no alt string