Einführung in die Chrome-Entwicklertools, Teil 1

Einführung

Google Chrome ist ein leistungsstarker Webbrowser, der neue Maßstäbe für Web-Anwendungen setzt. Google hat hart daran gearbeitet, Endnutzern einen sehr schnellen, sehr stabilen und funktionsreichen Browser zu bieten. Google hat außerdem dafür gesorgt, dass Entwickler wie Sie Chrome optimal nutzen können. Die Entwicklertools, die in Chrome und Safari gebündelt und verfügbar sind, ermöglichen Webentwicklern und Programmierern einen umfassenden Zugriff auf das Innere des Browsers und seiner Webanwendungen.

Die Entwicklertools sind Teil des Open-Source-Projekts Webkit. Die meisten Informationen in diesem Artikel gelten sowohl für Google Chrome als auch für Safari. Die Screenshots wurden jedoch mit Google Chrome 6 aufgenommen. Daher kann es in Ihrem Browser geringfügige Unterschiede geben.

In diesem Artikel erhalten Sie einen Überblick über die Entwicklertools und ihre beliebtesten und nützlichsten Funktionen. Unsere Zielgruppe sind Webentwickler, die die Entwicklertools noch nicht kennen oder noch nicht getestet haben. Aber auch erfahrene Webentwickler werden sicher den einen oder anderen Tipp mitnehmen.

Wenn Ihre Instanz der Entwicklertools nicht genau mit den Screenshots in diesem Artikel übereinstimmt, empfehlen wir Ihnen, auf Version 5 zu aktualisieren, damit Sie die Anleitungen nachvollziehen und auf alle hier beschriebenen Funktionen zugreifen können.

Übersicht

Insgesamt gibt es acht Hauptgruppen von Tools in den Entwicklertools. Die Funktionen werden mit jeder Version erweitert. Chrome 5 bietet jetzt die folgenden Funktionen: Elemente, Ressourcen, Scripts, Zeitachse, Profile, Speicher, Prüfungen und Konsole.

Elemente

Mit dem Elements-Tool können Sie die Webseite so sehen, wie sie im Browser angezeigt wird. Mit dem Elements-Tool können Sie also den Roh-HTML-Code, die Roh-CSS-Stile und das Document Object Model sehen und beide in Echtzeit bearbeiten.

Ressourcen

Mit dem Tool „Ressourcen“ können Sie sehen, welche Komponenten Ihre Webseite oder Anwendung von Webservern anfordert, wie lange diese Anfragen dauern und wie viel Bandbreite erforderlich ist. Außerdem können Sie sich die HTTP-Anfrage- und Antwortheader für jede Ihrer Ressourcen ansehen. Mit dem Ressourcen-Tool können Sie die Seitenladezeit verkürzen.

Skripts

Mit dem Skript-Tool können Sie sich das JavaScript einer Seite ansehen. Hier finden Sie eine Liste der für die Seite erforderlichen Scripts sowie einen voll funktionsfähigen Script-Debugger. Sie können das JavaScript sogar während der Ausführung ändern.

Zeitachse

Für eine erweiterte Analyse von Timing und Geschwindigkeit bietet das Zeitachse-Tool detaillierte Informationen zu den verschiedenen Chrome-Aktivitäten im Hintergrund. Sie können sehen, wie lange der Browser benötigt, um DOM-Ereignisse zu verarbeiten, Seitenlayouts zu rendern und das Fenster zu zeichnen.

Profile

Mit dem Tool „Profile“ können Sie die Leistung von JavaScript-Scripts erfassen und analysieren. So können Sie beispielsweise herausfinden, welche Funktionen am längsten dauern, und genau ermitteln, wo Sie optimieren müssen.

Speicher

Moderne Webanwendungen erfordern mehr Persistenz als nur Cookies. Mit dem Speichertool können Sie den lokalen Browserspeicher erfassen, abfragen und beheben. Mit diesem Tool können Daten angezeigt und abgefragt werden, die in lokalen Datenbanken, im lokalen Speicher, im Sitzungsspeicher und in Cookies gespeichert sind.

Audit

