Wenn Sie sich mit Webprogrammierung beschäftigen, bedeutet dies, dass Sie nicht darüber sprechen müssen, wie wichtig das Debuggen in Ihrer Arbeit ist. Häufig werden externe Bibliotheken verwendet, um Daten in Protokolle zu schreiben, zu formatieren oder auf dem Bildschirm anzuzeigen, ohne die Tatsache zu berücksichtigen, dass Programmierer über JavaScript-Befehle für die Arbeit mit in Browsern integrierten Konsolen verfügen. Und diese Konsolen verfügen über viel ernstere Funktionen, als es auf den ersten Blick erscheinen mag.
Vielleicht ist das erste,
console.log() viele Leute denken, wenn sie "console" sagen, der Befehl
console.log() . Sie ist jedoch nur eines von vielen solcher Teams. Das Material, dessen Übersetzung wir heute veröffentlichen, ist den Funktionen der Arbeit mit der JavaScript-Konsole gewidmet.
Was ist eine Konsole?
Die JavaScript-Konsole ist ein in moderne Browser integrierter Mechanismus, der integrierte Entwicklungstools in einer Befehlszeilenschnittstelle unterstützt. Über die Konsole kann ein Entwickler Folgendes tun:
- Zeigen Sie Protokolle von Fehlern und Warnungen an, die auf einer Webseite auftreten.
- Interagieren Sie mit einer Webseite mithilfe von JavaScript-Befehlen.
- Debuggen Sie Anwendungen und arbeiten Sie mit dem DOM direkt über den Browser.
- Untersuchen und analysieren Sie die Netzwerkaktivität.
Im Allgemeinen bietet die Konsole dem Entwickler die Möglichkeit, JavaScript-Code direkt in den Browser zu schreiben, die Vorgänge auf den Seiten zu überwachen und diese Prozesse zu verwalten.
Methoden console.log, console.error, console.warn und console.info
Die wahrscheinlich am häufigsten verwendeten Methoden bei der Arbeit mit der Konsole sind
console.log() ,
console.error() ,
console.warn() und
console.info() . Sie können diesen Methoden einen oder mehrere Parameter übergeben. Das System berechnet den Wert jedes einzelnen von ihnen und kombiniert alle Ergebnisse zu einer Zeichenfolge, deren Teile durch Leerzeichen getrennt sind. Bei Objekten oder Arrays können Sie diese Befehle in einer Form anzeigen, in der Sie deren Inhalt anzeigen können. So sieht es aus.
Verwenden verschiedener Befehle zum Ausgeben von Daten an die KonsoleConsole.group-Methode
Mit der Methode
console.group() können Sie eine Reihe von Aufrufen von
console.log() (sowie anderen ähnlichen Methoden) in Gruppen zusammenfassen, deren Inhalt
console.log() und erweitert werden kann. Die Verwendung dieser Methode ist sehr einfach: Nach dem Aufruf von
console.group() (oder nach
console.groupCollapsed() , wenn Sie die Gruppe sofort minimiert anzeigen möchten) müssen Sie alle Aufrufe von
console.log() , die gruppiert werden müssen. Am Ende des Befehlssatzes, den Sie
console.groupEnd() möchten, müssen Sie den Befehl
console.groupEnd() . Betrachten Sie ein Beispiel.
function doSomething(obj){ console.group('doSomething Profile'); const _data = new Date(); console.log('evaluating data: ', _data); const _fullName = `${obj.firstName} ${obj.lastName}`; console.log('fullName: ', _fullName); const _id = Math.random(1); console.log('id: ', _id); console.groupEnd(); } doSomething({"firstName":"Riccardo", "lastName":"Canella"});
Nach der Ausführung dieses Codefragments gelangt Folgendes zur Konsole.
Gruppieren von Daten in der Konsole mit der Methode console.group ()Console.table-Methode
Nachdem ich von der Existenz der
console.table() -Methode
console.table() , hat sich mein Leben für immer verändert. Die Verwendung des regulären
console.log() zur Ausgabe von JSON-Code oder großen JSON-Arrays ist beispielsweise ein Albtraum. Mit der Methode
console.table() können Sie komplexe Datenstrukturen in schönen Tabellen anzeigen, deren Spalten durch Übergabe als Parameter benannt werden können (nicht alle Browser unterstützen diese Funktion
console.table() ). Hier ist ein Beispiel für die Arbeit mit diesem Team.
const typeOfConsole = [ {name:'log', type:'standard'}, {name:'info', type:'standard'}, {name:'table', type:'wow'} ]; console.table(typeOfConsole); const mySocial = { facebook: true, linkedin: true, flickr: true, instagram: true, VKontaktebadoo: false }; console.table(mySocial, ["Socials", "I'v an account"]);
Was passiert ist und gut aussieht und das Debuggen erleichtern kann.
Tabellarisieren Sie die Ausgabe mit console.table ()Methoden console.count, console.time und console.timeEnd
Die
console.count() ,
console.time() und
console.timeEnd() können für Entwickler, die sich mit dem Debuggen von Anwendungen
console.timeEnd() , als Schweizer Messer bezeichnet werden. Mit der Methode
console.count() können Sie also die Anzahl Ihrer eigenen Anrufe zählen und in der Konsole mit der angegebenen Bezeichnung anzeigen. Mit der
console.time() -Methode können Sie einen benannten Timer ausführen (der Name wird als Parameter an ihn übergeben, bis zu 10.000 Timer können auf einer Seite vorhanden sein). Um einen bestimmten Timer zu stoppen, wird der Befehl
console.timeEnd() mit der als Parameter übergebenen Timer-Bezeichnung verwendet. Sie stoppt den Timer und zeigt die Zeit seiner Arbeit in der Konsole an. Hier erfahren Sie, wie Sie diese Methoden verwenden.
console.time('total'); console.time('init arr'); const arr = new Array(20); console.timeEnd('init arr'); for(var i = 0; i < arr.length; i++){ arr[i] = new Object(); const _type = (i % 2 === 0) ? 'even' : 'odd'; console.count(_type+'added'); } console.timeEnd('total');
Und hier ist das Ergebnis der Arbeit dieses Codes in der Konsole.
Verwenden der Methoden console.count (), console.time () und console.timeEnd ()Methoden Console.trace und console.assert
Mit den
console.trace() und
console.assert() können Sie
console.assert() an der Stelle ausgeben, an der sie aufgerufen wurden. Stellen Sie sich vor, Sie entwickeln eine JS-Bibliothek und möchten dem Benutzer mitteilen, wo der Fehler aufgetreten ist. In einem solchen Fall können diese Methoden sehr nützlich sein. Die Methode
console.assert() ähnelt
console.trace() . Der Unterschied zwischen beiden besteht darin, dass
console.assert() nur dann Daten ausgibt, wenn die an sie übergebene Bedingung nicht erfüllt ist. Hier erfahren Sie, wie Sie mit diesen Methoden arbeiten.
function lesserThan(a,b){ console.assert(a<b, { "message":"a is not lesser than b", "a": a, "b": b }); } lesserThan(6,5); console.trace("End");
Es ist leicht zu bemerken, dass die von diesem Code generierte Ausgabe genauso aussieht wie in React (oder einer anderen Bibliothek), wenn das Framework eine Ausnahme meldet.
Das Ergebnis der Verwendung der Befehle console.assert () und console.trace ()Befehle zum Arbeiten mit der Konsole und dem Produktionscode
Befehle für die Arbeit mit der Konsole werden in der Phase der Entwicklung und des Debuggens von Anwendungen benötigt. Dies bedeutet, dass diese Befehle zum Zeitpunkt der Veröffentlichung des Produkts aus dem Code entfernt werden müssen. Sie können es einfach vergessen und einige Zeit nach dem Zusammenstellen der Produktionsversion des Projekts feststellen, dass das Programm etwas in die Konsole schreibt, wenn es nicht benötigt wird. Laden Sie keine Computer mit unnötiger Arbeit, auch wenn diese scheinbar unbedeutend ist wie die Ausgabe von Daten an die Konsole. Angesichts der Tatsache, dass Befehle für die Arbeit mit der Konsole während der Entwicklung der Anwendung nützlich sein können, ist es gleichzeitig am besten, sie nicht dauerhaft aus dem Programmquellcode zu löschen, sondern nur aus der Produktionsversion zu entfernen. Hier helfen uns Mittel für die Zusammenstellung von Projekten. Daher verwende ich Webpack ständig, sowohl bei der Arbeit als auch in meinen eigenen Projekten. Mit diesem Tool können Sie alle unnötigen Befehle für die Arbeit mit der Konsole (es kann sie von anderen Befehlen unterscheiden) mit dem
uglifyjs-webpack-Plugin aus Produktionsassemblys
entfernen .
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') var debug = process.env.NODE_ENV !== "production"; ..... optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // uglifyOptions: { // comments: false, compress: { // warnings: false, // drop_console: true }, } })] : [] }
Diese Konfiguration ist sehr einfach, erleichtert jedoch die tägliche Arbeit des Programmierers und beseitigt das Problem vergessener Konsolenbefehle.
Zusammenfassung
In diesem Artikel haben wir einige nützliche Befehle für die Arbeit mit der Konsole besprochen. Mit Tools, die Teil moderner Browser sind, können sie viele Probleme lösen, die mit der Entwicklung und dem Debuggen clientseitiger JavaScript-Anwendungen einhergehen.
Liebe Leser! Welche Befehle für die Arbeit mit der JavaScript-Konsole verwenden Sie?
