Welche Funktionen hat Firebug haben, dass Chrome Developer Tools nicht haben? [geschlossen]

StackOverflow https://stackoverflow.com/questions/3124974

  •  30-09-2019
  •  | 
  •  

Frage

Ich bin ein Anfänger Web-Entwickler, und ich habe Firebug für das Debuggen mehrere Male empfohlen. Bisher jedoch habe ich gerade mit Chrome integrierte Entwicklertools. Es scheint, alles zu tun, dass Firebug tut, und ist sauberer und als Bonus organisiert.

Wie ich in meinem Debuggen fortgeschritteneren bekommen, gibt es Funktionen, die Firebug hat, dass ich zu kurz kommen werde auf mit Chrome DevTools? Wenn ja, was sind sie?

Siehe auch: Firebug-wie Debugger für Google Chrome

War es hilfreich?

Lösung

Ich habe Firebug von Anfang an und es war ein Geschenk des Himmels, wie die Erfindung des Feuers. Aber dann kam Chrome mit seinem Debugger und ich versuchte es. Ich hielt Firebug, aber immer ein Auge auf Chome der Entwickler-Tools und konnte schließlich nicht mehr mit einem Grunde, nicht zu Schalter komme nach JSON-Tools in v12 hinzugefügt wurden.

Chrome DevTools Kick Butt weil es hat:

  • Einbau in der Timeline, Profiler und Heap-Analysator
  • gebaut Audit-Tool
  • Can Zugang und bearbeiten Local / session, Plätzchen, SqlLite DB, WebSQL, AppCache etc ...
  • WebSockets Netzwerk Sniffing
  • JS Debugger hat einige weitere Funktionen (z WebWorker Haltepunkte)
  • JS Debugger Sie bearbeiten JS on the fly lassen und führen Sie es (JSFiddle w / o der Geige)
  • wird jedes Fenster ein devtools Fenster, wenn Sie mögen; Firebug ist ein Singleton
  • Firebug stört die Seite von seinem Laden zu verlangsamen und von CSS für seinen Inspektoren Funktion Injektion

UPDATE: 2 Jahre später muss ich machen riesige Einbrüche das Firefox-Team gratulieren. Das heißt, die Chrome-Team und Debugger große Fortschritte auf monatlicher Basis zu machen, die Industrie führt. Ich würde die obige Liste aktualisieren, aber ehrlich gesagt würde es die ganze Seite füllen.

Andere Tipps

Ich habe nicht in eine Firebug-Funktion betreibe ich verpasst habe noch nach Chrome wechseln.

Ich fühle mich viel wohler Firebug. Ich kann nicht glauben, von Besonderheiten im Moment, aber manchmal werde ich versuchen, etwas in Safari oder Chrome Debuggen und es scheint, wie so einen PITA, dass ich Firefox starten und was schnell zu erledigen.

Der DOM Registerkarte ist ein Plus, für einen. Es ist leichter zugänglich und gut angelegt als Chrome-Äquivalent. Ich ziehe den Weg DOM und anderen JS-Objekte an die Konsole in Firebug angemeldet sind, auch.

Firebug-Plug-Ins wie Pixel Perfect sind auch sehr nützlich. Ich weiß nicht, ob ein solches Werkzeug für Chrome vorhanden ist.

Insgesamt ist es egal, weil Sie zu Test in beiden Browsern haben, sowieso. Und IE, so könnte genauso gut vergleichen Sie es mit IE Dev Tools (die haben sich verbessert, aber immer noch nicht gut im Vergleich zu FF oder WebKit).

Ich glaube nicht, dass es etwas Bestimmtes in Firebug fortgeschritten, aber nicht in Chrome, dass Sie fehlen werden.

Die Chrome Developer Tools übernahmen die Funktionen von Firebug, so dass alle wesentlichen Merkmale und Vertrautheit gibt es (wie die $0 und console Objekt).

Es gibt einige kleine Unterschiede, wie die DevTools ein nicht haben CSS Panel.

(obwohl CSS-Stylesheets können in der Elemente Panel manipuliert werden)

Die Chrome-Tools haben zusätzlich die Timeline Profile und Speicher Panels. Der Timeline Panel anmeldet Laden, CSS-Rendering, und JavaScript Parsing. Die Profil Paneelprofile Ressourcennutzung und die Speicher Panel-Shows und können Änderungen in der Datenbank der Website, die lokale Speicherung, Sitzungsspeicher und Cookies.

