Welche Funktionen hat Firebug, die die Entwicklertools von Chrome nicht haben? [geschlossen]

Ich bin ein unerfahrener Webentwickler und habe Firebug mehrmals zum Debuggen empfohlen. Bisher habe ich jedoch nur die integrierten Entwicklertools von Chrome verwendet. Es scheint alles zu tun, was Firebug tut, und ist als Bonus sauberer und organisierter.

Gibt es Funktionen in Firebug, die ich mit den DevTools von Chrome verpassen werde, wenn ich mich beim Debuggen weiterentwickle? Wenn ja, was sind sie?

Verwandte: Firebug-ähnlicher Debugger für Google Chrome

Ich habe Firebug von Anfang an benutzt und es war ein Glücksfall wie die Erfindung des Feuers. Aber dann kam Chrome mit seinem Debugger heraus und ich habe es versucht. Ich habe Firebug weiterhin verwendet, aber die Entwicklungswerkzeuge von Chome im Auge behalten und konnte schließlich keinen Grund mehr finden, nicht zu wechseln, nachdem JSON-Tools in Version 12 hinzugefügt wurden.

Die DevTools von Chrome treten in den Hintern, weil sie:

• Eingebauter Timeline-, Profiler- und Heap-Analysator
• Eingebautes Audit-Tool
• Kann auf Local / SessionStorage, Cookies, SqlLite-DBs, WebSQL, AppCache usw. zugreifen und diese bearbeiten ...
• WebSockets-Netzwerk-Sniffing
• Der JS-Debugger verfügt über einige weitere Funktionen (z. B. WebWorker-Haltepunkte).
• Mit dem JS-Debugger können Sie JS im laufenden Betrieb bearbeiten und ausführen (JSFiddle ohne Geige).
• Jedes Fenster erhält ein devtools-Fenster, wenn Sie möchten; Firebug ist ein Singleton
• Firebug stört die Seite, indem es das Laden verlangsamt und CSS für die Inspektorfunktion einfügt

UPDATE: 2 Jahre später muss ich dem Firefox-Team gratulieren, dass es große Fortschritte gemacht hat. Das Chrome-Team und der Debugger machen jedoch monatlich große Fortschritte und sind damit branchenführend. Ich würde die obige Liste aktualisieren, aber ehrlich gesagt würde sie die gesamte Seite füllen.

Ich bin noch nicht auf eine Firebug-Funktion gestoßen, die ich nach dem Wechsel zu Chrome noch verpasst habe.

Die Chrome Developer Tools haben die Funktionen von Firebug übernommen, sodass alle Hauptfunktionen und Vertrautheit vorhanden sind (z. B. das $0und das consoleObjekt).

Es gibt einige kleine Unterschiede, wie die DevTools keine haben CSS - Panel (obwohl CSS - Stylesheets können im manipuliert werden Elemente Panel).

Die Chrome-Tools verfügen zusätzlich über die Bedienfelder Zeitleiste , Profile und Speicher . Das Timeline- Bedienfeld protokolliert das Laden, CSS-Rendering und JavaScript-Parsing. Im Profilfenster werden die Ressourcennutzung und im Speicherfenster die Änderungen an der Datenbank, dem lokalen Speicher, dem Sitzungsspeicher und den Cookies der Site angezeigt und zugelassen.

Schließlich haben beide Tools ihre eigenen geringfügigen Abweichungen, die verschiedene Aktionen ein wenig einfacher oder schwieriger machen. Mein Rat ist, Firebug für Firefox und DevTools für Webkit-Browser zu verwenden, da nur Firebug Lite unter Chrome funktioniert und viele Funktionen des normalen Firebug fehlen (und die DevTools in Chrome integriert sind).

Ich fühle mich mit Firebug viel wohler. Ich kann mir momentan keine Einzelheiten vorstellen, aber manchmal versuche ich, etwas in Safari oder Chrome zu debuggen, und es scheint so eine PITA zu sein, dass ich Firefox starte und alles schnell erledige.

Die Registerkarte DOM ist zum einen ein Plus. Es ist zugänglicher und übersichtlicher als das entsprechende von Chrome. Ich bevorzuge die Art und Weise, wie DOM und andere JS-Objekte auch in Firebug an der Konsole protokolliert werden.

Firebug-Plug-Ins wie Pixel Perfect sind ebenfalls sehr nützlich. Ich weiß nicht, ob es ein solches Tool für Chrome gibt.

Insgesamt spielt es keine Rolle, da Sie sowieso in beiden Browsern testen müssen. Und IE kann es genauso gut mit den Dev-Tools von IE vergleichen (die sich verbessert haben, aber im Vergleich zu FF oder Webkit immer noch nicht gut sind).

Ich glaube nicht, dass in Firebug etwas Fortgeschrittenes vorhanden ist, aber nicht in Chrome, das Sie vermissen werden.

BEARBEITEN : Früher stimmte dies, aber Chrome Dev Tools hat es implementiert.

Firebug kann in allen auf einer Seite geladenen Skripten suchen. Chrome Dev Tools können nur im aktuell ausgewählten Skript AFAIK suchen.

