Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」
2009年04月20日-![はてなブックマーク](http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2009/04/ajaxfirefoxfire.html)
スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Firediff - In Case of Stairs
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン﹁Firediff﹂。 これは欲しかった!という機能がついにリリースされました。
インストールにはFirebug1.4が必要で、Firebug1.4a17以降が推奨されています。 Firebug1.4のダウンロードはこちらから可能です。
まず、インストールすると、次のように、FirebugにChangesタブが表示されます。
![](http://phpspot.net/php/webimager/admin2/data/4f612aac22f70ec670d57f653f10d581.png)
で、実際どうやって使えるか?見てみましょう。
(1) DOMインスペクタをいじった結果をDIFF たとえば、DOMインスペクタの中で、要素を編集してみます。
![](http://phpspot.net/php/webimager/admin2/data/a829a94f2aa37bef831ee42cc701be6f.png)
2009年4月16日を2009年にしてみました。![](http://phpspot.net/php/webimager/admin2/data/319510baf136145ede99e9c970c054f9.png)
すると・・・
![](http://phpspot.net/php/webimager/admin2/data/48eccaf2b4d65c91c7b849cea6396139.png)
変更がちゃんとログに残っています。
Firebugを使って、直接WYSIWYGでレイアウトを編集したい場合などがありますが、たくさん変更しても変更箇所が分かるっていうのはなかなか便利そうです。
(2) JavaScriptで変更された箇所をDIFF JavaScriptによる変更も、差分を知ることができます。 先日紹介した、Notimooの記事での動作事例を見てみましょう。
![](http://phpspot.net/php/webimager/admin2/data/54e1d5cbe997725a05df12bba5911885.png)
JavaScriptをクリックで起動してみます。![](http://phpspot.net/php/webimager/admin2/data/c3f02067fdf720b0d65b55aa06c15c28.png)
起動すると、該当JavaScriptは、HTMLに要素を表示後、表示した要素を削除するというものになっています。
まず、追加された要素を見ることが可能。![](http://phpspot.net/php/webimager/admin2/data/e3f183090752a33946791d27dd4e4bca.png)
数秒後、要素が消えた場合の差分も表示。![](http://phpspot.net/php/webimager/admin2/data/70ea0c837b9867e2d1159b0889b530c6.png)
これはちょっと便利すぎますね。 どんどんWEB開発がFirebugによって楽になっていってますが、作った方々は本当に凄いなぁと思います。
関連エントリ ●FirePHPがますます便利になっている件 ●FireFoxでのPHP開発を手助けする﹁FirePHP﹂ 関連の記事検索‥Firefox, JavaScript, firebug
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン﹁Firediff﹂。 これは欲しかった!という機能がついにリリースされました。
インストールにはFirebug1.4が必要で、Firebug1.4a17以降が推奨されています。 Firebug1.4のダウンロードはこちらから可能です。
まず、インストールすると、次のように、FirebugにChangesタブが表示されます。
![](http://phpspot.net/php/webimager/admin2/data/4f612aac22f70ec670d57f653f10d581.png)
で、実際どうやって使えるか?見てみましょう。
(1) DOMインスペクタをいじった結果をDIFF たとえば、DOMインスペクタの中で、要素を編集してみます。
![](http://phpspot.net/php/webimager/admin2/data/a829a94f2aa37bef831ee42cc701be6f.png)
2009年4月16日を2009年にしてみました。
![](http://phpspot.net/php/webimager/admin2/data/319510baf136145ede99e9c970c054f9.png)
すると・・・
![](http://phpspot.net/php/webimager/admin2/data/48eccaf2b4d65c91c7b849cea6396139.png)
変更がちゃんとログに残っています。
Firebugを使って、直接WYSIWYGでレイアウトを編集したい場合などがありますが、たくさん変更しても変更箇所が分かるっていうのはなかなか便利そうです。
(2) JavaScriptで変更された箇所をDIFF JavaScriptによる変更も、差分を知ることができます。 先日紹介した、Notimooの記事での動作事例を見てみましょう。
![](http://phpspot.net/php/webimager/admin2/data/54e1d5cbe997725a05df12bba5911885.png)
JavaScriptをクリックで起動してみます。
![](http://phpspot.net/php/webimager/admin2/data/c3f02067fdf720b0d65b55aa06c15c28.png)
起動すると、該当JavaScriptは、HTMLに要素を表示後、表示した要素を削除するというものになっています。
まず、追加された要素を見ることが可能。
![](http://phpspot.net/php/webimager/admin2/data/e3f183090752a33946791d27dd4e4bca.png)
数秒後、要素が消えた場合の差分も表示。
![](http://phpspot.net/php/webimager/admin2/data/70ea0c837b9867e2d1159b0889b530c6.png)
これはちょっと便利すぎますね。 どんどんWEB開発がFirebugによって楽になっていってますが、作った方々は本当に凄いなぁと思います。
関連エントリ ●FirePHPがますます便利になっている件 ●FireFoxでのPHP開発を手助けする﹁FirePHP﹂ 関連の記事検索‥Firefox, JavaScript, firebug
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- TailwindCSSなサイトで使える100以上のアニメーションエフェクト「animata」
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 統一感のある色味を一括生成できるツール「The good colors」
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- 過去のエントリ