Einleitung
Google Chrome ist ein funktionsreicher Browser, der wegweisend für die Möglichkeiten von Anwendungen im Web ist. Google hat hart daran gearbeitet, den Endnutzern eine schnelle, sehr stabile und funktionsreiche Browsererfahrung zu bieten. Google hat auch dafür gesorgt, dass Entwickler wie Sie eine positive Erfahrung mit Chrome haben. Die in Chrome und Safari verfügbaren Entwicklertools ermöglichen Webentwicklern und Programmierern einen umfassenden Zugriff auf das Innere des Browsers und ihrer Webanwendung.
Die Entwicklertools sind Teil des Open-Source-Webkit-Projekts. Die meisten Informationen in diesem Artikel beziehen sich sowohl auf Google Chrome als auch auf Safari. Da die Screenshots jedoch mit Google Chrome 6 aufgenommen wurden, kann es in Ihrem Browser leichte Abweichungen geben.
In diesem Artikel erhalten Sie einen Überblick über die Entwicklertools und stellen die beliebtesten und nützlichsten Funktionen vor. Unsere Zielgruppe sind Webentwickler, die die Entwicklertools noch nicht kennen oder sich damit noch nicht befasst haben. Wir sind uns jedoch sicher, dass Sie auch als erfahrener Webentwickler den ein oder anderen Tipp mitnehmen können.
Wenn Ihre Instanz der Entwicklertools nicht ganz mit den Screenshots in diesem Artikel übereinstimmt, empfehlen wir Ihnen, ein Upgrade auf 5 durchzuführen. Dann können Sie fortfahren und Zugriff auf alle hier beschriebenen Funktionen erhalten.
Überblick
Insgesamt gibt es acht Hauptgruppen von Tools, die in den Entwicklertools verfügbar sind, und die Funktionen werden mit jedem Release erweitert. Chrome 5 bietet jetzt Elemente, Ressourcen, Skripts, Zeitachse, Profile, Speicher, Audits und Konsole.
Elemente
Mit dem Element-Tool können Sie die Webseite so anzeigen, wie der Browser sie sieht. Das heißt, Sie können mit dem Element-Tool HTML- und CSS-Rohdaten und das Dokumentobjektmodell anzeigen und beides in Echtzeit bearbeiten.
Weitere Informationen
Verwenden Sie das Ressourcen-Tool, um zu erfahren, welche Komponenten Ihre Webseite oder Anwendung von Webservern anfordert, wie lange diese Anfragen dauern und wie viel Bandbreite erforderlich ist. Sie können auch die HTTP-Anfrage- und -Antwortheader für jede Ihrer Ressourcen anzeigen. Mit dem Tool „Resources“ können Sie Ihre Seiten schneller laden.
Skripts
Um den JavaScript-Code für eine Seite zu untersuchen, verwenden Sie das Skript-Tool. Hier finden Sie eine Liste der für die Seite erforderlichen Skripts sowie einen vollständigen Skript-Debugger. Sie können sogar den JavaScript-Code während des Betriebs ändern!
Zeitachse
Für erweiterte Analysen des Zeitverhaltens und der Geschwindigkeit bietet das Zeitachsen-Tool einen detaillierten Einblick in die verschiedenen Chrome-Aktivitäten, die im Hintergrund ablaufen. Sie erfahren, wie lange der Browser für die Verarbeitung von DOM-Ereignissen, das Rendern von Seitenlayouts und die Darstellung des Fensters benötigt.
Profile
Mit dem Tool Profile können Sie die Leistung von JavaScript-Skripts erfassen und analysieren. Sie können beispielsweise herausfinden, welche Funktionen am meisten Ausführungszeit benötigen und sich genau auf die zu optimierenden Stellen konzentrieren.
Speicher
Moderne Webanwendungen erfordern mehr Persistenz als einfache Cookies, und mit dem Storage-Tool können Sie den lokalen Browserspeicher verfolgen, abfragen und Fehler beheben. Dieses Tool kann Daten anzeigen und abfragen, die in lokalen Datenbanken, im lokalen Speicher, im Sitzungsspeicher und in Cookies gespeichert sind.
Prüfen
Das Prüfungstool ist sozusagen Ihr eigener Weboptimierungsberater, der direkt neben Ihnen sitzt. Dieses Tool kann eine Seite während des Ladevorgangs analysieren und Vorschläge und Optimierungen zur Verringerung der Seitenladezeit und Steigerung der wahrgenommenen und tatsächlichen Reaktionszeit machen.
Console
Nicht zuletzt bieten die Entwicklertools eine vollwertige Konsole. Über die Konsole können Sie beliebigen JavaScript-Code eingeben und programmatisch mit Ihrer Seite interagieren.
Startvorgang
Die Entwicklertools lassen sich ganz einfach in Chrome starten.
Bei allen Betriebssystemen können Sie einfach mit der rechten Maustaste auf ein Element auf der Seite klicken und im Kontextmenü die Option „Element untersuchen“ auswählen. Dadurch werden die Entwicklertools geöffnet und Sie sehen das Element, auf das Sie geklickt haben.
Rufen Sie http://www.google.com im Chrome-Browser auf, um dies in Aktion zu sehen. Klicken Sie mit der rechten Maustaste auf das Google-Logo, um die folgenden Optionen zu sehen:
Wenn Sie "Inspect Element" auswählen, werden die Entwicklertools wie folgt angezeigt:
Sie sehen, wie die Entwicklertools auf dem Tab „Elemente“ geöffnet wurden und automatisch das <img>-Tag für das Google-Logo angezeigt haben. Dies ist sehr nützlich, wenn Sie wissen möchten, mit welchem HTML-Code ein bestimmtes Seitenelement generiert wurde.
Sie können die Entwicklertools auch mit einer einfachen Tastenkombination öffnen. Gehen Sie je nach Betriebssystem so vor:
- Unter Windows und Linux wählen Sie die Schlüssel
Control-Shift-Jaus. - Auf einem Mac wählen Sie die
Command-Option-J-Tasten aus.
Schließlich können Sie die Tools über das Hauptmenü des Browsers öffnen.
Wählen Sie auf einem Mac in der Hauptmenüleiste der Anwendung die Option „Ansicht“, „Entwickler“, „Entwicklertools“ aus.
Auf einem Windows-PC wählen Sie oben rechts im Menü „Seite“ die Option „Entwickler“ und „Entwicklertools“ aus.
Nachdem Sie nun die Entwicklertools geöffnet haben, sehen wir uns als Erstes die Elemente auf der Google-Startseite an.
Elemente
Der erste Tab in den Entwicklertools ist „Elemente“. Dies ist das Fenster mit der Struktur der Webseite, so wie es Ihr Browser sieht.
DOM-Suche
Sie werden häufig die Registerkarten der Elemente aufrufen, wenn Sie das HTML-Snippet für einen Aspekt der Seite ermitteln müssen. Sie möchten beispielsweise wissen, ob ein Bild ein HTML-Attribut „ID“ hat und welchen Wert dieses Attribut hat.
Der Tab „Elemente“ ist manchmal am besten zum Anzeigen des Quelltexts einer Seite geeignet. Auf dem Tab „Elements“ ist das DOM der Seite gut formatiert, sodass Sie ganz einfach HTML-Elemente sowie ihre Vor- und Nachfolgerelemente sehen können. Zu oft enthalten Seiten, die Sie besuchen, reduzierten oder einfach schlechten HTML-Code, wodurch sich die Struktur der Seite nur schwer erkennen lässt. Auf der Registerkarte „Elemente“ können Sie die tatsächliche Struktur der Seite anzeigen.
Im Folgenden sehen Sie beispielsweise die Ausgabe der „Quelle anzeigen“ der Google-Startseite.
Die oben genannte Quelle ist schwer zu lesen, da sie optimiert und minimiert ist. Das Format ist gut für Clients und Server, aber schwierig für Entwickler.
Wenn Sie den Quelltext einer Seite lesen möchten, verwenden Sie stattdessen den Tab „Elements“, um eine übersichtliche Hierarchie mit hervorgehobenen Elementen anzuzeigen.
Auf dem Tab "Elemente" können Sie auch die Stile, Kennzahlen, Eigenschaften und Ereignis-Listener für jedes Element auf der Seite durchsuchen, mit ihnen interagieren und in manchen Fällen sogar Änderungen an ihnen vornehmen.
Stilsuche
Aufgrund der Kaskadierung von CSS ist der Browser für Stile auf dem Tab „Elemente“ sehr nützlich. Manchmal heben Stile sich selbst auf und es werden unbeabsichtigte visuelle Elemente angezeigt. Wenn Sie wissen, welche Stilregel der Browser auf das Element anwendet, können Sie solche Probleme leichter beheben.
Wenn Sie auf der Registerkarte Elemente auf ein Element klicken, werden alle mit diesem Element verbundenen Stile angezeigt.
Wie Sie im Screenshot oben sehen, können wir alle angewendeten Stilattribute erkennen. Der Innenrand wird beispielsweise direkt über das Stilattribut des Elements <img> bestimmt. Die Werte für Breite und Höhe werden jedoch den jeweiligen nativen Attributen entnommen. Interessanterweise ist ersichtlich, dass Stile auch vom <center>-Tag, dem <body>-Tag und anderen Tags übernommen werden.
Es ist zwar hilfreich, die einzelnen Stile und deren Herkunft zu sehen, es ist aber auch sehr hilfreich, den endgültigen Satz von Stilen zu sehen, nachdem er berechnet und auf das Element angewendet wurde. Sie können das Endprodukt sehen, indem Sie wie im Screenshot unten gezeigt das Menü „Berechneter Stil“ auswählen.
Als Nächstes werfen wir einen Blick auf die anderen Funktionen, die auf dem Tab „Elemente“ verfügbar sind. Auf diese Themen werden wir in künftigen Artikeln ausführlicher eingehen.
Kastenmodell
Sie können das Boxmodell sehen, wie es auf das ausgewählte Element angewendet wird, indem Sie das Menü „Messwerte“ auswählen:
Elementeigenschaften
Sie können alle Eigenschaften des Elements so sehen, wie es JavaScript und DOM sehen würde, wenn Sie das Menü Eigenschaften auswählen:
Ereignis-Listener
Und schließlich können Sie über das Menü „Ereignis-Listener“ sogar die an das Element angehängten Ereignis-Listener sehen oder durch sie sprengen:
Zusammenfassung
Auf dem Tab „Elemente“ sind viele Funktionen verfügbar und in zukünftigen Artikeln werden die einzelnen Menüs noch genauer erklärt.
Auf dem Tab „Elemente“ können Sie sehen, wie die Seite im Browser selbst aussieht. Häufige Probleme wie „Wie wird dieser Stil berechnet?“ oder „Welche HTML-Tags haben diese Komponente erzeugt?“ können auf dem Tab „Elemente“ schnell und einfach behoben werden.
Stellen Sie sich den Tab „Elemente“ als eine überschaubare „Quelle“ vor, mit der Sie einen sehr genauen Einblick in Ihre Seite erhalten.
Nachdem Sie sich die Seite angesehen haben, fragen Sie sich vielleicht, wie HTML, CSS und Bilder eigentlich dorthin gelangt sind. Auf dem als Nächstes beschriebenen Tab „Ressourcen“ sehen Sie, wie der Client-Browser und der Webserver miteinander kommunizieren, um diese Ressourcen zu senden.
Weitere Informationen
Sobald Ihre Anwendung funktioniert, sollten Sie als Nächstes die Netzwerk- und Bandbreitenleistung optimieren. Sie sollten versuchen, die Übertragung Ihrer Anwendung von Server zu Client so schnell und effizient wie möglich zu gestalten. Ihre Nutzer werden es Ihnen für das schnelle Laden der Seiten danken, Sie sparen Geld bei Bandbreite und Serverressourcen und Sie werden besser in den Suchergebnissen von Google landen, wo jetzt auch die Websitegeschwindigkeit berücksichtigt wird.
Der Tab „Resources“ in den Entwicklertools ist Ihr Fenster für die Kommunikation zwischen Webserver und Clientbrowser. Sie sehen alle Ressourcen, die vom Browser angefordert werden (das ist immer sehr überraschend!), wie lange es dauert, bis sie vom Server empfangen werden, und wie viel Bandbreite bei der Übertragung genutzt wird.
Ironischerweise wirkt sich das Ausführen des Tabs „Resources“ (Ressourcen) auf die Leistung beim Laden von Seiten aus und ist daher standardmäßig deaktiviert. Wenn Sie die Funktion zum ersten Mal aufrufen, müssen Sie sie für die angezeigte Seite aktivieren.
Ich empfehle Ihnen, die Standardeinstellung "Nur für diese Sitzung aktivieren" ausgewählt zu lassen, da Sie die geringe Leistungseinbußen nicht unnötigerweise verursachen möchten. Sobald Sie auf "Ressourcen-Tracking aktivieren" klicken, wird die Seite neu geladen und die Entwicklertools überwachen und zeigen die vom Server gesendeten Ressourcen an.
Der folgende Screenshot zeigt die Ressourcen, die erforderlich sind und für die Google-Startseite geladen wurden.
Dieser Bildschirm enthält viele Informationen, also gehen wir die einzelnen Schritte durch.
Das Standardverhalten zeigt Ihnen, wie lange es gedauert hat, alle Ressourcen für die Seite anzufordern und zu laden. Es könnte Sie überraschen, wenn Sie in der Liste der Ressourcen nach unten scrollen, da Sie möglicherweise nicht wissen, wie viele einzelne Anfragen vom Kunden gestellt werden. Eine hohe Anzahl von Kundenanfragen kann die Leistung erheblich beeinträchtigen. Der erste Schritt zur Optimierung und schließlich zur Reduzierung der Ressourcen ist es, einen Überblick darüber zu erhalten, welche genau angefordert werden.
Wenn Sie nur Bilder oder Stylesheets verwenden möchten, können Sie den Ressourcentyp über das Menü direkt unter dem Fenster des Haupt-Tabs filtern.
Außerdem erfahren Sie, in welcher Reihenfolge die Ressourcen angefordert werden. Mithilfe der Zeitachse können Sie besser nachvollziehen, warum bestimmte Elemente auf Ihrer Seite später als andere erscheinen.
Nachdem Sie einen Überblick über alle angeforderten Ressourcen erhalten haben und wie diese die gesamte Anfragezeitachse ausmachen, sollten Sie die einzelnen Ressourcen aufschlüsseln.
Wenn Sie feststellen, dass einige Ressourcen bei jedem Zugriff auf die Seite angefordert werden, ist dies ein Zeichen dafür, dass Ihre Caching-Header nicht richtig konfiguriert sind. Sie können alle Kopfzeilen für eine Ressource anzeigen, indem Sie in der linken Liste auf die Ressource klicken.
Verwenden Sie die Header-Anzeige, um sicherzustellen, dass der erwartete HTTP-Antwortcode festgelegt und die entsprechenden Header bereitgestellt werden. Wenn die Ressource beispielsweise selten oder nie geändert wird, sollte Ihr Server einen Expiration -Header für weit in die Zukunft festlegen. Dadurch wird dem Browser mitgeteilt, dass die Ressource bis zu diesem Datum nicht noch einmal angefordert werden sollte. Auf diese Weise verringert sich die Anzahl der HTTP-Verbindungen, die für Ihre Seite erforderlich sind, und beschleunigt somit Ihre Website.
Zusammenfassung
Auf dem Tab „Ressourcen“ gibt es noch viel mehr, was wir in einem späteren Artikel behandeln werden.
Verwenden Sie den Tab „Resources“, um einen Überblick über die Kommunikation Ihres Client-Browsers mit dem Webserver zu erhalten. Anhand dieser Informationen, einschließlich Anfragezeit, Anfragegröße und Anfragereihenfolge, können Sie intelligente Optimierungen vornehmen, um die Serverlast und Kosten zu reduzieren, die Geschwindigkeit zu erhöhen und die Nutzererfahrung zu verbessern.
Geschwindigkeit ist für Ihre Website, Ihre Nutzer und Suchmaschinen von entscheidender Bedeutung. Sobald Sie die Anzahl und Größe der Ressourcen reduziert und die entsprechenden HTTP-Konversationen durchgeführt haben, besteht der nächste Schritt darin, die auf Ihrer Seite ausgeführten Skripts zu untersuchen und zu optimieren. Glücklicherweise ist dies auf dem Tab „Scripts“ (Scripts), der nachfolgend erläutert wird, möglich.
Weitere Ressourcen
Weitere Informationen zu den Entwicklertools finden Sie hier:
- Präsentationsvideo zu den Chrome-Entwicklertools und Folien von der Google I/O 2010
- Anleitung für Chrome-Entwicklertools
Auf html5rocks.com finden Sie Teil 2 dieses Artikels sowie viele weitere tolle HTML5- und Chrome-Inhalte.