Die Befehlszeilen -API zum Spaß und Gewinn

Browser Developer Tool Command Line API: Ein leistungsstarkes Tool zur Verbesserung der Entwicklung und des Debuggeneffizienz

In diesem Artikel wird die leistungsstarke Befehlszeilen -API in Browser -Entwickler -Tools untersucht, die eine Reihe von Aliase, bequemen Funktionen und Verknüpfungen bietet, um die Entwicklung und Debugging -Erfahrung erheblich zu verbessern.

Kernpunkte:

Mit der Befehlszeilen -API können Entwickler mit Webseiten in der JavaScript -Konsole interagieren.
API ist auf den Zugriff auf JavaScript -Konsole beschränkt und kann nicht für Seitenskripte verwendet werden. Es ist jedoch zweckmäßig, mit Code -Snippets direkt im Browserfenster zu experimentieren.
• $ API bietet eine Vielzahl von Funktionen für DOM -Exploration, Objektverfolgung und Konsolendebugging, einschließlich document.querySelector (dir alias), debug (listen Sie alle Eigenschaften des Objekts auf), monitor und (Setzen Sie Breakpoints und Monitor -Funktionsaufrufe).
• Trotz der Einschränkungen (z. B. nicht für native Methoden oder benutzerdefinierte Ereignisse) ist die Befehlszeilen -API ein leistungsstarkes Werkzeug für Entwickler, was die Effizienz erheblich erhöht und Workflows vereinfacht.

Die Befehlszeilen -API enthält eine Reihe von Aliase, bequemen Funktionen und Verknüpfungen, mit denen Sie direkt in der JavaScript -Konsole mit Webseiten interagieren können. In diesem Artikel werden einige praktische Tools und ihre Anwendungen zur Verbesserung der Entwicklung und der Debugging -Erfahrung eingeführt.

Sie können auf verschiedene Weise auf die JavaScript -Konsole des Browsers zugreifen. Normalerweise drücken Sie die Taste F12 und klicken Sie auf die Registerkarte "Konsole".

Bevor wir tiefer gehen, lass uns ein Quiz haben: Wissen Sie, wie Sie einen Umriss des CSS -Layouts in Ihrem Browser visualisieren?

Antwort: Es sind nur 108 Bytes Code erforderlich.

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

Wie Addy Osmani, der Ersteller dieses prägnanten Code, sagte, dies sei ein "Twitter-Debugger". Sie können es jetzt versuchen. Kopieren Sie einfach diese Codezeile und fügen Sie sie in die JavaScript -Konsole Ihrer bevorzugten Entwickler -Tools (wie Chromes Devtools, Firefox's Firebug, Operas Libelle, Safaris Webinspektor und sogar IE -F12 -Tools) ein

Objekte). $ console

Während die Erzeugung von Farbhexadezimalwerten beeindruckend ist, möchte ich die Besonderen mehr Aufmerksamkeit schenken. Dies ist ein Alias ​​für und eines der vielen cleveren Merkmale in der Befehlszeilen -API. Lassen Sie uns sehen, welche anderen Funktionen die API bieten kann.

$$ Die Befehlszeilen -API ist nur in der JavaScript -Konsole verfügbar. Sie können die API nicht den Skripten auf der Seite dienen. Der Vorteil ist jedoch, dass Ihnen dies die Möglichkeit bietet, alle Code -Snippets für den Rest dieses Artikels direkt im Browserfenster auszuprobieren. Öffnen Sie einfach Ihre JavaScript -Konsole und Ihr Experiment. document.querySelectorAll

DOM -Exploration

Wenn Sie mit der JQuery -Bibliothek vertraut sind, haben Sie möglicherweise vermutet, was

tut. Als Alias ​​für wird ein Verweis auf das erste DOM -Element zurückgegeben, das dem angegebenen CSS -Selektor entspricht.

Lassen Sie uns sehen, wie Sie es im berühmten Cookie Clicker -Spiel verwenden. Wenn Sie noch nie auf dieses monotone, aber seltsam süchtig machende Spiel gestoßen sind: Sie klicken im Grunde auf einen großen Keks, um mehr Backwaren zu produzieren und eine Vielzahl von Backgeräten zu kaufen. Dann machen diese Geräte mehr Cookies ... Sie bekommen es.

Wäre es nicht toll, wenn wir die Konsole auf die Cookies klicken und unsere Hände geben und eine Pause machen könnten? Mit nur einem kleinen JavaScript und unserem neuen Freund $ können Sie es mit einer einfachen Codezeile implementieren:

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

Obwohl dies interessant ist, hat die DOM -Auswahlfunktion der Befehlszeilen -API in einigen Fällen auch einen echten Wert. Sie haben die Kraft von $$ in der Einführung dieses Artikels erfahren. Als Alias ​​für document.querySelectorAll gibt es ein Array zurück, das alle DOM -Elemente enthält, die dem angegebenen CSS -Selektor entsprechen.

Zum Beispiel können wir diese Funktion verwenden, um alle Bildquellen der Website zu extrahieren:

setInterval(function() { $("#bigCookie").click(); }, 10);

Wenn Sie nach einem bestimmten Element suchen und es überprüfen möchten, verwenden Sie inspect. Zum Beispiel führt Sie inspect(document.body) direkt zum body Element auf der Registerkarte Elemente des Entwickler -Tools zum inspect -Element. (Wenn Sie eine JavaScript -Funktion an sie übergeben, funktioniert

- sie führt Sie zum Quellfeld.)

Objektverfolgung

