前の記事 ≪:ユニークなAjax読み込みアイコンが作れる「Chimply」
次の記事 ≫:ちょっと変わったCSSによるナビゲーションメニューいろいろ

Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」

2009年04月20日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
Firediff - In Case of Stairs

Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」。
これは欲しかった!という機能がついにリリースされました。

インストールにはFirebug1.4が必要で、Firebug1.4a17以降が推奨されています。
Firebug1.4のダウンロードはこちらから可能です。

まず、インストールすると、次のように、FirebugにChangesタブが表示されます。



で、実際どうやって使えるか?見てみましょう。

(1) DOMインスペクタをいじった結果をDIFF
たとえば、DOMインスペクタの中で、要素を編集してみます。



2009年4月16日を2009年にしてみました。


すると・・・



変更がちゃんとログに残っています。

Firebugを使って、直接WYSIWYGでレイアウトを編集したい場合などがありますが、たくさん変更しても変更箇所が分かるっていうのはなかなか便利そうです。

(2) JavaScriptで変更された箇所をDIFF
JavaScriptによる変更も、差分を知ることができます。
先日紹介した、Notimooの記事での動作事例を見てみましょう。



JavaScriptをクリックで起動してみます。


起動すると、該当JavaScriptは、HTMLに要素を表示後、表示した要素を削除するというものになっています。

まず、追加された要素を見ることが可能。


数秒後、要素が消えた場合の差分も表示。


これはちょっと便利すぎますね。
どんどんWEB開発がFirebugによって楽になっていってますが、作った方々は本当に凄いなぁと思います。

関連エントリ
関連の記事検索:Firefox, Ajax, JavaScript, firebug, アドオン, 開発
スポンサード リンク

By.KJ : 2009年04月20日 07:05 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)