Das Analysetool ist so, als hätten Sie einen eigenen Berater für Weboptimierung an Ihrer Seite. Mit diesem Tool wird die Seite während des Ladevorgangs analysiert. Hier erhalten Sie außerdem Vorschläge und Optimierungsmöglichkeiten für die Verringerung der Seitenladezeit und die Steigerung der wahrgenommenen und tatsächlichen Reaktionszeit.

Console

Last but not least: Die Entwicklertools bieten eine voll funktionsfähige Konsole. In der Console können Sie beliebiges JavaScript eingeben und programmatisch mit Ihrer Seite interagieren.

Einrichten

Die Entwicklertools lassen sich ganz einfach in Chrome starten.

Unabhängig vom Betriebssystem 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 gelangen direkt zum Element, auf das Sie geklickt haben.

Rufen Sie dazu im Chrome-Browser http://www.google.com auf. Klicken Sie mit der rechten Maustaste auf das Google-Logo. Daraufhin werden die folgenden Optionen angezeigt:

Wenn Sie „Element untersuchen“ auswählen, werden die Entwicklertools geöffnet. Sie sollten so aussehen:

Beachten Sie, dass die Entwicklertools auf dem Tab „Elemente“ geöffnet wurden und automatisch das <img>-Tag für das Google-Logo eingeblendet wurde. Das 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. Probieren Sie je nach Betriebssystem Folgendes aus:

• Wählen Sie unter Windows und Linux die Tasten Control-Shift-J aus.
• Wählen Sie auf einem Mac die Tasten Command-Option-J aus.

Sie können die Tools auch über das Hauptmenü des Browsers öffnen.

Wählen Sie auf einem Mac in der Menüleiste der Anwendung „Ansicht“, „Entwickler“ und „Entwicklertools“ aus.

Auf einem Windows-PC müssen Sie oben rechts das Seitenmenü aufrufen und „Entwickler“ und dann „Entwicklertools“ auswählen.

Die Entwicklertools sind jetzt geöffnet und einsatzbereit. Sehen wir uns zuerst die Elemente auf der Startseite von Google an.

Elemente

Der erste Tab in den Entwicklertools ist „Elemente“. Hier sehen Sie die Struktur der Webseite, wie sie in Ihrem Browser angezeigt wird.

DOM-Browsing

Sie werden die Tabs „Elemente“ häufig aufrufen, wenn Sie das HTML-Snippet für einen bestimmten Aspekt der Seite ermitteln müssen. Sie möchten beispielsweise wissen, ob ein Bild ein HTML-Attribut „id“ hat und wie der Wert dieses Attributs lautet.

Manchmal ist der Tab „Elemente“ die bessere Möglichkeit, die Quelle einer Seite aufzurufen. Auf dem Tab „Elemente“ wird das DOM der Seite übersichtlich formatiert und Sie sehen die HTML-Elemente, ihre Vorfahren und ihre Nachkommen. Zu oft haben die von Ihnen besuchten Seiten minimierten oder einfach hässlichen HTML-Code, was es schwer macht, die Struktur der Seite zu erkennen. Auf dem Tab „Elemente“ sehen Sie die tatsächliche zugrunde liegende Struktur der Seite.

Im Folgenden sehen Sie beispielsweise die Ausgabe der Option „Quellcode anzeigen“ der Google-Startseite.

Die obige Quelle ist schwer zu lesen, da sie optimiert und minimiert wurde. Das Format ist gut für Clients und Server, aber schwierig für Entwickler.

Wenn Sie die Quelle einer Seite lesen möchten, verwenden Sie stattdessen den Tab „Elemente“. Dort wird eine schön formatierte, syntaxmarkierte Elementhierarchie angezeigt.

Auf dem Tab „Elemente“ können Sie außerdem die Stile, Messwerte, Eigenschaften und Ereignis-Listener für jedes Element auf der Seite durchsuchen, damit interagieren und sie manchmal sogar ändern.

Styles-Suche