dir Wenn ich versuche, den Prototyp -Vererbung von JavaScript zu verstehen, habe ich einen kleinen Assistenten in der Konsole: prototype. Wenn diese Methode auf ein Objekt aufgerufen wird, wird eine Liste aller Eigenschaften des Objekts angezeigt, einschließlich beispielsweise __proto__ und dir. Dies ist nur eine von vielen Szenen, die nützlich sind. Ich fand es bequem die Eigenschaften aller Objekte.

Wenn Sie nur an den direkten Eigenschaften eines Objekts interessiert sind (d. H. Eigenschaften, die nicht aus der Prototypkette geerbt werden), können Sie keys und values verwenden, um ein Array zu erhalten, das den Namen und die zugehörigen Werte enthält , jeweils. Versuchen Sie es:

var pics = $$("img");
for (pic in pics) {
  console.log(pics[pic].src);
}

Da Objekte die grundlegendsten und allgegenwärtigsten Datenstrukturen in JavaScript sind, verwende ich diese Funktionen häufig, um den Objektzustand zu verfolgen.

Konsolen -Debugging

Das erste, was ich mache, wenn es ein Problem mit meiner Website oder meiner Anwendung gibt, besteht darin, die Konsole auf Fehlermeldungen zu überprüfen. Ich habe viel Entwicklungszeit in der Konsole verbracht. Wenn ja, sollten Sie sich über Funktionen wie debug und monitor freuen. Es sind nur zwei Beispiele für die leistungsstarken Debugging -Tools, die von der Befehlszeilen -API bereitgestellt werden. (Leider unterstützt der Webinspektor von Safari nicht beide Funktionen.)

debug(YourLibrary.someFunction)

Dies setzt einen Haltepunkt in der ersten Zeile der YourLibrary.someFunction -Funktion, und der Debugger öffnet jedes Mal, wenn die Funktion aufgerufen wird. Seit ich fast die ganze Zeit in der Konsole gearbeitet habe, ist dies viel schneller als manuell durch das Durchsuchen des Quellcodees zu durchsuchen, insbesondere wenn ich mit komprimiertem Code zu tun habe. Um dieses Verhalten auszuschalten, rufen Sie einfach undebug auf dieselbe Funktion auf.

Wenn Sie den Debugger nicht anrufen möchten, sondern jedes Mal, wenn Sie eine bestimmte Funktion aufrufen und welche Parameter zu verwenden sind, benachrichtigt werden, ist monitor Ihr Freund.

Der folgende Code in der Konsole:

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

Wenn Sie beispielsweise square aufrufen, benachrichtigt Chrome Sie wie folgt:

square(5); function square called with arguments: 5

rufen Sie einfach unmonitor auf dieselbe Funktion auf, um die Überwachung zu beenden. Beachten Sie, dass monitor in Firebug nur mit Funktionen im Seitencode funktioniert.

Die Befehlszeilen -API unterstützt auch das Debuggen für das Ereignis. getEventListeners Gibt ein Objekt zurück, das ein Array jedes Ereignisarts (z. B. "Klick" oder "MouseDown") enthält, das für das angegebene Objekt registriert ist.

getEventListeners(document);

weiter gehen, Sie können auch monitorEvents verwenden, um Feedback in der Konsole zu erhalten, ob das angegebene Ereignis tatsächlich ausgelöst wird. Geben Sie fort, Folgendes in der Konsole einzugeben:

monitorEvents(window, "resize");

Nach der Größenänderung des Browserfensters erhalten Sie zusammen mit dem Ereignisobjekt Feedback in der Konsole zur weiteren Inspektion. Firebug fügt eine schöne zusätzliche Funktion hinzu, die Sie sogar darüber informiert, welche DOM -Elemente aus dem aktuellen Ansichtsfenster aus oder überfließen oder überfließen - was sehr hilfreich ist, um reaktionsschnelle Layouts zu debuggen.

Sie können auch mehrere Ereignisse angeben und sogar aus der Liste der Ereignistypen auswählen:

monitorEvents(window, ["scroll", "mousedown"]); monitorEvents(document, "key");

finden Sie in der Befehlszeilen -API -Referenz auf Google -Entwickler die vollständige Liste. Möglicherweise sind Sie zu diesem Zeitpunkt nicht überrascht, dass Sie unmonitorEvents verwenden können, um die Ereignisüberwachung zu deaktivieren.

zusätzliche Vorteile für Chrome -Benutzer

früher oder später wird die Debugging -Funktion in der Konsole einige Mängel aufdecken, darunter:

• debug und monitor gelten nicht auf native Methoden
• monitorEvents Nicht für benutzerdefinierte Ereignisse
anwendbar
• fehlende Funktionen wie Unterbrechung, wenn auf Objekteigenschaften auf
zugegriffen werden

Zum Glück hat Amjad Masad diese Probleme in seinem exzellenten Chrome -Erweiterungs -Debug -Utils gelöst (Sie können den Quellcode auf GitHub finden).

Wie verwendet ich die Befehlszeilen -API?

Die Befehlszeilen -API enthält eine Reihe nützlicher und bequemer Funktionen für die vorübergehende Bewertung von Webseiten und Anwendungen. Besonders in meinem Debugging -Workflow ersetzte es schnell den gesamten Alptraum und wurde eines meiner Lieblingswerkzeuge. console.log

Die JavaScript -Konsole ist ein leistungsstarkes Tool, auf das Sie jetzt in jedem großen Browser zugreifen können. Verwenden Sie es? Wenn ja, was sind Ihre Lieblingstipps und Tipps?

(Der FAQs -Teil wird weggelassen, weil es eine schwache Korrelation mit dem Subjekt hat und zu lang ist.)

Das obige ist der detaillierte Inhalt vonDie Befehlszeilen -API zum Spaß und Gewinn. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!