Chrome DevTools: Command Line API

written by devangelist on November 29, 2014 in Allgemein and API and Browser and Chrome and Javascript with no comments

Die Chrome Developer Tools sind ein beliebtes Werkzeug bei vielen Entwicklern, doch manchmal ist gar nicht bewusst, was dieses Tool eigentlich alles kann.

Die Command Line API ergänzt die Console in Chrome mit einigen nützlichen Features, mit denen es nicht nur möglich ist, Elemente im DOM zu untersuchen, sondern auch den Profiler zu steuern oder DOM Events zu überwachen.

$_

Gibt den Wert des zuletzt verwendeten Ausdrucks zurück. Wenn zum Beispiel der letzte Ausdruck 3 + 3 ist, dann enthält $_ den Wert 6.

> 12 * 12
  144
> $_
  144

Wenn gerade ein Array mit einer Länge von 15 verwendet wurde, dann kann mit $_.length die länge (15) des Arrays ausgegeben werden. Aber aufgepasst: einmal abgefragt, wird $_.length zum zuletzt verwendeten Ausdruck und somit ergibt $_ gleich 15.

>  array = [ 1, 2, 3, 4 ]
   [1, 2, 3, 4]
>  $_
   [1, 2, 3, 4]
>  array.length
   4
>  $_
   4

$0-$4

Wenn in den Chrome Developer Tools DOM Elemente selektiert wurden, dann bieten $0, $1, $2 und $3 Zugriff darauf. Dies ist besonders praktisch, wenn einmal schnell ein Element selektiert werden soll:

Zuletzt selektierte Element mittels $0 in den DevTools

Wird nach dem .content das .sidebar-Element selektiert, dann wird letzteres mit $0 und .content mit $1 referenziert:

Zuletzt selektierte Element mittels $1 in den DevTools

$(selector)

Diese Funktion ist im Prinzip ein Äquivalent zur document.querySelector() Funktion und gibt eine Referenz zum ersten gefundenen Element.

> $("a").href

Chrome DevTools querySelector

$$(selector)

Diese Funktion ist ein Alias für document.querySelectorAll() und gibt alle gematchten Elemente zurück.

> links = $$("a")

Chrome DevTools querySelectorAll

$x(path)

Diese Funktion gibt ein Array von DOM Elementen zurück, welche die angegebene XPath-Expression matchen:

> $x("//ul[li]");

Chrome Developer Tools - XPath

debug(function)

Mit debug wird ein Breakpoint in die angegebene Funktion gesetzt. Wird diese aufgerufen, so öffnet sich der Debugger im Source-Panel und erlaubt den Code der aktuellen Funktion durchzusteppen:

> debug(sum)
  sum( 1, 2 )

Chrome DevTools Console - Debug

Das Debugging kann mit undebug(function) wieder beendet werden.

Inspect(object/function)

Beim Aufruf von inspect öffnet sich das Elements Panel mit dem selektierten Element:

> inspect(document.body.firstChild)

inspect in Chrome Developer Tools

getEventListeners(object)

Gibt alle registrierten Listeners auf das angegebene Objekt zurück. Die Rückgabe ist ein Objekt welches pro registrierten Event-Typ (zum Beispiel scroll oder keydown) ein Array beinhaltet:

>  document.onscroll = function() {
      console.log( window.pageYOffset );
   }

>  getEventListeners(document)
   Object {scroll: Array[1]}

keys/values (object)

keys gibt ein Array mit allen Namen der Properties zurück – values macht das Selbe mit den Werten:

> fruit = { name: "banana", color: "yellow" }
> keys(fruit)
  ["name", "color"]
> values(fruit)
  ["banana", "yellow"]

monitor(function)

Dabei wird in eine Message geloggt, wenn die angegebene Funktion aufgerufen wird.

> function sum(a, b) { return a + b; }
> monitor(sum)
> sum( 1, 2 )
  function sum called with arguments: 1, 2 

Die Ausgabe beinhaltet den Funktionsnamen und die mitgegebenen Argumente.
Das Monitoring kann mit unmonitor(function) wieder abgestellt werden.

monitorEvents(object[, events])

Wenn ein oder mehrere Events auf das angegebene Objekt getriggert werden, wird das Event in der Console ausgegeben:

monitorEvents(window, "scroll")

Chrome Developer Tools - Monitor events

Dies funktioniert auch mit mehreren Event-Angaben und auf alle gängigen Event-Typen wie mousedown, keydown, touchstart, change usw.:

monitorEvents(window, ["scroll", "resize"])

Das Event-Monitoring kann mit unmonitorEvents(objects[, events]) wieder beendet werden:

unmonitorEvents(window, "scroll")
unmonitorEvents(window)

profile([name])

Startet eine JavaScript CPU Profiling Session mit einem optionalen Namen-Parameter. Die Session kann mit profileEnd([name]) wieder beendet werden:

Chrome Developer Tools - profile starten und beenden

table(data[, columns])

Diese Funktion kann hilfreich sein um Daten schnell und übersichtlich darzustellen und erklärt sich von selbst:

Chrome Dev Tools - Tabellen formatieren

copy(object)

Kopiert das angegebene Objekt als String in die Zwischenablage:

> copy($0);

clear

Was das wohl macht ;-) ?

Chrome DevTools: Command Line API: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 5,00 von 5 Punkte, 1 abgegebene Stimmen.
Loading ... Loading ...

About the Author

Roberto Bez ist passionierter Webentwickler und TechLead bei der HolidayCheck AG. Für Roberto bedeutet das Entwickeln nicht nur Arbeit, sondern auch Freude, Motivation und täglich neue, aufregende Herausforderungen. Besonders gerne setzt er sich mit neuen Webtechnologien sowie Datenbanken aller Art auseinander und versucht diese in die tägliche Anwendungsentwicklung miteinzubringen. Neben dem Entwickeln trifft man ihn gerne Abends beim Laufen oder im Sommer bei Mountainbike-Touren durch die schönen Berge Südtirols.