Schließlich beiden Werkzeuge haben ihre eigene kleineren Abweichungen, die verschiedenen Aktionen ein kleines bisschen leichter oder schwerer machen. Mein Rat ist, Firebug für Firefox und DevTools für Webkit-Browser zu verwenden, da nur Firebug Lite funktioniert auf Chrome, und es fehlen viele Funktionen der normalen Firebug hat (und die DevTools in Chrome gebaut).

Bearbeiten . Dies ist früher wahr zu sein, aber Chrome Dev-Tools implementiert es

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

Soweit ich das beurteilen kann, ist Firebug die einzige, die Dose bearbeiten HTML-Code und Text leben, wie Sie es eingeben. Sehr nützlich, wenn Sie zum Beispiel ist versuchen, um zu sehen, wie der Text in einem Container passen würde und ein Zeichen zu einem Zeitpunkt hinzuzufügen.

In Chrome, wenn Sie den HTML-Code bearbeiten, müssen Sie drücken TAB oder ENTER zum Verlassen „Bearbeitungsmodus“, und sehen Sie die Änderungen auf Ihrer Seite.

In Firebug können Sie auch direkt HTML-Code eingeben. In Chrome, haben Sie mit der rechten Maustaste und wählen Sie „HTML bearbeiten“. Ansonsten wird es wie angezeigt fett .

Ich mag wirklich ändern zu Chrome, da es schneller zu laufen scheint, aber die Live-Bearbeitung ist auch für mich wichtig.

Die Maus Auswahl Firebug hat, ist großartig, aber ich kann nicht scheinen, um es in den Chrome Developer Tools zu finden.

Es stört mich, weil ich nicht einen Hot-Key für es in Firebug finden, während Chrom es völlig fehlt.

Ich bin ein noob Entwickler, so dass die Maus immer noch die meiste Zeit verwendet wird, bei der Entwicklung.

Zu der Zeit wurde diese Frage gestellt Firebug war ein Tier, aber jetzt ist die Chrome-Entwicklertools (DevTools) sind praktisch für Web-Entwickler. Obwohl ich nicht über Firebug schimpfen, weil ich die Web-Entwicklung mit Firefox mit Firebug gelernt haben.

Es war ein großartiges Werkzeug für Web-Entwicklung und es eingeführt alle wichtigen Funktionen von DevTools und Firefox DevTools hat. Allerdings wechselte ich zu den Chrome DevTools obwohl sie nicht alle Funktionen von Firebug decken, weil sie leichtgewichtig sind und viel schneller als Firebug, den Zugriff auf local leicht definiert ist und die Quellen organisiert dort meiner Meinung nach.

Hier bin ich zur Liste gehen, wie die Funktionen in Firebug einzigartig sind,

  • Suchen :

    Suchen Option wohldefiniert in Firebug, weil seine leicht zugänglich und wir können Keyword mit case-sensitive suchen und regulären Ausdruck .

  • DOM:

    Die DOM-Struktur kann leicht mit verschiedenen Filteroptionen in Firebug zugegriffen werden wie anzeigen Benutzerdefinierte Eigenschaften anzeigen Benutzerdefinierte Funktionen und so weiter.

  • Cookies:

    Firebug können wir schaffen unsere eigene Cookies und gibt Bestimmung Export Cookies .

  • Netzwerk / Net:

    Firebug hat eine Net Panel wheras die DevTools nennen es Netzwerk . Beide sind sinnvoll, alle um die Anforderungen zu analysieren gemacht, um die Ressourcen und dessen Status zu laden. In Firebug können wir leicht die Ressourcen erfassen Remote IP .

  • 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 Sie bearbeiten möchten eine CSS-Datei innerhalb der DevTools , Sie gehen Quellen Panel, dann drücken Sie Strg + O , um die Datei zu finden. Nur dann können Sie die Datei bearbeiten. In Firebug können Sie leicht finden die Quelle Bearbeiten unter jedem Menüreiter.

  • Unterstützung für Dojo:

    Wenn ich ein Dojo Entwickler Firebug war, leicht erweitert, um Dojo Entwicklung mit dem Dojo Firebug Erweiterung .

Sachlich gesehen Firebug 2.0 hat viele kleine Features, die die Chrome DevTools nicht haben. Einige von ihnen sind hier aufgeführt:

Console Panel

HTML Panel

CSS Panel

DOM Panel

  • Zeigt alle DOM-Eigenschaften an einem Ort
  • Displays Schließungen
  • Ermöglicht die Anzeige von Eigenschaften zu filtern, Funktionen, etc.

Net Panel

  • Erlaubt auf XMLHttpRequests zu stoppen
  • Zeigt Cache-Informationen pro Anfrage

