web-dev-qa-db-ja.com

Firebugには、Chromeの開発者ツールにはない機能がありますか?

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

デバッグがより高度になると、ChromeのDevToolsで見逃してしまうFirebugの機能はありますか?もしそうなら、彼らは何ですか?

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

87
Matthew

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

ChromeのDevToolsは次のものを備えているためキックキックします:

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

更新:2年後、Firefoxチームが大規模な侵攻を行ったことを祝福しなければなりません。つまり、Chromeチームとデバッガーは毎月大きな飛躍を遂げ、業界をリードしています。上記のリストを更新しますが、率直に言ってページ全体に表示されます。

136
Joseph Lust

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

28
ceejayoz

Chrome Developer ToolsはFirebugの機能を引き継いだため、すべての主要な機能と親しみやすさがあります($0、およびconsoleオブジェクト)。

DevToolsには[〜#〜] css [〜#〜]パネルがありません(ただし、CSSスタイルシートはElementsで操作できますが)パネル)。

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

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

11
tcooc

Firebugを使用する方がずっと快適だと感じています。現時点では詳細を考えることはできませんが、SafariまたはChromeで何かをデバッグしようとすることがあります。Firefoxを起動して何でもすぐに実行できるようなPITAのようです。

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

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

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

Firebugには特に高度なものはないが、Chromeにはないということはありません。

11
JAL

[〜#〜] edit [〜#〜]:これは以前はtrueでしたが、Chrome Dev Toolsが実装していました。

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

6
Slavo

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

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

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

実行速度が速いように見えるので、Chromeに変更したいのですが、ライブ編集は私にとって非常に重要です。

4
Niclas

Firebugのマウス選択は素晴らしいですが、Chrome Developer Toolsで見つけることができないようです。

Firebugではホットキーが見つからないので気になりますが、chromeには完全に欠けています。

私はnoob開発者なので、ほとんどの場合、開発時にマウスが使用されます。

3
skinny boy

この質問が出されたとき、Firebugは獣でしたが、今ではChrome Developer Tools(DevTools)はWeb開発者にとって便利です。私はFirebugについて学んだので、 FirefoxとFirebugを使用したWeb開発。

Web開発に最適なツールであり、DevToolsのすべての主要機能とFirefoxのDevToolsが導入したものです。ただし、Chrome DevToolsに切り替えましたが、Firebugのすべての機能をカバーしているわけではありません。私の意見ではそこに組織された。

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

  • 検索

    Firebugでは、検索オプションは簡単にアクセスでき、case-sensitiveおよびregular expressionでキーワードを検索できるため、明確に定義されています。

  • DOM:

    DOM構造には、さまざまなフィルタリングオプション likeShow User-defined PropertiesShow User-defined Functionsなど。

  • Cookie:

    Firebugでは、own cookiesを作成し、export cookiesにプロビジョニングを提供できます。

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

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

  • ソース:

    ソース編集はDevToolsで利用可能ですが、ソース編集を使用する場合は、DevTools内でCSSファイルを編集する場合、 、Sourcesパネルに移動してから、 Ctrl+O ファイルを見つけます。その場合にのみ、ファイルを編集できます。 Firebugでは、すべてのメニュータブでSource Editを簡単に見つけることができます。

  • dojoのサポート:

    私が道場開発者になると、Firebugは道場の開発をサポートするために簡単に拡張されましたDojo Firebug Extension を使用しました。

3
Vijin Paulraj

客観的に見たFirebug 2.0には多くの小さな機能があり、Chrome DevToolsにはありません。その一部を以下に示します。

Consolepanel

[〜#〜] html [〜#〜]パネル

[〜#〜] css [〜#〜]パネル

  • フォーマットされた方法でページのスタイルシートを表示します
  • Selectorsside panel

[〜#〜] dom [〜#〜]パネル

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

Netパネル

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

Cookiesパネル

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

一般

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

ユーザビリティを超えた「機能」は、Firebugが オープンソース であることです。だから、誰もがそれに参加できます。

とはいえ、Chrome DevTools(およびFirefox DevTools)には、Firebugの背後にあるチームが背後のチームと比べて非常に小さいため、Firebugよりも多くの機能と他の小さな利点と大きな利点があります。他のDevTools。

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

2

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

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

    適切なCSSコーディングの慣行に従って、コード内でCSSプロパティをアルファベット順にソートすることを常にお勧めします。

  2. 多くのスクリプトに関連するプロジェクトに取り組んでいるとき、スクリプトタグの下のfirebugでは、提供されている提案ボックスでjsファイルを検索するオプションがあります。 chromeと同じように、JSファイルの名前空間を確認してツリーを走査するのが面倒なJSファイルを見つけるためのラメツリービューがあります。

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

1
Ravi

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

それは時々とても便利です! :))) ハハハ

1
Andr

開発ツールは似ていると思いますが、Chrome=何もキャッシュしないように強制するのに苦労しました。Chrome 100%の時間働く;理由は分からない。

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

1
Roman

Firebugには、 Firecookie などの他のプラグインをアタッチする可能性があります。残りはかなり似ていますが、私の意見では味についてです。

1
HoLyVieR

「編集および再送信」リクエスト機能

Firefox開発者ツールの「編集および再送信」機能(XHRの再生またはFirebugの何か)を使用すると、リクエストヘッダー、リクエスト本文、httpメソッド、さらにはURLを含むリクエストの変更でXHRリクエストを再生できます。 Google ChromeのReplay XHRは、リクエストを単にリプレイし、リクエストの変更を許可しません。

この機能が必要なときは、Firefox Devtoolsを使用します。

0
Gaurang Patel

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

  • 条件付きブレークポイント:特定の条件でのみ一時停止します。
  • 関数呼び出しのロギング:関数をマークし、コンソールで知りたいことをすべて表示します。
  • プロパティ変更時にブレーク:オブジェクトをマークすると、プロパティが変更されるとデバッガが一時停止します。
0
Ritesh Chandora

今日はほとんど変更しましたが、変更したCSSをChromeで右クリックして、firebugでできるようにルールまたはスタイルの宣言をコピーできないことに気付きました。吸うか、この問題はありません。

0
Banning

chromeデバッガーを使用すると、GWBプロジェクトのjsniをデバッグできます。FireBugは匿名関数を表示するだけで、実際の関数をまったく認識していません。

0
Asimov