Was desarrollador web, tú debes saber muy bien la necesidad de depurar tu código. A menudo usamos bibliotecas externas para los registros, y para formatearlos y/o mostrarlos en algunos casos, pero la consola de nuestros Browser es mucho más potente de lo que pensamos.
Wenn wir an die Konsole denken, fällt uns als Erstes das ein console.log, wahr? Aber es gibt viel mehr Methoden als wir uns vorstellen. Jetzt werden wir sehen, wie Sie die Konsole optimal nutzen können, und ich werde Ihnen einige Tipps geben, um diese Methoden besser lesbar zu machen
Was ist die Konsole?
La consola JavaScript es una característica incorporada en los navegadores modernos que viene con herramientas de desarrollo listas para usar en una interfaz similar a una concha. Le permite a un desarrollador:
- Ver un registro de errores y advertencias que se producen en una página Netz.
- Interagieren Sie mit der Webseite mithilfe von JavaScript-Befehlen.
- Depurar aplicaciones y atravesar el DOM directamente en el Browser.
- Überprüfen und analysieren Sie die Netzwerkaktivität
Grundsätzlich können Sie JavaScript direkt in Ihrem Browser schreiben, verwalten und überwachen.
Console.log, Console.error, Console.warn und Console.info
Dies sind wahrscheinlich die am häufigsten verwendeten Methoden von allen. Sie können diesen Methoden mehr als einen Parameter übergeben. Jeder Parameter wird ausgewertet und zu einer durch Leerzeichen getrennten Zeichenfolge verkettet. Bei Objekten oder Arrays können Sie jedoch zwischen ihren Eigenschaften navigieren.
Console.group
Mit dieser Methode können Sie eine Reihe von gruppieren console.logs (aber auch Fehlerinformationen usw.) unter einer Gruppe, die reduziert werden kann. Die Syntax ist wirklich sehr einfach: Geben Sie einfach alle ein console.log dass wir vorher gruppieren wollen console.group () (oder console.groupCollapsed () wenn wir möchten, dass es standardmäßig geschlossen wird). Fügen Sie dann a hinzu console.groupEnd () am Ende, um die Gruppe zu schließen.
Da habe ich das entdeckt console.table mein Leben hat sich verändert. Zeigen JSON oder JSON-Arrays sehr groß innerhalb eines console.log Es ist eine schreckliche Erfahrung. Das console.table ermöglicht es uns, diese Strukturen in einer schönen Tabelle zu visualisieren, in der wir die Spalten benennen und als Parameter übergeben können.
Console.count, Console.time und Console.timeEnd
Diese drei Methoden sind das Schweizer Taschenmesser für jeden Entwickler, der debuggen muss. Das console.count zählt und gibt die Anzahl der Male aus Anzahl () Es wurde in derselben Zeile und mit demselben Tag aufgerufen. Das console.time Startet einen Timer mit einem angegebenen Namen als Eingabeparameter und kann bis zu 10.000 Timer gleichzeitig auf einer bestimmten Seite ausführen. Einmal gestartet, rufen wir an console.timeEnd um den Timer anzuhalten und die verstrichene Zeit auf der Konsole auszudrucken.
Console.trace und Console.assert
Estos métodos simplemente imprimen una traza de pila desde el punto en el que fue llamada. Imagine que está creando una biblioteca JS y desea informar al Nutzername dónde se generó el error. En ese caso, estos métodos pueden ser muy útiles. El console.assert es ist wie er console.trace Es wird jedoch nur gedruckt, wenn die vergangene Bedingung nicht erfüllt ist.
Wie wir sehen können, ist die Ausgabe genau das, was React (oder eine andere Bibliothek) uns zeigen würde, wenn wir eine Ausnahme auslösen.
Löschen Sie alle Konsolen
Die Verwendung von Konsolen zwingt uns oft, sie zu beseitigen. Oder manchmal vergessen wir den Produktionsaufbau (und wir erkennen ihn nur Tage und Tage später versehentlich). Natürlich rate ich niemandem, Konsolen zu missbrauchen, wenn sie nicht benötigt werden (die Konsole am Shift-Eingabegriff kann gelöscht werden, nachdem festgestellt wurde, dass sie funktioniert). Sie sollten Fehlerprotokolle oder Ablaufverfolgungsprotokolle im Entwicklungsmodus belassen, um das Debuggen zu erleichtern. Ich benutze viel Webpack, sowohl bei der Arbeit als auch in meinen eigenen Projekten. Mit diesem Tool können Sie alle Konsolen, die Sie nicht behalten möchten (nach Typ), mit der aus der Produktionsstruktur löschen Plugin uglifyjs-webpack-plugin
