Chrome Dev Tools: Insidertipps

Chromes Version von Firebug hat sich ordentlich gemausert. Inspiriert durch dieses Video gibts hier nun also ein paar nicht so bekannte Features der Devtools.

Konsole überall einblenden

In jedem Panel der Devtools lässt sich mittels Druck auf ESC die Konsole hochfahren und so simultan arbeiten.

Konsole hochfahren

Weitere Shortcuts gibts hier.

Die Funktionen dir() und copy()

Bekanntlich lässt sich durch Eingabe des DOM-Elements in die Konsole das HTML dazu selektiv anzeigen (siehe Bild oben: document.body). Mittels der Funktion dir() lässt sich eine weit detailliertere Auflistung anzeigen, die u.a. auch Event Handler anzeigt:

dir

Mit copy() lässt sich Text in die Zwischenablage kopieren.

copy(document.body.innerText)

Danach befindet sich der gesamte lesbare Text der Webseite in der Zwischenablage.

Ach, bevor ichs vergesse: $0 ist eine Referenz auf das aktuell markierte Element:

$0

Farbmodell wechseln

Per Klick auf den farbigen Kasten lässt sich das Farbmodell togglen. Zur Verfügung steht die Hex-Anzeige von RGB, RGB in ausgeschriebener Form und das sehr intuitive HSL.

HEX

RGB

HSL

Dateirevisionen

Wenn man im „Element untersuchen“ Modus CSS-Änderungen vornimmt und anschließend auf die CSS-Datei klickt (markiert), hat man nun die Möglichkeit, alte Revisionen anzusehen und diese wiederherzustellen.

File Revision 1

File Revision 2

In den Chrome canary builds (Entwicklungsversion) gibt es dann zusätzlich noch die Möglichkeit, das CSS direkt aus dieser Ansicht heraus zu speichern.

File Revision 3

Codeformatierung

Leider ebenfalls noch dem Canary-Build vorbehalten: Pretty Printing von Code. Minifiziertes Javascript lässt sich so schön betrachten:

Codeformat: Auf die Klammern klicken

Anschließend sieht es dann so aus:

Formatiert

Die Timeline

Kein wirklicher Geheimtipp, aber trotzdem von vielen vernachlässigt: Die supermächtige Timeline-Ansicht. Hier verrät euch Chrome, was so im Hintergrund alles abgeht. Reflows, Repaints, Requests… Alles wunderbar aufgelistet:

Timeline

Remote Debugging

Das meiner Meinung nach geilste Feature im Canary Build (was es hoffentlich so schnell wie möglich in die offizielle Version schafft!): Remote Debugging. Dazu startet ihr Chrome einfach mit dem Parameter

--remote-debugging-port=<portnummer>

Remote Debugging

Dann Chrome starten und in einer neuen Instanz (muss nicht der canary-build sein) auf http://localhost:portnummer connecten.

Was wir sehen sind also erstmal die offenen Tabs der anderen Browser-Instanz.

Remote Debugging

Wählen wir jetzt ein Tab aus, bekommen wir die Konsole des anderen Browsers präsentiert und können uns austoben. Superpraktisch, wenn man bspw. für mobile Geräte entwickelt.

Remote Console

Mehr zum Remote-Debugging.

Weitere Posts:

• What you need to know about the DOM: 20 functions in 100 lines
• Cross Domain AJAX Guide
• Änderungen einer Form überwachen
• Angriffe auf Webanwendungen – Teil 2: Session-Highjacking und Session-Fixation
• Browserscope