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...

Flutter : applications mobiles, web et desktop

Magazine
Marque
GNU/Linux Magazine
Numéro
248
Mois de parution
mai 2021
Domaines
Résumé

Flutter est un framework permettant de développer des applications natives pour Linux, Windows, macOS, Android, iOS et le Web à partir du même code source. Un moteur graphique OpenGL ultra performant et la compilation native en ARM, x86-64 ainsi que WebAssembly, associés à un cycle de développement agile et hyper intuitif, en font la solution ultime pour les créateurs d’applications. L’essayer, c’est l’adopter !

Les différents frameworks de web scraping

Magazine
Marque
GNU/Linux Magazine
HS n°
Numéro
114
Mois de parution
mai 2021
Domaines
Résumé

Il ne viendrait à l’idée à personne de nos jours de se lancer dans la récupération de données sur le Web sans s’appuyer sur un framework simplifiant la tâche et évitant de réinventer la roue (carrée). Voyons donc quelques outils indispensables permettant de mener à bien cette tâche.

Écrire des mathématiques en LaTeX

Magazine
Marque
GNU/Linux Magazine
HS n°
Numéro
114
Mois de parution
mai 2021
Domaines
Résumé

S’il y a bien un domaine dans lequel excelle LaTeX, c’est l’écriture de formules mathématiques complexes et autres algorithmes. Une fois que l’on connaît et que l’on comprend la syntaxe, c’est très simple… encore faut-il avoir vu cela au moins une fois !

Principes de l’orienté objet en C++ : la généricité

Magazine
Marque
GNU/Linux Magazine
Numéro
248
Mois de parution
mai 2021
Domaines
Résumé

La programmation orientée objet obéit à des principes. Les 4 principaux sont l’encapsulation, l’héritage, le polymorphisme et la généricité. Dans un premier article, nous avons évoqué l’encapsulation, puis l’héritage et le polymorphisme dans un deuxième. Ce troisième et dernier article traite de la généricité.

Web scraping avec Node.js

Magazine
Marque
GNU/Linux Magazine
HS n°
Numéro
114
Mois de parution
mai 2021
Domaines
Résumé

Le web scraping, c’est l’activité qui consiste à gratter (to scrap) du code HTML pour en extraire des données exploitables. Node.js se prête particulièrement bien à l’exercice, aussi je vous propose d’apprendre à gratter de la donnée avec ce formidable outil.