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

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

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

$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

HEX

RGB

RGB

HSL

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 1


File Revision 2

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

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

Codeformat: Auf die Klammern klicken

Anschließend sieht es dann so aus:

Formatiert

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

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

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

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

Remote Console

Mehr zum Remote-Debugging.

Weitere Posts:

Dieser Beitrag wurde unter Javascript, webdev veröffentlicht. Setze ein Lesezeichen auf den Permalink.

7 Antworten auf Chrome Dev Tools: Insidertipps

  1. Daniel sagt:

    Guter Artikel, viele gute Tipps. Danke!

  2. Cykan sagt:

    Hi! Kann mich da auch nur anschließen. Sehr gute Tipps! Einiges kannte ich bereits durch den GDD in Berlin, es war aber auch viel Neues dabei. Thx!

    Hast du schon mal das Remote Debugging mit Mobiles ausprobiert? Kann mir gerade nicht vorstellen, wie man auf iPhone und Android den Parameter setzt.

    LG
    Cykan

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.