Quoi 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 navigateurs es mucho más potente de lo que pensamos.
Quand on pense à la console, la première chose qui vient à l'esprit et le console.log, vérité? Mais il existe bien plus de méthodes que nous ne l'imaginons. Nous allons maintenant voir comment tirer le meilleur parti de l'utilisation de la console, et je vais vous donner quelques astuces pour rendre ces méthodes plus lisibles
Qu'est-ce que la console?
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 la toile.
- Interagissez avec la page Web à l'aide des commandes JavaScript.
- Depurar aplicaciones y atravesar el DOM directamente en el le navigateur.
- Inspecter et analyser l'activité du réseau
Fondamentalement, il vous permet d'écrire, de gérer et de surveiller JavaScript directement dans votre navigateur.
Console.log, Console.error, Console.warn et Console.info
Ce sont probablement les méthodes les plus utilisées de toutes. Vous pouvez transmettre plusieurs paramètres à ces méthodes. Chaque paramètre est évalué et concaténé dans une chaîne délimitée par des espaces, mais dans le cas d'objets ou de tableaux, vous pouvez naviguer entre leurs propriétés.
Console.group
Cette méthode vous permet de regrouper une série de console.logs (mais aussi des informations d'erreur, etc.) sous un groupe qui peut être réduit. La syntaxe est vraiment très simple: il suffit de saisir tous les console.log que nous voulons grouper avant console.group () (ou alors console.groupCollapsed () si nous voulons qu'il se ferme par défaut). Puis ajoutez un console.groupEnd () à la fin pour fermer le groupe.
Depuis que j'ai découvert le console.table ma vie a changé. Spectacle JSON ou Tableaux JSON très grand dans un console.log c'est une expérience terrifiante. le console.table nous permet de visualiser ces structures dans une belle table où nous pouvons nommer les colonnes et les passer en paramètres.
Console.count, Console.time et Console.timeEnd
Ces trois méthodes sont le couteau suisse pour chaque développeur qui a besoin de déboguer. le console.count compte et émet le nombre de fois compter () il a été appelé sur la même ligne et avec la même balise. le console.time démarre un minuteur avec un nom spécifié comme paramètre d'entrée et peut exécuter jusqu'à 10 000 minuteries simultanées sur une page donnée. Une fois commencé, nous utilisons un appel à console.timeEnd pour arrêter le chronomètre et imprimer le temps écoulé sur la console.
Console.trace et 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 Nom d'utilisateur dónde se generó el error. En ese caso, estos métodos pueden ser muy útiles. El console.assert c'est comme lui console.trace mais il ne sera imprimé que si la condition passée n'est pas passée.
Comme nous pouvons le voir, la sortie est exactement ce que React (ou toute autre bibliothèque) nous montrerait lorsque nous lèverions une exception.
Supprimer toutes les consoles
L'utilisation de consoles nous oblige souvent à les éliminer. Ou parfois, nous oublions la construction de production (et nous ne le réalisons que par erreur des jours et des jours plus tard). Bien sûr, je ne conseille à personne d'abuser des consoles là où elles ne sont pas nécessaires (la console sur la poignée d'entrée de décalage peut être effacée après avoir vu que cela fonctionne). Vous devez laisser les journaux d'erreurs ou les journaux de suivi en mode développement pour vous aider à déboguer. J'utilise beaucoup Webpack, à la fois au travail et dans mes propres projets. Cet outil vous permet de supprimer toutes les consoles que vous ne souhaitez pas conserver (par type) de la structure de production à l'aide du brancher uglifyjs-webpack-plugin
