Si vous êtes engagé dans la programmation Web, cela signifie que vous n'avez pas besoin de parler de l'importance du débogage dans votre travail. Souvent, les bibliothèques externes sont utilisées pour écrire des données dans des journaux, les formater ou les afficher à l'écran, sans tenir compte du fait que les programmeurs ont des commandes JavaScript pour travailler avec des consoles intégrées aux navigateurs. Et ces consoles ont des capacités beaucoup plus sérieuses qu'il n'y paraît à première vue.
Peut-être que la première chose à laquelle beaucoup de gens pensent lorsqu'ils disent «console» est la commande
console.log() . Cependant, elle n'est qu'une des nombreuses équipes de ce type. Le matériel, dont nous publions la traduction aujourd'hui, est dédié aux fonctionnalités de l'utilisation de la console JavaScript.
Qu'est-ce qu'une console?
La console JavaScript est un mécanisme intégré aux navigateurs modernes qui prend en charge les outils de développement intégrés dans une interface de ligne de commande. À l'aide de la console, un développeur peut effectuer les opérations suivantes:
- Affichez les journaux des erreurs et des avertissements qui se produisent sur une page Web.
- Interagissez avec une page Web à l'aide de commandes JavaScript.
- Déboguez les applications et travaillez avec le DOM directement depuis le navigateur.
- Enquêter et analyser l'activité du réseau.
En général, la console donne au développeur la possibilité d'écrire du code JavaScript directement dans le navigateur, de surveiller ce qui se passe sur les pages et de gérer ces processus.
Méthodes console.log, console.error, console.warn et console.info
Les méthodes les plus couramment utilisées lors de l'utilisation de la console sont
console.log() ,
console.error() ,
console.warn() et
console.info() . Vous pouvez transmettre un ou plusieurs paramètres à ces méthodes. Le système calcule la valeur de chacun d'eux et combine tous les résultats dans une chaîne, dont certaines parties sont séparées par des espaces. Dans le cas d'objets ou de tableaux, ces commandes vous permettent de les afficher sous une forme qui vous permet de visualiser leur contenu. Voici à quoi ça ressemble.
Utilisation de diverses commandes pour exporter des données vers la consoleMéthode Console.group
La méthode
console.group() vous permet de collecter une série d'appels à
console.log() (ainsi que d'autres méthodes similaires) dans des groupes dont le contenu peut être réduit et développé. L'utilisation de cette méthode est très simple: après avoir appelé
console.group() (ou après
console.groupCollapsed() , si vous souhaitez afficher le groupe immédiatement réduit), vous devez placer tous les
console.log() qui doivent être groupés. Ensuite, à la fin de l'ensemble de commandes que vous souhaitez regrouper, vous devez placer la commande
console.groupEnd() . Prenons un exemple.
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"});
Après l'exécution de ce fragment de code, les éléments suivants arriveront à la console.
Regroupement de données dans la console à l'aide de la méthode console.group ()Méthode Console.table
Après avoir appris l'existence de la méthode
console.table() , ma vie a changé pour toujours. Par exemple, l'utilisation de la commande régulière
console.log() pour générer du code JSON ou des tableaux JSON volumineux est un cauchemar. La méthode
console.table() vous permet d'afficher des structures de données complexes à l'intérieur de jolies tables, dont les colonnes peuvent être nommées en les passant comme paramètres (tous les navigateurs ne prennent pas en charge cette fonctionnalité
console.table() ). Voici un exemple de travail avec cette équipe.
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"]);
Qu'est-ce qui s'est passé, et ressemble beaucoup et peut faciliter le débogage.
Tabuler la sortie à l'aide de console.table ()Méthodes console.count, console.time et console.timeEnd
Les méthodes
console.count() ,
console.time() et
console.timeEnd() peuvent être appelées quelque chose comme un couteau suisse pour un développeur qui est engagé dans le débogage d'applications. Ainsi, la méthode
console.count() vous permet de compter le nombre de vos propres appels et de l'afficher dans la console avec l'étiquette donnée. La méthode
console.time() vous permet d'exécuter un temporisateur nommé (le nom lui est transmis en tant que paramètre, jusqu'à 10 000 temporisateurs peuvent être présents sur une page). Afin d'arrêter une minuterie spécifique, la commande
console.timeEnd() est utilisée avec l'étiquette de minuterie passée en paramètre. Elle arrête le chronomètre et affiche l'heure de son travail dans la console. Voici comment utiliser ces méthodes.
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');
Et voici le résultat du travail de ce code dans la console.
Utilisation des méthodes console.count (), console.time () et console.timeEnd ()Méthodes Console.trace et console.assert
Les
console.trace() et
console.assert() vous permettent de sortir des informations de pile à partir de l'endroit où elles ont été appelées. Imaginez que vous développez une bibliothèque JS et que vous souhaitez indiquer à l'utilisateur où l'erreur s'est produite. Dans un tel cas, ces méthodes peuvent être très utiles. La méthode
console.assert() est similaire à
console.trace() , la différence entre les deux est que
console.assert() ne sortira les données que si la condition qui lui est transmise n'est pas remplie. Voici comment travailler avec ces méthodes.
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");
Il est facile de voir que la sortie générée par ce morceau de code ressemble à quelque chose de similaire ressemblerait à React (ou à toute autre bibliothèque) lorsque le framework signale une exception.
Résultat de l'utilisation des commandes console.assert () et console.trace ()Commandes pour travailler avec la console et le code de production
Des commandes pour travailler avec la console sont nécessaires au stade du développement et du débogage des applications. Cela signifie que lorsque le moment sera venu de publier le produit, ces commandes devront être supprimées du code. Vous pouvez simplement l'oublier et, quelque temps après avoir assemblé la version de production du projet, notez que le programme écrit quelque chose sur la console quand il n'y en a pas besoin. Ne chargez pas d'ordinateurs avec un travail inutile, bien qu'apparemment aussi insignifiant que la sortie de données vers la console. Dans le même temps, compte tenu du fait que les commandes pour travailler avec la console peuvent être utiles lors de la finalisation de l'application, il est préférable de ne pas les supprimer définitivement du code source du programme, mais de les supprimer uniquement de sa version de production. Ici, des fonds pour monter des projets viendront à notre secours. Donc, j'utilise constamment Webpack, tant au travail que dans mes propres projets. Cet outil vous permet de supprimer toutes les commandes inutiles pour travailler avec la console (il est capable de les distinguer des autres commandes) des assemblages de production en utilisant le
plugin uglifyjs-webpack .
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 }, } })] : [] }
Cette configuration est très simple, mais elle facilite le travail quotidien du programmeur et élimine le problème des commandes de console oubliées.
Résumé
Dans cet article, nous avons parlé de quelques commandes utiles pour travailler avec la console. Ils permettent, à l'aide d'outils faisant partie des navigateurs modernes, de résoudre de nombreux problèmes qui accompagnent le développement et le débogage d'applications JavaScript côté client.
Chers lecteurs! Quel type de commandes pour travailler avec la console JavaScript utilisez-vous?
