88

私は初心者の Web 開発者であり、デバッグ用に Firebug を何度か推奨してきました。ただし、これまでのところ、Chrome の組み込みの開発者ツールを使用しているだけです。Firebug が行うすべてのことを行うようで、おまけとしてよりクリーンで整理されています。

デバッグが進むにつれ、Chrome の DevTools では見逃してしまう Firebug の機能はありますか? もしそうなら、それらは何ですか?

関連: Google Chrome 用の Firebug のようなデバッガー

4

17 に答える 17

138

私は最初から Firebug を使用していましたが、これは火の発明のような天の恵みでした。しかし、Chrome にデバッガーが付属していたので、試してみました。私は Firebug を使い続けていましたが、Chome の開発ツールに目を光らせていて、v12 で JSON ツールが追加された後、切り替えない理由がついに思いつきませんでした。

Chrome の DevTools は、次の機能を備えているため、非常に優れています。

  • 組み込みのタイムライン、プロファイラー、ヒープ アナライザー
  • 組み込みの監査ツール
  • Local/SessionStorage、Cookie、SqlLite DB、WebSQL、AppCache などにアクセスして編集できます...
  • WebSocket ネットワーク スニッフィング
  • JS デバッガーにはさらにいくつかの機能があります (例: WebWorker ブレークポイント)
  • JS デバッガーを使用すると、JS をオンザフライで編集して実行できます (フィドルなしの JSFiddle)
  • 必要に応じて、各ウィンドウに devtools ウィンドウが表示されます。Firebug はシングルトンです
  • Firebug はページの読み込みを遅くし、インスペクター機能に CSS を挿入することでページを混乱させます

更新: 2 年後、私は Firefox チームが多大な進歩を遂げたことを祝福しなければなりません。とはいえ、Chrome チームとデバッガーは毎月大きな進歩を遂げており、業界をリードしています。上記のリストを更新しますが、率直に言って、ページ全体を埋めてしまいます。

于 2011-12-06T02:27:39.207 に答える
29

Chrome に切り替えた後、まだ見逃していた Firebug 機能に遭遇したことはありません。

于 2010-06-26T18:22:41.393 に答える
11

Chrome 開発者ツールは Firebug の機能を引き継いだため、主な機能と使い慣れた機能 ( $0、consoleオブジェクトなど) はすべてそこにあります。

DevTools にはCSSパネルがないなど、いくつかの小さな違いがあります(ただし、CSS スタイルシートはElementsパネルで操作できます)。

Chrome ツールには、さらにタイムライン、プロファイル、およびストレージパネルがあります。タイムラインパネルは、読み込み、CSS レンダリング、および JavaScript 解析をログに記録します。プロファイルパネルはリソースの使用状況をプロファイリングし、ストレージパネルはサイトのデータベース、ローカル ストレージ、セッション ストレージ、および Cookie を表示して変更を許可します。

最後に、両方のツールには独自の小さな違いがあり、さまざまなアクションが少し簡単になったり難しくなったりします. 私のアドバイスは、Firefox には Firebug を、Webkit ブラウザには DevTools を使用することです。なぜなら、Firebug Lite だけが Chrome で動作し、通常の Firebug が持つ多くの機能が欠けているからです (そして、DevTools は Chrome に組み込まれています)。

于 2010-06-26T18:26:27.490 に答える
10

Firebugを使用する方がはるかに快適です。現時点では具体的なことは考えられませんが、SafariやChromeで何かをデバッグしようとすることがあり、Firefoxを起動してすぐに実行できるようなPITAのようです。

DOMタブはプラスです。Chromeの同等品よりもアクセスしやすく、適切にレイアウトされています。DOMやその他のJSオブジェクトがFirebugのコンソールに記録される方法も好きです。

PixelPerfectのようなFirebugプラグインも非常に便利です。Chromeにそのようなツールが存在するかどうかはわかりません。

