Chrome Developer Tools

Datum/Zeit: Dienstag, 25. September 2012, 1900
Ort: Meteotest (Fabrikstrasse 14, Bern)

Ein kurzer Überblick und ein paar coole Tricks zu den Chrome Developer Tools für Webentwickler. Evt. mit Ausblick auf Tools in anderen Browsern und mobilen Geräten. Vortrag von christian studer (Meteotest).

Freiwillige Anmeldung auf Techup.ch

Einleitung

Am Anfang stand die Firefox-Erweiterung FireBug. Mittlerweile haben alle Browser ähnliche Tools für Webseitenentwickler eingebaut. Diese Notizen hier konzentrieren sich auf die Web Developer Tools von https://www.google.com/intl/en/chrome/browser/, praktisch alle Funktionen sollten auch in anderen Browsern zu finden sein. (Siehe Andere Browser.)

Chrome Developer Tools

Die offizielle Dokumentation enthält einen Beschrieb aller Panels. Hier sind einige zusätzliche Notizen aufgelistet.

  • Zum Öffnen entweder CTRL-Shift-I (Command-CTRL-I) drücken oder einen Rechtsklick auf ein HTML-Element machen und Element untersuchen wählen.
  • Unten rechts sind die Warnungen und Fehler angezeigt (Fehlende CSS/Bilder, JavaScript-Fehler), rechts daneben die Einstellungen.
  • In den Einstellungen kann unter anderem der User Agent angepasst und eine fixe Fenstergrösse angegeben werdern.
  • Die ganzen Tools können mit dem Knopf unten links angedockt werden oder in einem separaten Fenster angezeigt werden.
  • Die JavaScript-Konsole, die unten manchmal aufspringt, kann mit ESC geöffnet und geschlossen werden.

