Débogage JavaScript côté client

Magazine
Marque
GNU/Linux Magazine
HS n°
Numéro
111
Mois de parution
novembre 2020
Domaines


Résumé

Si JavaScript a longtemps évoqué l’idée de petit script dans un site internet, il est aujourd’hui souvent utilisé comme fondation d’application web complexe (notamment via des frameworks comme ReactJS ou VueJS). Dans ce contexte d’usage avancé, il est nécessaire d’avoir en main les bons outils et techniques de débogage.


Les outils de développement que nous verrons sont intégrés nativement à la quasi-totalité des navigateurs disponibles aujourd’hui. Ils sont généralement activés via <Ctrl> + <Shift> + <i> et proposent tous des fonctionnalités très similaires. On les appellera DevTools dans la suite de cet article. Sauf mention contraire, tous les éléments que nous verrons sont utilisables à minima sur Chromium/Google Chrome et Firefox.

1. Observer les variables

Un des premiers besoins du débogage consiste la plupart du temps à afficher le contenu d’une variable. Pour ça, on évitera l’ancestral alert() (qui a le désavantage de prendre le focus et de stopper l'exécution du code JavaScript) au profit de la fonction log() de la console.

// script.js
const obj = {message: 'Hello world'};
const result = 6 * 7;
console.log(result);
console.log(obj);

On retrouvera alors le contenu des variables affiché dans l’onglet console des DevTools.

// DevTools...
Cet article est réservé aux abonnés. Il vous reste 94% à découvrir.
à partir de 21,65€ HT/mois/lecteur pour un accès 5 lecteurs à toute la plateforme
J'en profite


Articles qui pourraient vous intéresser...

Utiliser Visual Studio Code pour coder en Python

Magazine
Marque
GNU/Linux Magazine
Numéro
243
Mois de parution
décembre 2020
Domaines
Résumé

Comme Batman a Robin, Rocket Raccoon a Groot, le développeur a l’éditeur de code. Sans son plus fidèle acolyte, impossible d’écrire la moindre ligne de code... d’où l’importance d’être toujours à la recherche de l’outil le plus efficace qui soit, quitte à délaisser un vieux compagnon de route...

Générez la documentation technique de vos projets Godot

Magazine
Marque
GNU/Linux Magazine
Numéro
243
Mois de parution
décembre 2020
Domaines
Résumé

Découvrons comment utiliser GDScript Docs Maker pour générer automatiquement la documentation de vos projets Godot. Nous allons voir dans cet article que l’on peut simplement, à partir de notre code et de ses commentaires, avoir une documentation toujours à jour.

Implémentation du calcul symbolique et de la dérivation en Java

Magazine
Marque
GNU/Linux Magazine
Numéro
243
Mois de parution
décembre 2020
Domaines
Résumé

Les logiciels de calcul symbolique sont relativement abondants. Pour les curieux ou ceux qui voudraient intégrer ce type de fonctionnalités dans leurs propres programmes, nous allons essayer de lever une partie des mystères des théories et des problèmes qui se cachent derrière la création de ces systèmes.

Déboguez vos codes PHP

Magazine
Marque
GNU/Linux Magazine
Numéro
243
Mois de parution
décembre 2020
Domaines
Résumé

La mise au point de programmes PHP est parfois perçue comme archaïque, car la configuration d’un environnement efficace de debugging peut s’avérer déroutante. Voici comment paramétrer une confortable installation pour profiter pleinement d’outils professionnels et maîtriser le développement local ou distant.