Aufgrund der Kaskadenart von CSS ist der Stilbrowser auf dem Tab „Elemente“ sehr nützlich. Manchmal werden Stile ineinander verschachtelt und es werden unbeabsichtigte visuelle Elemente angezeigt. Wenn Sie wissen, welche Stilregel der Browser auf das Element anwendet, können Sie ein solches Problem leichter beheben.

Wenn Sie auf dem Tab „Elemente“ auf ein Element klicken, werden alle zugehörigen Stile angezeigt.

Im Screenshot oben sehen Sie, dass wir alle angewendeten Stilattribute sehen können. Das Padding stammt beispielsweise direkt aus dem Style-Attribut des <img>-Elements. Breite und Höhe stammen jedoch aus den jeweiligen nativen Attributen. Interessanterweise sehen Sie, dass auch Stile vom <center>-Tag, dem <body>-Tag und anderen übernommen wurden.

Es ist zwar gut, die einzelnen Stile und ihre Herkunft zu sehen, aber es ist auch sehr nützlich, die endgültigen Stile zu sehen, nachdem sie berechnet und auf das Element angewendet wurden. Das Endprodukt wird angezeigt, wenn Sie das Menü „Berechneter Stil“ auswählen, wie im Screenshot unten dargestellt.

Als Nächstes sehen wir uns kurz die anderen Funktionen des Tabs „Elemente“ an. Die folgenden Themen werden in zukünftigen Artikeln ausführlicher behandelt.

Box-Modell

Wenn Sie das Boxmodell sehen möchten, wie es auf das ausgewählte Element angewendet wird, wählen Sie das Menü „Messwerte“ aus:

Elementeigenschaften

Wenn Sie das Menü „Eigenschaften“ auswählen, sehen Sie alle Eigenschaften des Elements, wie sie von JavaScript und dem DOM gesehen werden:

Ereignis-Listener

Im Menü „Ereignislistener“ können Sie sich auch die Ereignislistener ansehen, die an das Element angehängt oder durch das Element gesendet werden:

Zusammenfassung

Auf dem Tab „Elemente“ sind viele Funktionen verfügbar. In zukünftigen Artikeln werden wir uns die einzelnen Menüs genauer ansehen.

Verwenden Sie den Tab „Elemente“, wenn Sie sehen möchten, wie die Seite im Browser selbst aussieht. Auf dem Tab „Elemente“ können Sie schnell und einfach Antworten auf häufige Fragen wie „Wie wird dieser Stil berechnet?“ oder „Welche HTML-Tags haben diese Komponente generiert?“ finden.

Der Tab „Elemente“ ist eine Art „Quellcode ansehen“ für Fortgeschrittene. Sie erhalten einen sehr detaillierten Überblick über Ihre Seite.

Nachdem Sie sich die Seite angesehen haben, fragen Sie sich vielleicht, wie HTML, CSS und Bilder dorthin gelangt sind. Auf dem Tab „Ressourcen“ (siehe unten) sehen Sie, wie der Clientbrowser und der Webserver kommunizieren, um diese Ressourcen zu senden.

Ressourcen

Sobald Ihre Anwendung funktioniert, sollten Sie als Nächstes die Netzwerk- und Bandbreitenleistung optimieren. Sie sollten die Übertragung Ihrer Anwendung vom Server zum Client so schnell und effizient wie möglich gestalten. Ihre Nutzer werden Ihnen für die schnelle Seitenladezeit danken, Sie sparen Geld für Bandbreite und Serverressourcen und Sie erzielen auch ein besseres Ranking in den Google-Suchergebnissen, da jetzt die Websitegeschwindigkeit berücksichtigt wird.

Der Tab „Ressourcen“ in den Entwicklertools bietet Ihnen einen Einblick in die Kommunikation zwischen Webserver und Client-Browser. Sie sehen alle vom Browser angeforderten Ressourcen (das ist immer sehr überraschend), die Zeit, die es dauert, sie vom Server zu empfangen, und wie viel Bandbreite während der Übertragung verwendet wird.

Ironischerweise wirkt sich die Ausführung des Tabs „Ressourcen“ auf die Seitenladeleistung aus. Daher ist er standardmäßig deaktiviert. Wenn Sie die Funktion zum ersten Mal nutzen, müssen Sie sie für die Seite aktivieren, die Sie gerade aufrufen.

