Firebug-ähnlicher Debugger für Google Chrome

278

Gibt es so etwas wie Firebug, das Sie in Google Chrome verwenden können?

Wesentliche Funktionen, die ich möchte:

  • Überprüfen Sie die HTML-Quelle (wählen Sie Elemente aus, löschen Sie sie usw.)
  • Überprüfen Sie die CSS-Werte (die integrierte Lösung ist irgendwie komisch)
Sebastian Hoitz
quelle
9
Da Chrome jetzt Erweiterungen unterstützt, können wir dies noch einmal überprüfen, da viele der vorhandenen Antworten jetzt technisch falsch sind. Wir sollten diese Antwort aktualisieren, anstatt eine neue zu starten.
Nathan Koop
3
@ Nathan Koop: Ich könnte mich irren, aber ich denke nicht, dass das Chrome-Erweiterungssystem leistungsstark genug ist, um so etwas wie Firebug zuzulassen.
Sasha Chedygov
1
Überprüfen Sie diesen Link, um den Firebug
Techie

Antworten:

243

In Chrome ist bereits ein Firebug-ähnliches Tool integriert. Klicken Sie einfach mit der rechten Maustaste auf eine beliebige Stelle auf einer Seite und wählen Sie "Element überprüfen" aus dem Menü. Chrome verfügt über ein grafisches Tool zum Debuggen (wie in Firebug), mit dem Sie JavaScript debuggen können. Es macht auch CSS-Inspektion gut und kann sogar CSS-Rendering im laufenden Betrieb ändern.

Weitere Informationen finden Sie unter https://developers.google.com/chrome-developer-tools/.

Dmitry Torba
quelle
19
++ Dies ist gut genug, um Chrome-spezifische Probleme zu beheben. Wenn ich eine tiefere Selbstbeobachtung möchte, kann ich dies mit Firebug tun. Mit dem neuen Entwicklermodus von IE8 verfügen alle gängigen Browser über integrierte Entwicklungsmodi. Gute Zeiten.
Waffen
1
Ah, ich habe ein bisschen gebraucht, um es zu finden, aber die HTML-Bearbeitungsfunktion von Firebug ist auch da, an der gleichen Stelle, an der Sie das CSS, die Entwicklersymbolleiste, ein Doppelklick auf ein Element, einen Typ und die Eingabetaste bearbeiten können Sie gehen, HTML bearbeitet.
Kzqai
4
Die Chrome Developer Tools (Strg + Umschalt + J) unterstützen Javascript-Debugging wie Firebug. Klicken Sie auf die Registerkarte "Skripte" und dann auf das zweite Symbol unten (> =) mit dem Tooltip "Konsole anzeigen". Von dort aus können Sie Javascript-Befehle wie die Firebug-Konsole ausführen.
Pierre-Antoine LaFayette
1
Denken Sie daran, dass es auf einem Linux-basierten System nicht automatisch installiert wird. Sie müssen es daher manuell installieren: sudo apt-get install chrom-browser-inspector
Manuel
1
Der aktuelle Entwickler-Build 4.0.xxxx verfügt über eine Reihe von Entwicklertools. Ich wusste schon früher über die Inspect-Elemente Bescheid, aber ohne das "Net" -Panel war es nicht gut genug. Aber es gibt jetzt ein "Ressourcen" -Panel, das ziemlich gut zu funktionieren scheint und dieselben Filter wie Firebug hat (Skripte, xhr, Bilder usw.). Ich benutze den Dev Build seit einer Woche und er scheint ziemlich stabil zu sein. Ich habe gerade meinen Standardbrowser auf Chrome gesetzt - jetzt ist es auch mein Entwicklerbrowser! :)
Mark J Miller
37

Firebug Lite unterstützt das Überprüfen von HTML-Elementen, des berechneten CSS-Stils und vielem mehr. Da es sich um reines JavaScript handelt, funktioniert es in vielen verschiedenen Browsern. Fügen Sie das Skript einfach in Ihre Quelle ein oder fügen Sie das Lesezeichen zu Ihrer Lesezeichenleiste hinzu, um es mit einem einzigen Klick auf einer beliebigen Seite einzufügen.

http://getfirebug.com/lite.html

gregers
quelle
Toller Link! Wusste nichts über IE-Version
Patrick Desjardins
15