とにかく、両方のブラウザでテストする必要があるため、全体としては問題ではありません。また、IEは、IEの開発ツール（改善されていますが、FFやWebkitと比較するとまだ良くありません）と比較することもできます。

特にFirebugには高度なものはありませんが、Chromeには欠けているものはないと思います。

于 2010-06-26T18:34:45.317 に答える
6

編集:これは以前は真実でしたが、Chrome Dev Tools はそれを実装しました。

Firebug は、ページにロードされたすべてのスクリプトを検索できます。Chrome Dev Tools は、現在選択されているスクリプト、AFAIK でのみ検索できます。

于 2010-11-10T13:52:46.487 に答える
4

私が知る限り、HTML コードとテキストを入力と同時に編集できるのは Firebug だけです。たとえば、テキストがコンテナにどのように収まるかを確認し、一度に 1 文字追加する場合に非常に便利です。

Chrome で HTML を編集するときは、TAB または ENTER を押して「編集モード」を終了し、ページの変更を確認する必要があります。

Firebug では、HTML コードをすぐに入力することもできます。Chrome では、右クリックして [HTML の編集] を選択する必要があります。そうしないと、<b>太字</b>のように表示されます。

Chrome の方が高速に動作するように見えるので、どうしても Chrome に変更したいのですが、ライブ編集は私にとって重要すぎます。

于 2012-07-20T15:16:38.327 に答える
3

firebug のマウス選択機能は素晴らしいのですが、Chrome 開発者ツールで見つけることができないようです。

firebug ではホットキーが見つからないのに対し、chrome ではホットキーが完全に見つからないので、気になります。

私は初心者の開発者なので、開発中はほとんどの場合マウスを使用しています。

于 2011-02-26T23:48:18.803 に答える
3

この質問がされた時点では、Firebug は野獣でしたが、現在は Web 開発者にとって Chrome 開発者ツール (DevTools) が便利です。私は Firebug で Firefox を使用した Web 開発を学んだので、Firebug について暴言を吐いているわけではありません。

これは Web 開発のための優れたツールであり、DevTools と Firefox の DevTools の主要な機能をすべて導入していました。ただし、Firebug のすべての機能をカバーしているわけではありませんが、Chrome DevTools に切り替えました。軽量で、Firebug よりもはるかに高速であり、localStorage へのアクセスが簡単に定義され、ソースが整理されているためです。

ここでは、機能が Firebug でどのようにユニークであるかをリストします。

  • 検索:

    検索オプションは Firebug で明確に定義されています。これは、簡単にアクセスでき、大文字と小文字を区別して正規表現でキーワードを検索できるためです。

  • ドム:

    Firebug では、Show User-defined PropertiesやShow User-defined Functionsなどのさまざまなフィルタリング オプションを使用して、DOM 構造に簡単にアクセスできます。

  • クッキー：

    Firebug を使用すると、独自の Cookieを作成し、Cookie をエクスポートすることができます。

  • ネットワーク/ネット:

    Firebug にはNetパネルがありますが、DevTools はそれをNetworkと呼んでいます。どちらも、リソースをロードするために行われたすべてのリクエストとそのステータスを分析するのに役立ちます。Firebug では、リソースのリモート IPを簡単に把握できます。

  • ソース:

    Source Editは DevTools で使用できますが、 Source Editを使用している場合は Firebug の方が優れていると感じます。DevTools 内で CSS ファイルを編集する場合は、[ソースCtrl] パネルに移動して+を押しOてファイルを見つける必要があるためです。そうして初めて、ファイルを編集できます。Firebug では、各メニュー タブの下にあるソース編集を簡単に見つけることができます。

  • 道場のサポート:

    私がDojo 開発者だったとき、 Dojo Firebug Extensionを使用することで、 Dojo開発をサポートするように Firebug を簡単に拡張することができました。

于 2013-10-26T08:01:35.313 に答える
2

客観的に見た Firebug 2.0 には、Chrome DevTools にはない多くの小さな機能があります。それらのいくつかはここにリストされています：

