Was ist das Google Chrome-Äquivalent zu Firebug?

29

Ich bin auf der Suche nach einem Tool, das Folgendes kann:

HTML-Elemente untersuchen
JavaScript verwalten / debuggen
Profilleistung
Elemente in Echtzeit ändern

— Evan Scholle
quelle

32

Es ist in eingebaut. Page [paper] -> Developer -> Entwicklertools (in Chrome v5 und darunter). In Version 6 ist dies wahrscheinlich anders, da die Schaltfläche "Seite" in dieser Version nicht mehr zu sehen ist.

— Mark Hatton
quelle

3

Das Google-Tool weist einige Nachteile auf: Das Anzeigen von Ajax-Anfragen ist nicht so einfach, es gibt keinen praktischen Mehrzeilenmodus, Sie können kein HTML in einem Fenster bearbeiten und es werden keine Auffüllungen / Ränder angezeigt, wenn Sie mit der Maus über den HTML-Baum fahren. Sie können einfach nicht im eigentlichen DOM navigieren (nur im HTML-Baum) und zu guter Letzt finde ich die CSS-Bearbeitungsfunktionen nur klobiger - zum einen gibt es keine automatische Vervollständigung in Google. Es ist immer noch sehr brauchbar, aber Firebug ist einfach besser.

— CGP

2

Oder Umschalt-Strg-I für die Faulen :)

— Tim Post

1

@ Mark Hinweis, ich benutze 5.0.375.99. Ich bin mir nicht sicher, ob es jetzt oder in Zukunft einen Unterschied macht.

— Evan Plaice

1

In v6 ist es Schraubenschlüssel -> Tools -> Entwicklertools

— enobrev

17

Klicken Sie mit der rechten Maustaste -> Element untersuchen

— HoLyVieR
quelle

13

Firebug Lite für Google Chrome .

— Emmett
quelle

FireBug Lite ist ein großartiges Tool und funktioniert auch in IE, Opera, Safari und Firefox: getfirebug.com/firebuglite

— Nat Ryall

5

Es ist 4 Jahre her, seit die ursprüngliche Frage gestellt wurde. Chrome (stable) ist jetzt in der Version 38. Lange Zeit enthielt es einen vollständigen Satz von Entwicklertools , die in etwa Firebug für Firefox entsprechen (obwohl Firefox im Übrigen auch einen eingebauten Inspektor hat ).

Mit den Entwicklertools von Chrome können Sie folgende Aufgaben ausführen:

Untersuche den DOM
CSS überprüfen
Greifen Sie auf eine JavaScript-Konsole zu
Debuggen Sie JavaScript
Zeigen Sie Netzwerkanforderungen, -zeiten und -antworten an
Rendering-, JavaScript- und CSS-Leistung anzeigen
Untersuchen Sie den lokalen Speicher und die Cookies

Auf die Entwicklungswerkzeuge kann auf verschiedene Arten zugegriffen werden.

Chrome-Menü -> Tools -> Entwicklertools
Ctrl+ Shift+ Iin Windows oder Cmd+ Shift+ Iauf einem Mac
F12 unter Windows
Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf einer Seite und wählen Sie Element untersuchen

3

Die In-Browser-Tools eignen sich hervorragend und sind in der Regel die erste Wahl. Manchmal bieten sie jedoch nicht genügend technische Details zu den HTTP-Nutzdaten für Anforderungen / Antworten oder sind zu seitenabhängig.

In diesen Fällen werden Sie möglicherweise feststellen, dass ein dediziertes HTTP-Inspektionstool wie Fiddler oder eine der Linux-Alternativen mehr Einblicke bietet.

Wenn Sie wirklich Bare-Metal benötigen, geht Wireshark über HTTP hinaus und analysiert den gesamten Netzwerkverkehr. Seien Sie jedoch zunächst bereit, überfordert zu sein.

— JasonBirch
quelle

Ich kann nicht behaupten, dass ich mit Fiddler vertraut bin, aber Wireshark ist definitiv übermäßig Bare-Metal. Wireshark ist wirklich nur nützlich, wenn Sie die Details der Protokolle auf niedrigerer Ebene sehen müssen.

— Evan Plaice

Aus Gründen der Benutzerfreundlichkeit ist Fiddler den Firebug / Chrome-Entwicklertools näher gekommen. Einer der Orte, an denen ich es am nützlichsten fand, ist das Veröffentlichen von KML-Dateien auf meiner Website. Sie können die Anforderungen und Antworten von Windows-Desktopanwendungen wie Google Earth und nicht nur von Webbrowsern anzeigen. Ich habe Wireshark ein paar Mal verwendet, bin mir aber einig, dass es für alltägliche Webmaster-Aufgaben im Allgemeinen nicht nützlich ist.

— JasonBirch

1

Sie können auch den Open Source Speed Tracer von Google ausprobieren: http://code.google.com/webtoolkit/speedtracer/

Speed Tracer ist ein Tool, mit dem Sie Leistungsprobleme in Ihren Webanwendungen identifizieren und beheben können. Es visualisiert Metriken, die von Instrumentierungspunkten auf niedriger Ebene innerhalb des Browsers entnommen wurden, und analysiert sie, während Ihre Anwendung ausgeführt wird. Speed Tracer ist als Chrome-Erweiterung erhältlich und funktioniert auf allen Plattformen, auf denen derzeit Erweiterungen unterstützt werden (Windows und Linux).

Mit Speed Tracer erhalten Sie ein besseres Bild davon, wo in Ihrer Anwendung Zeit verbracht wird. Dies schließt Probleme ein, die durch das Parsen und Ausführen von JavaScript, das Layout, die Neuberechnung des CSS-Stils und die Auswahlübereinstimmung, die Verarbeitung von DOM-Ereignissen, das Laden von Netzwerkressourcen, Zeitgeberbrände, XMLHttpRequest-Rückrufe, das Zeichnen und vieles mehr verursacht werden.

— mvark
quelle