Firefox：Firebugと要素の検査

Question

私はWeb開発に不慣れで、Firebugを使用するための提案を聞き続けています。問題は、要素の検査機能に対するFirebugの利点が見当たらないことです（私はFirefox 24を使用しています）。私は何かが足りないのですか？

1つのツールに慣れてから、より良いツールに切り替える方法に行き詰まってしまうのではないかと心配しています。どちらかのツールで優れている特定の機能についてアドバイスしてください。

kumarharsh · Accepted Answer

2年後の更新

私が開発ツールをますます使用するにつれて、私はいくつかのことに気付くようになりました：

FirefoxのDev-Toolsは開発中のようです。私の回答から2年が経ちましたが、機能や使いやすさにはほとんど目立った進歩はありません。
- ネットワークパネルとデバッガーの改善はわずかですが、Chromeと同じくらい優れたものにするためには、まだ多くの作業を行う必要があります。
- デバッガーはまだ混乱していて、ブラウザーはブレークポイントにたくさんぶら下がっています。
- JSONオブジェクトは、非常に苛立たしいツリー形式で表示され、JSON文字列にコピーまたは展開する方法はありません。
- タイムライン機能は控えめに言っても笑えるものです。
これらは非常に基本的な要件であるため、Mozillaは開発ツールを少しでも気にしないと私は信じるようになりました。
Firebugは失われました-それはどこにも行きません、そしてチームは組み込みのDev-Toolsの上に構築される新しいFirebug3を作成するのに苦労しています。さて、Dev-Toolsは非常にパワーが不足しているので、Firebugの人々が少なくとも1年間は適切なユーザビリティに近いところに到達することは期待できません。
それは私をChromeに連れて行きます。最新バージョンを見てみると、Chromeチームは、開発者ツールの分野でほとんど攻撃不可能なリードを持っているようです。当然のことながら、彼らは開発者に大きな焦点を当て、作成しましたWeb開発のテストと開発を簡素化するためのいくつかの気の利いたこと。

したがって、結論として、今日の質問に対する回答が必要な場合は、Chromeを遠慮なくお勧めします。それはあなたの多くを節約します：

血（沸騰から）、
汗（コーディングから）、および
涙（デバッグから）

ありがとうございました。

今、私の2歳の自己の考えを読んでください：

いくつかの違い：

_++_ = Webインスペクターの方が優れています
_--_ = firebugの方が優れています
_==_ =言えない

++ WebインスペクターにはDモードがあります。これは、z-indexesまたは要素のヒットエリアが適切に識別されていません。
++ Firebugをタブで開いていて、別のタブに切り替えて戻ってきた場合、切り替えるにはかなりの時間がかかります。この問題はどうやらインスペクターにはありません。

この問題は、FirefoxのJavascript Debugger（JSD）のバグが原因でした。これは既知のバグであり、これを書いている時点で修正されています...このバグを修正する1.13.0alphaリリースをインストールしてください。 Firefoxの新しいバージョンでは、JSDも修正されます。

++素晴らしいレスポンシブデザインモードさまざまな解像度でサイトをテストするため。

--Firebug、XPath、Sassなどのアドオンがたくさんあり、拡張開発に最適です。
-（主観的）Webインスペクターのカラーテーマは非常にクールだと思いますが、それを使用することになると、それは非常に困難です。

== Firebugとインスペクターの両方でオブジェクトが出力される方法は同じように悪いです（Chromeがここに君臨します！）
コンソールに次のように記述します：console.log(window)私が話していることを確認します。実際、Firebugはここでも検査官よりも優れています。

Rob Daniel · Answer

私は異なる依存関係に両方を使用します。

私の役割で最も一般的なもの：

ページの読み込み時にJavaScript呼び出しを表示する方がfirebugの方がはるかに簡単だと思います。
また、omnibugプラグイン（firebugへ）は、オムニチュア変数とCookieを表示するのに非常に便利です

クロムの検査要素を使用すると、トラブルシューティング時に非常に便利な利点は、スタイルを編集できることです。

これがあなたの決定を左右することはないと確信していますが、それぞれに独自の利点があることを心に留めておいてください。それはあなたがそれらを何のために必要とするかという問題です。

私は個人的に自分がそれに適応しているのを見ることができません。

Chris · Answer

それぞれにトレードオフがあるので、それは本当に好みに帰着します。スタイルシートを作成して効果をリアルタイムで確認できる、組み込みのInspectElementの「StyleEditor」が本当に気に入っています。