Soweit ich das beurteilen kann, ist Firebug der einzige, der HTML-Code und Text live bearbeiten kann, während Sie ihn eingeben. Sehr nützlich, wenn Sie beispielsweise versuchen zu sehen, wie Text in einen Container passt, und jeweils ein Zeichen hinzufügen.

Wenn Sie in Chrome den HTML-Code bearbeiten, müssen Sie die Tabulatortaste oder die EINGABETASTE drücken, um den "Bearbeitungsmodus" zu verlassen und die Änderungen auf Ihrer Seite anzuzeigen.

In Firebug können Sie auch sofort HTML-Code eingeben. In Chrome müssen Sie mit der rechten Maustaste klicken und "HTML bearbeiten" auswählen. Andernfalls wird es wie <b> fett </ b> angezeigt.

Ich möchte wirklich zu Chrome wechseln, da es schneller zu laufen scheint, aber die Live-Bearbeitung ist mir zu wichtig.

Die Mausauswahl, die Firebug hat, ist großartig, aber ich kann sie anscheinend nicht in den Chrome Developer Tools finden.

Es stört mich, weil ich in Firebug keinen Hotkey dafür finden kann, während es in Chrom völlig fehlt.

Ich bin ein Noob-Entwickler, daher wird die Maus bei der Entwicklung immer noch die meiste Zeit verwendet.

Zu der Zeit, als diese Frage gestellt wurde, war Firebug ein Biest, aber jetzt sind die Chrome Developer Tools (DevTools) für Webentwickler praktisch. Obwohl ich nicht über Firebug schimpfe, weil ich die Webentwicklung mit Firefox mit Firebug gelernt habe.

Es war ein großartiges Tool für die Webentwicklung und führte alle wichtigen Funktionen von DevTools und DevTools von Firefox ein. Ich habe jedoch zu den Chrome DevTools gewechselt, obwohl sie nicht alle Funktionen von Firebug abdecken, da sie leichtgewichtig und viel schneller als Firebug sind. Der Zugriff auf localStorage ist einfach zu definieren und die Quellen sind meiner Meinung nach dort organisiert.

Hier werde ich auflisten, wie einzigartig die Funktionen in Firebug sind.

• Suche :

  Die Suchoption ist in Firebug gut definiert, da sie leicht zugänglich ist und wir Schlüsselwörter mit Groß- und Kleinschreibung und regulären Ausdrücken suchen können .

• DOM:

  Auf die DOM-Struktur kann in Firebug mit verschiedenen Filteroptionen wie Benutzerdefinierte Eigenschaften anzeigen , Benutzerdefinierte Funktionen anzeigen usw. problemlos zugegriffen werden .

• Kekse:

  Mit Firebug können wir unsere eigenen Cookies erstellen und Cookies exportieren .

• Netzwerk / Netz:

  Firebug verfügt über ein Net- Panel, das von den DevTools als Netzwerk bezeichnet wird . Beide sind nützlich, um alle Anforderungen zum Laden der Ressourcen und ihren Status zu analysieren. In Firebug können wir die Remote-IP der Ressourcen leicht erfassen .

• Quellen:

  Auch wenn die Quelle bearbeiten in den DevTools verfügbar ist, fühle ich mich Firebug besser ist bei der Verwendung von Quelle bearbeiten , denn wenn man eine CSS - Datei innerhalb der DevTools bearbeiten möchten, müssen Sie gehen Quellen - Panel, dann drücken Sie Ctrl+ um Odie Datei zu finden. Nur dann können Sie die Datei bearbeiten. In Firebug können Sie bequem die finden Quelle bearbeiten unter jedem Menüreiter.

• Unterstützung für Dojo:

  Als Dojo-Entwickler konnte Firebug problemlos erweitert werden, um die Dojo-Entwicklung mithilfe der Dojo-Firebug-Erweiterung zu unterstützen .

Objektiv gesehen hat Firebug 2.0 viele kleine Funktionen, die die Chrome DevTools nicht haben. Einige von ihnen sind hier aufgelistet:

Konsolentafel

• Zeigt XMLHttpRequests mit den gesamten Anforderungsinformationen an
• Zeigt Cookie-Änderungen an
• Einige weitere Befehlszeilen-API- Funktionen
• Separater Befehlseditor

HTML- Panel

• Inline-Bearbeitung mit automatischer Vervollständigung für Attibutes und CSS-Stile
• Optionen zum Steuern, ob Änderungen hervorgehoben, erweitert und in die Ansicht gescrollt werden sollen
• Optionen zur Steuerung der Entitätsanzeige
• Schnellinfo-Box

CSS- Panel

• Zeigt die Stylesheets der Seite formatiert an
• Selektoren Seitenwand

DOM- Panel

• Zeigt alle DOM-Eigenschaften an einem Ort an
• Zeigt Verschlüsse an
• Ermöglicht das Filtern der Anzeige nach Eigenschaften, Funktionen usw.

Net - Panel

