Einführung
Google Chrome ist ein leistungsstarker und leistungsfähiger Webbrowser, der wegweisend dafür ist, was für Anwendungen im Web möglich ist. Google hat hart daran gearbeitet, unseren Endnutzern ein sehr schnelles, stabiles und funktionsreiches Browsererlebnis zu bieten. Google sorgt auch dafür, dass Entwickler wie Sie Chrome optimal nutzen können. Die in Chrome und Safari gebündelten Entwicklertools ermöglichen Webentwicklern und Programmierern einen umfassenden Zugriff auf das Innere des Browsers und ihre Webanwendung.
Die Entwicklertools sind Teil des Open-Source-Webkit-Projekts. Der Großteil der in diesem Artikel behandelten Themen gilt sowohl für Google Chrome als auch für Safari. Da die Screenshots jedoch mit Google Chrome 6 aufgenommen wurden, kann es bei Ihrem Browser zu leichten Unterschieden kommen.
In diesem Artikel erhalten Sie einen Überblick über die Entwicklertools und die beliebtesten und nützlichsten Funktionen. Unsere Zielgruppe sind Webentwickler, die die Entwicklertools noch nicht kannten oder sich noch nicht damit befasst haben. Aber selbst als erfahrener Webentwickler können Sie sicher den ein oder anderen Tipp mitnehmen.
Wenn Ihre Instanz der Entwicklertools nicht ganz mit den Screenshots in diesem Artikel übereinstimmt, empfehlen wir ein Upgrade auf 5, damit Sie alle hier beschriebenen Funktionen nutzen können.
Überblick
Insgesamt gibt es acht Hauptgruppen von Tools für die Entwicklertools, die mit jedem Release erweitert werden. Chrome 5 bietet jetzt Elemente, Ressourcen, Skripts, Zeitachse, Profile, Speicher, Audits und die Konsole.
Elemente
Mit dem Element-Tool können Sie die Webseite so betrachten, wie sie der Browser sieht. Mit dem Element-Tool können Sie also den HTML-Code und die CSS-Rohdaten sowie das Dokumentobjektmodell sehen und beides in Echtzeit bearbeiten.
Ressourcen
Verwenden Sie das Ressourcen-Tool, um zu erfahren, welche Komponenten Ihre Webseite oder Anwendung von Webservern anfordert, wie lange diese Anforderungen dauern und wie viel Bandbreite benötigt wird. Sie können auch die HTTP-Anfrage- und -Antwortheader für jede Ihrer Ressourcen ansehen. Das Ressourcen-Tool eignet sich perfekt, um die Seitenladezeit zu verkürzen.
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 der Eingabe ändern!
Zeitplan
Mit dem Zeitachsentool erhältst du detaillierte Einblicke in die Aktivitäten im Hintergrund von Chrome, sodass du das Timing und die Geschwindigkeit noch besser analysieren kannst. Sie erfahren, wie lange der Browser für die Verarbeitung von DOM-Ereignissen, das Rendern von Seitenlayouts und Darstellen des Fensters benötigt.
Profile
Mit dem Tool „Profile“ können Sie die Leistung von JavaScript-Skripts erfassen und analysieren. So können Sie beispielsweise herausfinden, welche Funktionen die meiste Zeit zur Ausführung benötigen, und sich genau darauf konzentrieren, wo sie optimiert werden sollen.
Speicher
Moderne Webanwendungen erfordern mehr Persistenz als einfache Cookies, und das Speichertool unterstützt Sie beim Erfassen, Abfragen und Debuggen des lokalen Browserspeichers. Mit diesem Tool können Daten angezeigt und abgefragt werden, die in lokalen Datenbanken, im lokalen Speicher, Sitzungsspeicher und in Cookies gespeichert sind.
Audit
Das Prüfungstool ist, als würde Ihr Weboptimierungsberater direkt neben Ihnen sitzen. Dieses Tool kann eine Seite während des Ladevorgangs analysieren und Vorschläge und Optimierungen zur Verringerung der Seitenladezeit und zur Steigerung der wahrgenommenen und echten Reaktionszeit liefern.
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.
Unter jedem Betriebssystem können Sie einfach mit der rechten Maustaste auf ein Element auf der Seite klicken und die Option "Element untersuchen" im Kontextmenü auswählen. Daraufhin werden die Entwicklertools geöffnet und die Aufschlüsselung des Elements, auf das Sie geklickt haben, wird geöffnet.
Wenn Sie sich dies in der Praxis ansehen möchten, rufen Sie 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 "Untersuchen" auswählen, werden die Entwicklertools angezeigt, die wie folgt aussehen sollten:
Sie sehen, wie die Entwicklertools auf dem Tab „Elemente“ geöffnet wurden und automatisch das <img>-Tag für das Google-Logo aufschlüsselten und dieses hervorgehoben haben. Dies ist sehr nützlich, wenn Sie wissen möchten, welcher HTML-Code ein bestimmtes Seitenelement generiert hat.
Sie können die Entwicklertools auch mit einem einfachen Tastaturkürzel öffnen. Versuchen Sie je nach Betriebssystem Folgendes:
- Wählen Sie unter Windows und Linux die Schlüssel
Control-Shift-Jaus. - Wählen Sie auf einem Mac die
Command-Option-J-Taste aus.
Schließlich können Sie die Tools auch über das Hauptmenü des Browsers öffnen.
Wählen Sie auf einem Mac in der Hauptmenüleiste „Ansicht“, „Entwickler“ und „Entwicklertools“ aus.
Wählen Sie auf einem Windows-PC oben rechts im Seitenmenü „Entwickler“ und „Entwicklertools“ aus.
Nachdem Sie 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 „Elements“. Dies ist Ihr Fenster in die Struktur der Webseite, so wie es Ihr Browser sieht.
DOM-Suche
Sie werden häufig die Tabs „Elemente“ aufrufen, wenn Sie das HTML-Snippet für einen bestimmten Aspekt der Seite identifizieren 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 schön formatiert, sodass HTML-Elemente, deren Herkunft und Nachfolgerelemente ganz einfach angezeigt werden. Allzu oft enthalten Seiten, die du besuchst, vereinfachten oder einfach unschönen HTML-Code, sodass die Struktur der Seite schwer zu erkennen ist. Der Tab „Elemente“ ist die Lösung, um die eigentliche zugrunde liegende Struktur der Seite zu sehen.
Im Folgenden sehen Sie beispielsweise die Ausgabe des Quelltexts der Google-Startseite.
Die oben genannte Quelle ist schwer zu lesen, da sie optimiert und reduziert 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 schön gedruckte, Syntaxhervorhebung der Elementhierarchie anzuzeigen.
Auf dem Tab „Elemente“ können Sie für jedes Element auf der Seite die Stile, Messwerte, Eigenschaften und Ereignis-Listener durchsuchen, mit ihnen interagieren und manchmal sogar die Stile ändern.
Stilsuche
Die kaskadierende Beschaffenheit von CSS macht den Browser für Stile auf dem Tab „Elemente“ sehr nützlich. Manchmal werden Stile auf sich selbst minimiert und es erscheinen unbeabsichtigte visuelle Elemente. 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 Stile angezeigt, die diesem Element zugeordnet sind.
Im Screenshot oben sehen Sie, dass wir alle angewendeten Stilattribute erkennen können. Der Innenabstand stammt beispielsweise direkt aus dem Stilattribut des <img>-Elements. Breite und Höhe stammen jedoch aus den jeweiligen nativen Attributen. Interessanterweise sehen Sie, dass Stile auch vom <center>-Tag, vom <body>-Tag und anderen Tags übernommen werden.
Es ist zwar großartig, die einzelnen Stile und ihre Herkunft zu sehen, es ist aber auch sehr nützlich, den endgültigen Satz von Stilen zu sehen, nachdem er berechnet und auf das Element angewendet wurde. Das fertige Produkt sehen Sie, wenn Sie das Menü „Berechneter Stil“ auswählen, wie im Screenshot unten dargestellt.
Als Nächstes werfen wir einen kurzen Blick auf die anderen Funktionen, die die Registerkarte „Elemente“ bietet. Folgende Themen werden in künftigen Artikeln ausführlicher behandelt:
Kastenmodell
Sie können sehen, wie das Boxmodell auf das ausgewählte Element angewendet wird, indem Sie das Menü „Metrics“ auswählen:
Elementeigenschaften
Sie können alle Eigenschaften des Elements so sehen, wie es JavaScript und das DOM sehen würden, indem 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 die durch das Element blasen:
Zusammenfassung
Der Tab „Elements“ bietet viele Funktionen. In zukünftigen Artikeln werden die einzelnen Menüs noch ausführlicher behandelt.
Verwenden Sie die Registerkarte „Elemente“, wenn Sie sehen möchten, wie die Seite für den Browser selbst aussieht. Häufige Probleme wie "Wie wird dieser Stil berechnet?" oder "Welche HTML-Tags haben diese Komponente generiert?" können über den Tab "Elemente" schnell und einfach behoben werden.
Stellen Sie sich den Tab „Elemente“ als eine „übergeordnete Ansichtsquelle“ vor, mit der Sie einen sehr genauen Einblick in Ihre Seite erhalten.
Nachdem Sie die Seite untersucht haben, fragen Sie sich vielleicht, wie HTML, CSS und Bilder überhaupt dorthin gelangt sind. Auf der Registerkarte „Resources“, die als Nächstes beschrieben wird, sehen Sie, wie der Client-Browser und der Webserver kommunizieren, um diese Ressourcen zu senden.
Ressourcen
Sobald Ihre Anwendung funktioniert, sollten Sie im nächsten Schritt die Netzwerk- und Bandbreitenleistung optimieren. Versuchen Sie, die Übertragung Ihrer Anwendung von Server zu Client so schnell und effizient wie möglich zu gestalten. Ihre Nutzer werden es Ihnen dank des schnellen Seitenaufbaus danken, Sie spart Bandbreite und Serverressourcen. Außerdem schneiden Sie besser in den Google-Suchergebnissen ab (wobei jetzt auch die Geschwindigkeit der Website berücksichtigt wird).
Der Tab „Resources“ in den Entwicklertools bietet Zugang zu Informationen zur Kommunikation zwischen Webserver und Clientbrowser. Hier sehen Sie alle vom Browser angeforderten Ressourcen, was immer sehr überraschend ist, wie lange es dauert, bis sie vom Server empfangen werden, und wie viel Bandbreite bei der Übertragung verbraucht wurde.
Da die Ausführung des Tabs „Ressourcen“ die Seitenladeleistung beeinträchtigt, ist er standardmäßig deaktiviert. Wenn Sie zum ersten Mal auf die Funktion zugreifen, müssen Sie sie für die angezeigte Seite aktivieren.
Wir empfehlen Ihnen, die Standardeinstellung "Nur für diese Sitzung aktivieren" aktiviert zu lassen, da Sie die geringe Leistungseinbußen nicht unnötigerweise vermeiden 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 erforderlichen und geladenen Ressourcen für die Google-Startseite.
Dieser Bildschirm enthält viele Informationen, sehen wir uns also Stück für Stück an.
Standardmäßig wird angezeigt, wie lange es gedauert hat, alle Ressourcen für die Seite anzufordern und zu laden. Das Scrollen in der Ressourcenliste wird Sie vielleicht überraschen, da Sie möglicherweise nicht wissen, wie viele einzelne Anfragen vom Kunden gestellt werden. Eine große Anzahl von Anfragen vom Client kann die Leistung erheblich beeinträchtigen. Der erste Schritt zur Optimierung und möglichen Reduzierung von Ressourcen ist, den genauen Überblick darüber zu erhalten, was genau angefordert wird.
Wenn Sie nur an Bildern oder Stylesheets interessiert sind, können Sie den Ressourcentyp über das Menü direkt unter dem Fenster des Haupttabs filtern.
Außerdem erfahren Sie, in welcher Reihenfolge die Ressourcen angefordert werden. Mithilfe der Zeitachse können Sie sich ein besseres Bild davon machen, warum bestimmte Elemente auf Ihrer Seite später erscheinen als andere.
Nachdem Sie einen Überblick über alle angeforderten Ressourcen und deren Zusammensetzung im gesamten Anforderungszeitplan erhalten haben, 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 Header 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 den Header „expires“ für weit in der Zukunft festlegen. Dadurch wird dem Browser mitgeteilt, dass die Ressource bis zu diesem Datum nicht noch einmal angefordert werden soll. So wird die Anzahl der für Ihre Seite erforderlichen HTTP-Verbindungen reduziert und die Website beschleunigt.
Zusammenfassung
Der Tab „Resources“ bietet noch viel mehr, auf den wir in einem späteren Artikel eingehen werden.
Auf dem Tab „Ressourcen“ sehen Sie, wie Ihr Client-Browser mit dem Webserver kommuniziert. Mithilfe dieser Informationen, einschließlich Anfragezeit, Anfragegröße und Anfragereihenfolge, können Sie intelligente Optimierungen vornehmen, um Serverlast und Kosten zu reduzieren, die Geschwindigkeit zu erhöhen und die Nutzerfreundlichkeit zu verbessern.
Geschwindigkeit ist für Ihre Website, Ihre Nutzer und Suchmaschinen von großer Bedeutung. Nachdem die Anzahl und Größe der Ressourcen reduziert und die entsprechenden HTTP-Unterhaltungen ausgeführt wurden, besteht der nächste Schritt darin, die auf Ihrer Seite ausgeführten Skripts zu untersuchen und zu optimieren. Erfreulicherweise ist dies auf dem Tab „Skripts“ möglich, auf den wir als Nächstes eingehen.
Weitere Ressourcen
Weitere Informationen zu den Entwicklertools finden Sie hier:
- Video zur Präsentation der Chrome-Entwicklertools und Folien von der Google I/O 2010
- Anleitung für Chrome-Entwicklertools
Und natürlich halten Sie sich auf html5rocks.com für Teil 2 dieses Artikels auf dem Laufenden, zusammen mit vielen weiteren tollen HTML5- und Chrome-Inhalten.