| 

.NET C# Java Javascript Exception

7
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 ...

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 ;-) ?

Note: There is a rating embedded within this post, please visit this post to rate it.
allgemein javascript api browser chrome
Schreibe einen Kommentar:
Themen:
chrome browser api javascript allgemein
Entweder einloggen... ...oder ohne Wartezeit registrieren
Benutzername
Passwort
Passwort wiederholen
E-Mail