Firebug-ähnlicher Debugger für Google Chrome

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)

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/.

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

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.

F12

Ich liebe Shortkeys

Versuchen Sie dies, es heißt Firebug Lite und funktioniert anscheinend mit der Beta-Version von Chrome.

Sie finden es auch unter: https://chrome.google.com/extensions/

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);

Oder versuchen Sie es mit Benutzerskripten: http://dev.chromium.org/developers/design-documents/user-scripts

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.

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

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

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/

Dies beantwortet Ihre Frage nicht, aber falls Sie sie verpasst haben, ist Chris Pedericks Webentwickler jetzt für Chrome verfügbar: https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm .

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 ...

F12 (nur unter Linux und Windows)

ODER

Ctrl ⇧ I

( ⌥ ⌘ Iwenn Sie auf einem Mac sind)

Bitte versuchen Sie Firebug Lite für Google Chrome

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