• Ermöglicht das Stoppen von XmlHTTPRequests
• Zeigt Cache-Informationen pro Anforderung an

Cookies Panel

• Erstellen und bearbeiten Sie Cookies
• Kontrolle über Cookie-Berechtigungen
• Zeigt die rohe und formatierte Größe von Cookies an
• Ermöglicht das Stoppen der Skriptausführung beim Ändern von Cookies
• Exportieren Sie Cookies im Standardformat

Allgemeines

• Öffnen Sie HTML, CSS und JavaScript im externen Editor
• Ermöglicht das Anpassen von Verknüpfungen

Ein "Feature", das über die Benutzerfreundlichkeit hinausgeht, ist, dass Firebug Open Source ist . So kann jeder daran teilnehmen.

Allerdings haben die Chrome DevTools (sowie die Firefox DevTools) viel mehr Funktionen und andere kleinere und größere Vorteile gegenüber Firebug, da das Team hinter Firebug im Vergleich zu den Teams hinter den anderen DevTools sehr klein ist.

Außerdem ist Firebug 3+ in die integrierten Firefox DevTools integriert. Dies bedeutet, dass diese Versionen alle Funktionen der Firefox DevTools erben und möglicherweise zusätzliche Funktionen hinzufügen.

Firebug hat die Möglichkeit, ein anderes Plugin wie Firecookie anhängen zu lassen . Im Übrigen sind sie sich ziemlich ähnlich, meiner Meinung nach dreht sich alles um Geschmack.

Fügen Sie außerdem hinzu, dass XPATH xopy hinzugefügt werden kann, um einen CSS-Selektor für ein HTML-Element hinzuzufügen.

DAS ist manchmal sehr praktisch! :))) hahaha

Ich denke, die Entwicklungstools sind ähnlich, aber ich hatte Probleme, Chrome zu zwingen, nichts zwischenzuspeichern. Selbst das Festlegen der Chrome-Einstellung "Cache deaktivieren" funktionierte nicht 100% der Zeit. Ich bin mir nicht sicher warum.

Ich hatte dieses Problem mit Firefox / Firebug nicht, daher verwende ich es immer noch.

Meine paar Cent hinzufügen ...

1. Chrome Inspector konnte die CSS-Eigenschaften nicht alphabetisch sortieren, da Firebug dies wie ein Zauber tun könnte. Es hilft, wenn Sie ein CSS-Element inspizieren und es greifen müssen.

   Gemäß der guten CSS-Codierungspraxis ist es immer besser, Ihre CSS-Eigenschaften in Ihrem Code alphabetisch zu sortieren.

2. Wenn Sie an einem Projekt arbeiten, das mit vielen Skripten verbunden ist. Im Firebug unter dem Skript-Tag haben Sie die Möglichkeit, im bereitgestellten Vorschlagsfeld nach einer js-Datei zu suchen. Wo wie bei Chrome haben Sie eine lahme Baumansicht, um Ihre JS-Datei zu finden. Dies ist mühsam, um den Namespace Ihrer js-Datei zu sehen und den Baum zu durchlaufen.

   Diese Option betrifft möglicherweise niemanden, der kleine JS-Dateien in sein Projekt einbezieht. Diese Funktion ist ein Knaller bei Firebug, den ich verwende, wenn meine Skripte mehr als 1000 JS-Dateien enthalten.

Ich habe heute fast gewechselt, aber ich habe festgestellt, dass ich in Chrome nicht mit der rechten Maustaste auf modifiziertes CSS klicken und die Regel- oder Stildeklarationen kopieren kann, wie ich es in Firebug kann. GOTT Ich wünschte, Firefox würde nicht plötzlich anfangen zu saugen, sonst hätte ich dieses Problem nicht.

Mit dem Chrome-Debugger kann ich das jsni meines GWT-Projekts debuggen, wobei FireBug nur eine anonyme Funktion anzeigt und ich die tatsächliche Funktion überhaupt nicht wirklich erkenne.

Ich liebe das Chrome-Entwicklungstool, aber manchmal habe ich diese leistungsstarke Funktion von Firebug verpasst.

• Bedingter Haltepunkt : Pause nur unter bestimmten Bedingungen.
• Funktionsaufrufe protokollieren : Markieren Sie die Funktion und sehen Sie alles, was Sie wissen möchten, in der Konsole.
• Bei Eigenschaftsänderung unterbrechen : Objekte markieren und der Debugger wird angehalten, wenn die Eigenschaft geändert wird.

Anforderungsfunktion "Bearbeiten und erneut senden"

Mit der Funktion "Bearbeiten und erneut senden" in den Firefox Developer-Tools (Replay XHR oder etwas in Firebug) können Sie die XHR-Anforderung mit Änderungen in der Anforderung wiedergeben, einschließlich Anforderungsheadern, Anforderungshauptteil, http-Methode und sogar URL. Replay XHR von Google Chrome gibt die Anfrage einfach wieder und lässt keine Änderungen an der Anfrage zu.

Ich verwende Firefox Devtools, wenn ich diese Funktion benötige.