ChromeのデベロッパーツールにはないFirebugの機能は何ですか？[閉まっている]

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

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

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

私は最初から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チームとデバッガーは毎月大きな飛躍を遂げ、業界をリードしています。上記のリストを更新しますが、率直に言って、ページ全体に表示されます。

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

ChromeデベロッパーツールがFirebugの機能を引き継いだため、すべての主要な機能と使い慣れがあります（など$0、consoleオブジェクト）。

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

Chromeツールにはさらに、タイムライン、プロファイル、ストレージパネルがあります。タイムラインパネルにはロード、CSSのレンダリング、およびJavaScriptの解析をログに記録します。プロファイルパネルプロファイルのリソース使用率とストレージパネルショーとは、サイトのデータベースの変更、ローカルストレージ、セッションストレージ、およびクッキーを可能にします。

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

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

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

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

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

Firebugには特に高度な機能があるとは思いませんが、Chromeにはありません。

編集：これは真実でしたが、Chrome Dev Toolsが実装しました。

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

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

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

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

Chromeに変更したいのですが、実行速度が速いようですが、ライブ編集は私にとってあまりにも重要です。

Firebugのマウスの選択は素晴らしいですが、Chromeデベロッパーツールでそれを見つけることができないようです。

Firebugでホットキーが見つからないので気になりますが、Chromeには完全にありません。

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

当時、この質問が尋ねられたのはFirebugは野獣でしたが、今ではChrome開発者ツール（DevTools）がWeb開発者にとって便利です。FirebugでFirefoxを使用してWeb開発を学んだので、Firebugに腹を立てていません。

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

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

• 探す：

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

• DOM：

  DOM構造が簡単に様々でFirebugのにアクセスすることができるフィルタリングオプションなどの表示ユーザ定義のプロパティ、表示するユーザー定義関数など。

• クッキー：

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

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

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

• 出典：

  にもかかわらずソースの編集はデベロッパーツールで利用可能で、私が使用している間Firebugのが良いと感じるソースの編集を編集するデベロッパーツール内のCSSファイルをしたい場合、あなたが行かなければならないので、ソースパネルを押した後、Ctrl+ Oファイルを検索します。その後でのみ、ファイルを編集できます。Firebugでは、すべてのメニュータブでソース編集を簡単に見つけることができます。

• dojoのサポート：

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

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

コンソールパネル

• リクエスト情報全体を含むXMLHttpRequestsを表示します
• Cookieの変更を表示します
• もう少しコマンドラインAPI関数
• 別のコマンドエディター

HTMLパネル

• 属性およびCSSスタイルのオートコンプリートを使用したインライン編集
• 変更を強調表示して展開し、スクロールして表示するかどうかを制御するオプション
• エンティティの表示を制御するオプション
• クイックインフォボックス

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のすべての機能を継承し、追加機能を追加する場合があります。

Firebugには、Firecookieなどの他のプラグインを接続する可能性があります。残りについては、それらはかなり似ています、それは私の意見ではすべて味についてです。

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

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

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

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

私の数セントを追加しています...

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

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

2. 多数のスクリプトに関連するプロジェクトで作業している場合。scriptbugの下のfirebugでは、提供された提案ボックスでjsファイルを検索するオプションがあります。chromeの場合と同様に、jsファイルの名前空間を確認してツリーを走査するのが面倒なJSファイルを見つけるための不完全なツリービューがあります。

   このオプションは、プロジェクト内の小さなJSファイルに関係する人には影響しない可能性があります。この機能は、スクリプトが1000個を超えるJSファイルである場合に使用するfirebugと一緒に使用できます。

今日はほぼ切り替えが行われましたが、Chromeで変更されたCSSを右クリックして、Firebugのようにルールまたはスタイルの宣言をコピーできないことに気付きました。GOD firefoxが突然吸い始めなかったら、この問題は起こらないと思います。

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

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

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

「編集して再送信」リクエスト機能

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

この機能が必要な場合は、Firefox Devtoolsを使用しています。