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
development performance google-chrome profiling Evan Scholle
quelle

Antworten:

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


quelle
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