Firebug が激しく便利すぎる

Firebug今回デザイン変更する際にFirefox のエクステンション Firebug を使用したのだが、これが激しく便利なのでご紹介。


Inspect and edit HTMLInspect and edit HTML
HTML タブを選択後、Inspect ボタンを押すとページビュー上でマウスオーバーした位置が、即座に HTML ビューに表示されます。
HTML ビュー内は変更可能で、クラス名など変更すれば即座にページビューに反映されます。
右下の画面を Layout にしておけば、マージン・パディングも自由に変更可能、これも即座にページビューに反映されます。
Tweak CSS to perfectionTweak CSS to perfection
CSS の内容もページビューを見ながら変更できます。
もちろん、ここで変更した箇所はページビューに即座に反映!
便利すぎます。
Debug and profile JavaScriptDebug and profile JavaScript
JavaScript のデバッグ環境としても激しく便利です。
1行ずつ実行はもとより、変数のモニタリング、ブレークポイントの設定など、必要な機能は一通り揃ってます。
しかも、ブレークポイントは単純に設定できるだけではなく、条件を設定してブレークポイントとして機能させるかまで設定できる!
Monitor network activityMonitor network activity
「このページ、表示が遅いんだけど」そんな悩みも即座に解決!
ネットワークモニタリング機能を使えば、ボトルネックになっている処理の特定が楽々できます。

Javascript のデバッガとしてだけでなく、デザインツールとしても激しく便利です。
ますます Firefox は手放せませんね (^-^)

関連サイト:Firebug – Web Development Evolved

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください