2009/07/19

Firebug 不要な情報を削ってHTML保存

プログラムを書く人じゃないと馴染みがないかもしれないFirebugの使い道。
(要FIrefox3.5+Firebug)

印刷するときに邪魔な情報ってあると思う。
とりあえず出力して加工ソフトに食わせるのもありだけど、あらかじめ削っておいた方が楽なことも多い。

以下を例にすると、上下左右の情報を削って商品情報だけにしたい。

image 
まずはFirebugを有効にする。
ステータスバーの右から5つめの虫のアイコンをクリック。
image

要素をサーチする機能を実行する。
画像にあるアイコンをクリック。
image

マウスカーソルの移動に合わせて、その位置にある要素が青い枠で示される。
image

一番大きなまとまりでクリック。
対応するHTML構文がハイライト表示される。

今度は、マウスカーソルをHTML構文に合わせると、該当する部分に水色半透明が表示される。
image

右クリックでメニューを呼び出す。
image

「要素を削除」を実行すると該当部分が消える。
image

あとはその繰り返し。
要は不要な部分をHTML構文から見つけ出し「要素を削除」で削っていくだけ。
tableとかdivで区切られていることが多いので、慣れてくると小さな要素からでも目的の要素をたどることができる。
もし間違えてもページごと読み込み直せば元通り。
最初からやり直しだが…(汗)

最終的に以下のように。
image

エラーが出ているけど気にしない(汗)

あとは紙として印刷するなり、PDFとして出力するなり好きなように。

ワシはUnMHTで保存するのが好き。
保存した.mhtファイルを表示。
image
直接サポートしてるのはIEだけなので汎用性はどうかと思うこともあるが、HTMLの保存には好んで利用している。
IE使ってないんだけどね(汗)

広告を削除するスクリプトを書くために入れたFirebugだけど、いろんな使い方ができるアドオンだなあと思う。

0 件のコメント: