
Firebugでできること: HTML/CSSの解析とオンザフライ編集
杉山貴章(オングス)
2008-11-06 17:00:00
HTML/CSSのソースをオンザフライ編集
HTMLパネルおよびCSSパネルではウェブページの静的なデザインに関するデバッグが行える。具体的には次のような機能が用意されている。
- HTMLおよびCSSのソース解析
- HTML/CSSソースのオンザフライ編集
- CSSプロパティの有効化/無効化
- レイアウトの可視化
例えば解析したいページでHTMLパネルを開くと、図1のようにHTMLのソースが表示される。ソース上にマウスカーソルを持っていくと、カーソルの当たっている要素がページ上で強調表示される。ソースの右側のウィンドウでは、選択した要素のスタイルやレイアウト、DOMオブジェクトを見ることができる。
Firebug左上の[調査]ボタンをONにすると、ページ上でマウスカーソルが当たっている要素のソースが図2のように強調表示されるようになる。
ソース上の属性名や属性の値は、ダブルクリックすることで編集できる。編集した内容はオンザフライで表示に反映されるため、即座に結果を確認することが可能。要素名をダブルクリックするか、[編集]ボタンをクリックすると、エディタが開いてその要素のソースコードを直接編集することができる。Firebug 1.2以降では外部エディタを指定することもできるようになったため、使い慣れたエディタでの編集が可能である。
その他、画像のパスやカラー指定にマウスカーソルを合わせると、ツールチップでプレビューが表示されるといった機能もある。CSSパネルではカーソルを合わせたプロパティの左側に図3のように通行止めの標識のようなアイコンが表示され、これをクリックするとそのプロパティを無効にすることができる。
ソースの解析から修正、結果の確認まで、全ての作業がウェブブラウザ上のみで完結させられる点が大きな魅力だ。
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
講演の見どころを紹介
-
中小企業でのひとり情シスIT運用術
-
連載!プロが語るストレージ戦略
-
明日からではもう遅い?!
-
利便性とセキュリティの両立
-
ゼロトラストに不可欠なID管理
-
モバイルデバイスもターゲットに!
-
さあ、クラウドで解決しよう。
-
セキュリティの今を知る
-
企業DXのキモはクラウドにあり
-
次の一手はこれだ!
-
DXができない企業が滅びる理由
-
漫画で解説!運用管理のコツ
-
現場主導の業務変革のポイント
-
連載!プロが語るストレージ戦略
-
Kubernetesの認定制度が開始
-
デジタルを当たり前と言えるか?
-
特集:IT最適化への道
-
内部不正や不注意をどう防ぐ?
-
常識を疑え!
-
連載!プロが語るストレージ戦略
-
話題のセキュリティ事故体験ゲーム
-
幸せ?不幸?ひとり情シス座談会
-
いままさに社会にとっての転換点
-
ビッグデータ最前線!