Fügen Sie einfach einige Diskussionspunkte als jemand hinzu, der jeden Tag Firebug / Chrome Inspector verwendet :

  1. Zum Zeitpunkt des Schreibens gibt es nur den Google DOM-Inspektor und nein, er verfügt nicht über alle Funktionen von Firebug

  2. Inspector ist eine "Lite" -Version von Firebug: Die Benutzeroberfläche ist IMO nicht so gut, die Elementinspektion in beiden neueren Versionen ist jetzt klobig, aber Firebug ist immer noch besser. Ich versuche, die Liebe zu Chrome zu finden (da es eine bessere und schnellere Browser-Erfahrung ist), aber für die Entwicklungsarbeit ist es immer noch scheiße für mich.

  3. Die Live-Vorschau / Änderung von DOM / CSS ist in Firebug noch viel besser. berechnetes CSS und Box-Modellansicht sind in Firebug besser;

  4. Irgendwie ist es einfacher, Firebug zu lesen / zu verwenden, vielleicht weil es einfach ist, das Dokument in mehreren Schlüsselbereichen zu navigieren, zu bearbeiten oder zu ändern? Wer weiß. Ich bin an die Benutzeroberfläche gewöhnt und denke, dass Chrome Inspector nicht so gut ist, obwohl dies eine subjektive Sache ist, die ich zugebe.

  5. Die Registerkarte Cookies / Net ist für mich in Firebug äußerst nützlich. Vielleicht hat Chrome Inspector das jetzt? Das letzte Mal habe ich es nicht überprüft, da Chrome sich ohne Ihr Eingreifen im Hintergrund aktualisiert (wie alle guten Overlords standardmäßig Ihre Zustimmung einholt).

  6. Letzter Punkt: Der Tag, an dem Google Chrome einen voll funktionsfähigen Firebug erhält, ist der Tag, an dem Firefox für Entwickler im Grunde genommen stirbt, da Firefox drei Jahre Zeit hatte, um die Layout-Engine Gecko von Firefox so schnell wie WebKit zu machen, und dies nicht. Tut mir leid, es so unverblümt auszudrücken, aber es ist die Wahrheit.

Sie sehen, jetzt wollen sich alle von Flash entfernen, anstatt von jQuery, das durch mobile Zugänglichkeit und Interaktivität (iPhone, iPad, Android) motiviert ist, und JavaScript ist "plötzlich" eine große Sache (das ist Sarkasmus), so dass das Schiff gesegelt ist, Firefox. Und das macht mich als Mozilla-Fan traurig. Chrome ist einfach ein besserer Browser, bis Firefox seine JavaScript-Engine aktualisiert.

Negutron
quelle
Firefox geht bergab. Ab sofort (2013) sind Chrome-Devtools viel leistungsfähiger als Firebug ... und Firefox konzentriert sich alle auf Firefox OS, das nicht einmal Android Frodo nahe kommt. Sie haben nicht einmal viel Mühe darauf verwendet, JS und Rendering zu erstellen schneller.
Phyo Arkar Lwin
14

F12

Ich liebe Shortkeys

Angel.King.47
quelle
6
ein Mann legte Strg-Schicht j :)
Vishal Sharma
9

Sie können dieses Lesezeichen in Ihrer "Lesezeichenleiste" festlegen, damit Firebug lite immer im Chrome / Chromium-Browser verfügbar ist (geben Sie dies als URL an):

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Manuel
quelle
4

jQuerify ist die perfekte Erweiterung zum Einbetten von jQuery in die Chrome Console und so einfach, wie Sie es sich vorstellen können. Diese Erweiterung gibt auch an, ob jQuery bereits in eine Seite eingebettet wurde.

Diese Erweiterung wird verwendet, um jQuery in eine beliebige Seite einzubetten. Es ermöglicht die Verwendung von jQuery in der Konsolen-Shell (Sie können die Chrome-Konsole mit Ctrl+ Shift+ j" aufrufen .).

Um jQuery in die ausgewählte Registerkarte einzubetten, klicken Sie auf die Erweiterungsschaltfläche.

Andrey
quelle
4

Die offizielle Firebug Chrome-Erweiterung oder Sie können die Erweiterung selbst herunterladen und verpacken.

https://getfirebug.com/releases/lite/chrome/

joshatjben
quelle
2
Nur zur Klarheit: Dies ist ein Link zu einer Firebug Lite-Erweiterung, nicht zu einer Firebug-Erweiterung.
NeuroScr
Der zuvor angegebene Link wurde unterbrochen. Bitte aktualisieren Sie diese Antwort mit einem neuen Link.
Rob Hruska
3

Nun, es ist möglich, Greasemonkey- Skripte für Google Chrome zu aktivieren. Gibt es also eine Möglichkeit, Firebug mit dieser Methode zu installieren? Firebug Lite würde auch funktionieren, aber es ist nicht das gleiche Gefühl wie bei Verwendung des voll ausgestatteten :(

willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/

Peter Mortensen
quelle
3

Vergessen Sie alles, was Sie brauchen, diesen browserunabhängigen Inspektor, dom updater

https://goggles.webmaker.org/en-US

Setzen Sie einfach ein Lesezeichen und gehen Sie zu einer beliebigen Webseite und klicken Sie auf dieses Lesezeichen.

Dies ist eigentlich Mozilla Projekt Goggles, erstaunlich erstaunlich erstaunlich ...

Vishal Sharma
quelle
Sie schließen es.
Steve Moretz
3

F12 (nur unter Linux und Windows)

ODER

Ctrl I

( Iwenn Sie auf einem Mac sind)

Siannon
quelle
1

Wenn Sie Chromium unter Ubuntu mit dem nächtlichen ppa verwenden, sollten Sie das haben chromium-browser-inspector

Rory
quelle