Cookies Panel

  • Erstellen und Bearbeiten von Cookies
  • Die Kontrolle über Cookies verwalten
  • Shows roh und formatiert Größe von Cookies
  • Ermöglicht die Ausführung des Skripts auf Cookie Änderung zu stoppen
  • Export Cookies im Standardformat

Allgemein

  • Öffnen HTML, CSS und JavaScript in externem Editor
  • Erlaubt das Anpassen von Tastenkombinationen

Ein "Feature", die über die Benutzerfreundlichkeit geht, ist, dass Firebug ist Open-Source-. So kann jeder auf sie teilnehmen können.

Having said that, die Chrome DevTools (sowie die Firefox DevTools) haben viele weitere Features und andere kleinere und größere Vorteile gegenüber Firebug als das Team hinter Firebug ist sehr klein im Vergleich zu den Teams hinter den anderen DevTools.

Auch Firebug 3+ integriert in die eingebaute in Firefox DevTools , was bedeutet, diese Versionen über alle Funktionen des Firefox DevTools erben und zusätzliche Funktionen hinzufügen können.

Firebug hat die Möglichkeit, andere Plugin, um sie anhängen zu haben wie Firecookie . Für den Rest ist ziemlich ähnlich sind, geht es um Geschmack meiner Meinung nach.

auch hinzufügen, dass es XPATH Add CSS-Selektor für ein HTML-Element kopieren kann.

, die manchmal wirklich praktisch ist! :))) hahaha

Ich denke, die Entwicklungs-Tools ähnlich sind, aber ich habe Probleme hat Chrome nicht Cache etwas zwingen. Selbst Einstellung der Chrome „Disable Cache“ Einstellung nicht zu 100% der Zeit nicht funktioniert; Ich bin mir nicht sicher, warum.

Ich habe dieses Problem nicht mit Firefox / Firebug, so dass ich es immer noch bin mit.

Hinzufügen meine paar Cent ...

  1. Chrome Inspector konnte nicht sortieren die CSS-Eigenschaften in alphabetischer Reihenfolge, wo, wie Firebug könnte dies tun, wie ein Zauber. Es hilft, wenn Sie einige CSS-Element und Notwendigkeit zu greifen inspizieren es Firebug auf diese praktisch.

    Wie pro gute CSS Praxis Codierung, es ist immer besser, Ihre CSS-Eigenschaften zu haben, alphabetisch sortiert in Ihrem Code.

  2. Wenn Sie an einem Projekt mit vielen scripts.In firebug unter Script-Tag beteiligt sind, arbeiten Sie eine Option für eine js-Datei in dem Vorschlag Feld der Suche zur Verfügung gestellt. Wo, wie mit Chrom Sie eine lame Baumansicht, um Ihre JS-Datei zu finden, das mühsam ist, das Namespacing Ihrer JS-Datei, um zu sehen und den Baum durchqueren.

    Diese Option kann nicht jeden treffen, der mit wenig JS-Dateien in ihrem Projekt umfasst. Diese Funktion ist ein Knall auf mit Firebug ich benutze, wenn meine Skripte sind mehr als 1000 JS-Dateien.

gemacht Fast den Schalter heute aber ich merkte, ich kann auf modifizierte CSS in Chrome nicht rechts klicken und kopieren Sie die Regel oder Style-Deklarationen wie ich kann in Firebug. GOD Ich wünsche firefox hat plötzlich nicht mehr starten Lutschen oder ich würde dieses Problem nicht.

Mit dem Chrom-Debugger kann ich die JSNI meiner GWT Projekt debuggen, wo FireBug nur eine anonyme Funktion zeigen, und ich weiß nicht wirklich die actuale Funktion überhaupt erkennen.

Ich liebe Chrome Entwickler-Tool, aber irgendwann habe ich verpasst diese leistungsstarke Funktion von Firebug.

  • Bedingte Haltepunkt :. Pause nur auf bestimmten Zustand
  • Logging-Funktion Anrufe : die Funktion markieren und sehen Sie alles, was Sie in der Konsole wissen wollen.
  • Break On Property ändern :. Objekte markieren und Debugger pausiert, wenn Eigentum erhalten geändert

"Bearbeiten und erneut senden" Anfrage-Funktion

Mit "Bearbeiten und erneut senden" -Funktion in Firefox Entwickler-Tool (Replay XHR oder etwas in Firebug), können Sie die XHR Anfrage mit Änderungen wiederholen in der Anfrage einschließlich Request-Header, Anfrage Körper, HTTP-Methode und sogar url. Google Chrome Replay XHR einfach Replays die Anforderung und erlaubt keine Änderungen an der Anfrage.

Ich benutze Firefox Devtools wenn ich diese Funktion benötigen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top