私は初心者のWeb開発者であり、Firebugを何度かデバッグすることを推奨しています。ただし、これまでのところ、Chromeに組み込まれている開発者ツールを使用しています。 Firebugが行うすべてのことを行うようであり、よりクリーンで、ボーナスとしてより整理されています。
デバッグがより高度になると、ChromeのDevToolsで見逃してしまうFirebugの機能はありますか?もしそうなら、彼らは何ですか?
私は最初からFirebugを使用していましたが、それは火の発明のような天の恵みでした。しかし、その後、Chromeデバッガーで出てきて、それを試してみました。Firebugを使い続けましたが、Chomeの開発ツールに目を光らせ、ついにJSONの後に切り替えない理由を思い付くことができませんでしたツールはv12で追加されました。
ChromeのDevToolsは次のものを備えているためキックキックします:
更新:2年後、Firefoxチームが大規模な侵攻を行ったことを祝福しなければなりません。つまり、Chromeチームとデバッガーは毎月大きな飛躍を遂げ、業界をリードしています。上記のリストを更新しますが、率直に言ってページ全体に表示されます。
Chromeに切り替えた後、まだ見逃していたFirebug機能に遭遇していません。
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に組み込まれています)。
Firebugを使用する方がずっと快適だと感じています。現時点では詳細を考えることはできませんが、SafariまたはChromeで何かをデバッグしようとすることがあります。Firefoxを起動して何でもすぐに実行できるようなPITAのようです。
DOMタブはプラスです。これは、Chromeの同等物よりもアクセスしやすく、適切にレイアウトされています。 FirebugのコンソールにDOMや他のJSオブジェクトを記録する方法も好みです。
Pixel PerfectなどのFirebugプラグインも非常に便利です。 Chromeにそのようなツールが存在するかどうかはわかりません。
とにかく両方のブラウザーでテストする必要があるため、全体的には問題ではありません。 IEはIEのDevツールと比較することもできます(改良されましたが、FFやWebkitに比べてまだ良くありません)。
Firebugには特に高度なものはないが、Chromeにはないということはありません。
[〜#〜] edit [〜#〜]:これは以前はtrueでしたが、Chrome Dev Toolsが実装していました。
Firebugは、ページにロードされたすべてのスクリプトを検索できます。 Chrome Dev Toolsは、現在選択されているスクリプトAFAIKでのみ検索できます。
私の知る限り、Firebugは入力中にHTMLコードとテキストを編集できる唯一のツールです。たとえば、テキストがコンテナにどのように収まるかを確認し、一度に1文字を追加する場合に非常に便利です。
Chromeでは、HTMLを編集するときに、TabキーまたはEnterキーを押して「編集モード」を終了し、ページの変更を確認する必要があります。
Firebugでは、HTMLコードをすぐに入力することもできます。 Chromeでは、右クリックして[HTMLの編集]を選択する必要があります。それ以外の場合は、<b>太字</ b>のように表示されます。
実行速度が速いように見えるので、Chromeに変更したいのですが、ライブ編集は私にとって非常に重要です。
Firebugのマウス選択は素晴らしいですが、Chrome Developer Toolsで見つけることができないようです。
Firebugではホットキーが見つからないので気になりますが、chromeには完全に欠けています。
私はnoob開発者なので、ほとんどの場合、開発時にマウスが使用されます。
この質問が出されたとき、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 Properties、Show 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 を使用しました。
客観的に見たFirebug 2.0には多くの小さな機能があり、Chrome DevToolsにはありません。その一部を以下に示します。
一般
ユーザビリティを超えた「機能」は、Firebugが オープンソース であることです。だから、誰もがそれに参加できます。
とはいえ、Chrome DevTools(およびFirefox DevTools)には、Firebugの背後にあるチームが背後のチームと比べて非常に小さいため、Firebugよりも多くの機能と他の小さな利点と大きな利点があります。他のDevTools。
また、 Firebug 3+は組み込みのFirefox DevToolsに統合されます 。これは、これらのバージョンがFirefox DevToolsのすべての機能を継承し、追加機能を追加する可能性があることを意味します。
私の数セントを追加...
Chrome Inspectorは、CSSプロパティをアルファベット順に並べ替えることができませんでした。Firebugはこれを魅力的な方法で行うことができました。いくつかのcss要素を検査し、それをつかむ必要がある場合に役立ちます。firebugはこれに役立ちます。
適切なCSSコーディングの慣行に従って、コード内でCSSプロパティをアルファベット順にソートすることを常にお勧めします。
多くのスクリプトに関連するプロジェクトに取り組んでいるとき、スクリプトタグの下のfirebugでは、提供されている提案ボックスでjsファイルを検索するオプションがあります。 chromeと同じように、JSファイルの名前空間を確認してツリーを走査するのが面倒なJSファイルを見つけるためのラメツリービューがあります。
このオプションは、プロジェクトに小さなJSファイルを含む人には影響しないかもしれません。この機能は、スクリプトが1000を超えるJSファイルである場合に使用するfirebugの機能です。
また、XPATHをコピーしてHTML要素のCSSセレクターを追加できることも追加します。
それは時々とても便利です! :))) ハハハ
開発ツールは似ていると思いますが、Chrome=何もキャッシュしないように強制するのに苦労しました。Chrome 100%の時間働く;理由は分からない。
Firefox/Firebugではこの問題は発生していなかったため、引き続き使用しています。
Firebugには、 Firecookie などの他のプラグインをアタッチする可能性があります。残りはかなり似ていますが、私の意見では味についてです。
「編集および再送信」リクエスト機能
Firefox開発者ツールの「編集および再送信」機能(XHRの再生またはFirebugの何か)を使用すると、リクエストヘッダー、リクエスト本文、httpメソッド、さらにはURLを含むリクエストの変更でXHRリクエストを再生できます。 Google ChromeのReplay XHRは、リクエストを単にリプレイし、リクエストの変更を許可しません。
この機能が必要なときは、Firefox Devtoolsを使用します。
Chrome devツールが大好きですが、firebugのこれらの強力な機能を見逃したことがありました。
今日はほとんど変更しましたが、変更したCSSをChromeで右クリックして、firebugでできるようにルールまたはスタイルの宣言をコピーできないことに気付きました。吸うか、この問題はありません。
chromeデバッガーを使用すると、GWBプロジェクトのjsniをデバッグできます。FireBugは匿名関数を表示するだけで、実際の関数をまったく認識していません。