コンソールパネル

HTMLパネル

CSSパネル

DOMパネル

  • すべての DOM プロパティを 1 か所に表示します
  • 閉鎖を表示します
  • プロパティ、関数などで表示をフィルタリングできます。

ネットパネル

  • XmlHTTPRequests での停止を許可します
  • リクエストごとにキャッシュ情報を表示

クッキーパネル

  • Cookie の作成と編集
  • Cookie のアクセス許可を制御する
  • Cookie の未加工サイズとフォーマット済みサイズを表示します
  • Cookie の変更時にスクリプトの実行を停止できるようにします
  • Cookie を標準形式でエクスポートする

全般的

  • HTML、CSS、JavaScript を外部エディターで開く
  • ショートカットをカスタマイズできます

使いやすさを超えた「機能」は、Firebug がオープン ソースであることです。だから誰もがそれに参加することができます。

そうは言っても、Firebugの背後にあるチームは他のDevToolsの背後にあるチームと比較して非常に小さいため、Chrome DevTools（およびFirefox DevTools）には、Firebugよりも多くの機能とその他の小規模および大規模な利点があります.

また、Firebug 3+ は組み込みの Firefox DevTools に統合されています。つまり、これらのバージョンは Firefox DevTools のすべての機能を継承し、追加機能を追加する可能性があります。

于 2015-04-02T08:06:11.563 に答える
1

また、XPATHがHTML要素のCSSセレクターを追加できることも追加します。

それは時々本当に便利です！：））） ははは

于 2012-03-20T10:41:54.193 に答える
1

Firebug には、 Firecookieなどの他のプラグインが接続されている可能性があります。それ以外はかなり似ていますが、私の意見では、それはすべて味に関するものです.

于 2010-06-26T19:25:16.230 に答える
1

私の数セントを追加...

  1. Chrome Inspector は CSS プロパティをアルファベット順に並べ替えることができませんでしたが、Firebug はこれを魔法のように行うことができました。いくつかの css 要素を検査し、それを取得する必要がある場合に役立ちます。

    優れた CSS コーディング プラクティスに従って、CSS プロパティをコード内でアルファベット順に並べ替えることが常に適切です。

  2. 多くのスクリプトを含むプロジェクトに取り組んでいる場合、script タグの下の firebug には、提供された提案ボックスで js ファイルを検索するオプションがあります。クロムと同様に、JS ファイルの名前空間を確認してツリーをトラバースするのが面倒な JS ファイルを見つけるための不十分なツリー ビューがあります。

    このオプションは、プロジェクトで小さな JS ファイルを扱う人には影響しないかもしれません。この機能は、スクリプトが 1000 を超える JS ファイルである場合に使用する firebug との相性が抜群です。

于 2012-07-12T15:19:46.347 に答える
1

開発ツールは似ていると思いますが、Chrome に何もキャッシュさせないようにするのに苦労しました。Chrome の「キャッシュを無効にする」設定を設定しても、100% の場合は機能しませんでした。理由はわかりません。

Firefox/Firebug ではこの問題は発生しなかったので、まだ使用しています。

于 2012-04-27T20:35:24.933 に答える
0

Chrome 開発ツールが大好きですが、firebug のこれらの強力な機能を見逃してしまうことがありました。

  • 条件付きブレークポイント: 特定の条件でのみ一時停止します。
  • 関数呼び出しのロギング: 関数をマークして、知りたいことをすべてコンソールで確認します。
  • Break On Property Change : オブジェクトをマークし、プロパティが変更されるとデバッガーが一時停止します。
于 2014-08-14T08:10:01.400 に答える
0

今日はほとんどスイッチを入れましたが、Chrome で変更された CSS を右クリックして、Firebug のようにルールまたはスタイル宣言をコピーできないことに気付きました。神よ、Firefox が突然しゃぶり始めなければ、この問題が発生しなければよかったのにと思います。

于 2013-06-06T15:34:05.317 に答える