Wir empfehlen, die Standardeinstellung „Nur für diese Sitzung aktivieren“ beizubehalten, da Sie die kleine Leistungseinbuße nicht unnötig in Kauf nehmen möchten. Wenn 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 für die Google-Startseite erforderlich sind und geladen werden.

Auf diesem Bildschirm sind viele Informationen zu sehen. Sehen wir uns sie daher einzeln an.

Standardmäßig wird angezeigt, wie lange es gedauert hat, alle Ressourcen für die Seite anzufordern und zu laden. Wenn Sie in der Liste der Ressourcen nach unten scrollen, werden Sie möglicherweise überrascht sein, da Sie möglicherweise nicht wissen, wie viele einzelne Anfragen vom Client gesendet werden. Eine hohe Anzahl von Anfragen vom Client kann sich erheblich auf die Leistung auswirken. Der erste Schritt zur Optimierung und eventuellen Reduzierung von Ressourcen besteht darin, zu erfahren, was genau angefordert wird.

Wenn Sie nur an Bildern oder Stylesheets interessiert sind, können Sie den Ressourcentyp über das Menü direkt unter dem Haupttab filtern.

Außerdem erfahren Sie, in welcher Reihenfolge die Ressourcen angefordert werden. Mit der Zeitleiste können Sie besser nachvollziehen, warum bestimmte Elemente auf Ihrer Seite später als andere angezeigt werden.

Nachdem Sie sich einen Überblick über alle angeforderten Ressourcen und die gesamte Zeitachse der Anfrage verschafft haben, sollten Sie sich die einzelnen Ressourcen genauer ansehen.

Wenn Sie feststellen, dass einige Ressourcen jedes Mal angefordert werden, wenn Sie auf die Seite zugreifen, sind Ihre Caching-Header nicht richtig konfiguriert. Wenn Sie sich alle Überschriften für eine Ressource ansehen möchten, klicken Sie in der Liste links auf die Ressource.

Überprüfen Sie in der Ansicht „Header“, ob der erwartete HTTP-Antwortcode festgelegt und die entsprechenden Header vorhanden sind. Wenn sich die Ressource beispielsweise selten oder nie ändert, sollte Ihr Server einen Expires-Header für weit in die Zukunft festlegen. Dadurch wird dem Browser mitgeteilt, dass die Ressource erst nach diesem Datum noch einmal angefordert werden soll. Dadurch wird die Anzahl der für Ihre Seite erforderlichen HTTP-Verbindungen reduziert und Ihre Website wird beschleunigt.

Zusammenfassung

Der Tab „Ressourcen“ bietet noch viele weitere Funktionen, die wir in einem späteren Artikel behandeln werden.

Auf dem Tab „Ressourcen“ sehen Sie, wie Ihr Clientbrowser mit dem Webserver kommuniziert. Anhand dieser Informationen, einschließlich Anfragezeit, Anfragegröße und Anfragereihenfolge, können Sie intelligente Optimierungen vornehmen, um die Serverlast und die Kosten zu senken, die Geschwindigkeit zu erhöhen und die Nutzerfreundlichkeit zu verbessern.

Die Geschwindigkeit ist für Ihre Website, Ihre Nutzer und Suchmaschinen sehr wichtig. Nachdem Sie die Anzahl und Größe der Ressourcen reduziert und die entsprechenden HTTP-Unterhaltungen eingerichtet haben, sollten Sie als Nächstes die Scripts auf Ihrer Seite untersuchen und optimieren. Glücklicherweise bietet der Tab „Scripts“ (Scripts), der im Folgenden beschrieben wird, genau diese Möglichkeit.

Zusätzliche Ressourcen

Weitere Informationen zu den Entwicklertools finden Sie hier:

• Video und Folien zur Präsentation der Chrome-Entwicklertools auf der Google I/O 2010
• Anleitung zu den Chrome-Entwicklertools

Und natürlich halten wir Sie auf html5rocks.com über Teil 2 dieses Artikels und viele andere tolle HTML5- und Chrome-Inhalte auf dem Laufenden.