Elements

  • Der HTML-Code hier entspricht dem aktuellen Dokument wie es dargestellt wird. Im Gegensatz dazu liefert Seitenquelltext anzeigen der Code, wie er vom Server geliefert wird.
  • Alle Elemente können geändert (Doppelklick), verschoben (Drag'n Drop) und gelöscht werden (Rechtsklick).
  • Mit den Cursortasten kann besonders bequem durch den DOM-Baum navigiert werden.
  • Die CSS-Regeln rechts sind ebenfalls manipulierbar.
  • Etwas versteckt: Der kleine Knopf Toggle Element State oben rechts erlaubt die CSS-Regeln für das aktuelle Element auch mit :hover etc. anzuzeigen.
  • Zahlenwerte im CSS können mit den Cursortasten auf/ab verändert werden (Shift für 10er-Sprünge, Alt für 0.1er).
  • Runterscrollen im CSS-Teil zeigt unter anderem unter Metrics das Box-Modell von CSS: Margins, Borders und Paddings. Diese Werte sind ebenfalls per Doppelklick editierbar.
  • Ein editiertes CSS kann im Sources-Panel gespeichert werden: Alle Änderungen werden live ins dazugehörige CSS-Dokument übertragen.
  • Die Suche oben versteht sowohl Volltext wie auch CSS-Selektoren (z.B. p.meineKlasse findet alle p-Tags mit der Klasse meineKlasse).

Resources

  • Einfach Auflistung aller Daten, welche zur aktuellen Seite gehören.
  • Unter Frames befinden sich alle Dateien (Bilder, CSS, JavaScript, Fonts etc.).
  • Unter Cookies die assozierten Cookies, diese können einzeln gelöscht werden.
  • Die restlichen Einträge sind HTML5-Features wie lokale Datenbanken und Caches.

Network

  • Zeigt alle HTTP-Requests seit dem öffnen der Developer Tools für die aktuelle Seite. Falls leer: F5 lädt die Seite neu.
  • Wenn unten links Preserve Log upon Navigation aktiv ist, werden alle Requests unten angehängt, sonst beginnt es auf jeder Seite neu.
  • Unten können die Request zusätzlich gefiltert werden, z.B. nach Bildern oder nach AJAX-Requests (XHR).
  • In der Statuszeile ist auch der effektive Datenaustausch in kb ohne Cache angezeigt.
  • Die Timeline zeigt Abhängigkeiten auf, wann welche Datei geladen wird. Die blaue vertikale Linie entspricht dem document.ready-Event (DOM-Baum verfügbar), die rote dem document.load-Event (Alle Bilder etc. geladen).
  • Einen Klick auf einen Request zeigt die Details: Request- und Responseheader, Inhalt, mitgeschickte und erhaltene Cookies. Mit ESC kommt man wieder zur Timeline zurück.
  • Mit Rechtsklick irgendwo auf die Requests lässt sich einfach der Cache leeren oder Cookies löschen.

Sources

  • JavaScript-Debugger und CSS-Editor. Alle veränderten Dateien können hier gespeichert werden (Rechtsklick).
  • Die Dokumentenliste (Navigator) ist evt. versteckt, mit dem Icon oben links einblenden und dann anpinnen. Sources sind Dateien, welche zur Seite gehören, Content scripts kann man ignorieren, sie sind nur für Chrome Extension-Entwickler relevant.
  • In JavaScript können mit Klick auf die Zeilennummer Breakpoints gesetzt werden. Das JavaScript hält bei der Ausführung an diesem Punkt an. Um Initialisierungscode zu testen: Breakpoint setzen und mit F5 die Seite neu laden.
  • Oben rechts sind die Debugger-Kontrollen: Script anhalten/weiterführen (F8), einen Zeile ausführen und dabei Funktionsaufrufe überspringen (Sie werden dennoch ausgeführt, aber nicht im Debugger gezeigt, F10), nächste Zeile ausführen (F11), aktuelle Funktion ausühren, bis man herausspringt (Shift-F11), alle Breakpoints ignorieren.
  • Wenn der Debugger angehalten hat, können in den Tooltips der Variablen deren Werte angezeigt werden. Rechts unter Scope Variables sieht man diese ebenfalls und können verändert werden.
  • In der Konsole (Mit ESC öffnen) kann JavaScript-Code an der aktuellen Stelle ausprobiert werden. Die Variable $0 entspricht übrigens dem aktuell ausgewählen DOM-Element (Unter Elements).
  • Möchte man eine Variable oder einen Ausdruck (Ganze Funktionsaufrufe möglich) dauern sehen, diese bei Watch Expressions hinzufügen.
  • Unten links kann mit dem Pausen-Icon der Code beim Auftreten von Exceptions angehalten werden.
  • Rechts davon kann JavaScript-Code schöner formatiert werden (Pretty print).
  • Mit CTRL-O (Command-O) können Files schnell gesucht und geöffnet werden.
  • Mit CTRL-Shift-O (Command-Shift-O) können CSS-Klassen und JavaScript-Funktionen gesucht und geöffnet werden.

Timeline & Profiles

Fortgeschrittene Performanceanalyse-Tools für massive JavaScript-Applikationen.

Bevor man hier beginnt zu basteln, lohnt es sich alle Optimiserungsvorschläge von PageSpeed umzusetzen.

Audits & PageSpeed

Audits ist eine weniger schöne Version der zusätzlich installierbaren PageSpeed-Erweiterung. Man erhält einen Score der aktuellen Seite und dokumentierte Optimierungsvorschläge.

Andere Browser

Firefox

Dokumentation

Die neuen Tools im aktuellen Firefox sind im Web-Entwickler-Menu zu finden und etwas zerstreut. Lustig ist die 3D-Ansicht des DOM-Baumes (CTRL-Shift-I und dann unten rechts 3D-Ansicht).

Wem die neuen Tools nicht passen, kann noch immer FireBug installieren.

Internet Explorer

Dokumentation

Mit F12 öffnen. Seit Version 8 oder 9 vorhanden. Wichtigster Knopf, etwa in der Mitte: Mit Browsermodus können alte Browser bis zur Version 7 simuliert werden.

Safari

Dokumentation

In den Optionen unter Erweitert → Menü 'Entwickler' in der Menüleiste anzeigen aktivieren. Über die Menüzeile oder mit CTRL-Command-I öffnen. Kryptische Symbole.

Cooles Feature: Ab iOS 6 ist es möglich, den mobilen Safari-Browser auf dem iPhone oder iPad von einem Desktop-Mac aus zu debuggen.

Weitere Tools

vortraege/chromedevelopertools.txt · Zuletzt geändert: d.10.2012 13:16 von christian
Nach oben
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0