Erreurs JavaScript: correction, traitement, réparation

Bonjour à tous! Inspirés par le succès de l' article précédent, écrit avant le lancement du cours " Développeur Fullstack JavaScript ", nous avons décidé de poursuivre la série d'articles pour les débutants et tous ceux qui commencent tout juste à s'engager dans la programmation en JavaScript. Aujourd'hui, nous allons parler des bogues qui se produisent dans JS, ainsi que de la façon de les traiter.

Faites une erreur pour une personne, et il vous sera reconnaissant pour une demande de traction. Apprenez-lui à faire ses débuts par lui-même et il vous sera reconnaissant de tout le projet.

Timlid inconnu

Erreurs courantes pour débutants

Commençons donc par les erreurs les plus primitives. Disons que vous venez de terminer l'apprentissage des bases du HTML et du CSS et que vous vous lancez activement dans la programmation JavaScript. Par exemple: vous voulez, lorsque vous cliquez sur un bouton, par exemple, vous ouvrez une fenêtre modale cachée jusqu'à ce moment. De plus, vous voulez que cette fenêtre se ferme en cliquant sur la croix. Un exemple interactif est disponible ici (j'ai choisi bitbucket car son interface me semble la plus simple, et ce n'est pas tout de même de s'asseoir sur un github).

let modal_alert = document.querySelector(".modal_alert") let hero__btn = document.querySelector(".hero__btn") let modal_close = document.querySelector(".modal-close ") //   DOM   .  ,   bulma     //       - : hero__btn.addEventListener("click", function(){ modal_alert.classList.add("helper_visible"); }) modal_close.addEventListener("click", function(){ modal_alert.classList.remove("helper_visible"); }) //    ,    . ,    css- display:flex.  ,   . 

Dans notre index.html, en plus de la mise en page, nous insérons notre script à l'intérieur de la balise head:

  <script src="code.js"></script> 

Dans index.html en plus de la mise en page à l'intérieur de la balise head , nous insérons notre script :

  <script src="code.js"></script> 

Cependant, malgré le fait que nous soyons tous connectés, rien ne fonctionnera et une erreur se plantera:



Ce qui est très triste, les débutants se perdent souvent et ne comprennent pas quoi faire avec les lignes rouges, comme s'il s'agissait d'une sorte de verdict, et non d'un indice de ce qui ne va pas dans votre programme. addEventListener , le navigateur nous indique qu'il ne peut pas lire la propriété addEventListener de valeur nulle. Donc, pour une raison quelconque, nous n'avons pas obtenu notre élément du modèle DOM. Quel algorithme d'action faut-il entreprendre?

Tout d'abord, regardez à quel point le javascript est appelé en vous. Le navigateur lit votre code html de haut en bas, comme vous lisez, par exemple, un livre. Lorsqu'il voit la balise de script , il exécute immédiatement son contenu et continue de lire les éléments suivants, sans vraiment se soucier du fait que vous essayez d'obtenir des éléments DOM dans votre script, mais il ne les a pas encore lus et, par conséquent, n'a pas construit de modèle.

Que faire dans ce cas? Ajoutez simplement l'attribut defer intérieur de votre balise tag (ou async , mais je n'entrerai pas dans les détails de leur travail maintenant, il peut être lu ici ). Ou vous pouvez simplement déplacer votre balise de script vers le bas avant le body fermeture, cela fonctionnera aussi.

Deuxièmement, vérifiez les fautes de frappe. Apprenez la méthodologie BEM - elle est également utile parce que vous savez comment votre élément est écrit - après tout, écrivez des classes selon la même logique et essayez d'utiliser uniquement la langue anglaise correcte. Ou copiez le nom de l'élément directement dans le fichier JS.

Super. Maintenant que vous avez corrigé les erreurs, vous pouvez profiter de la version de travail du code à l' adresse suivante.

Erreur mystérieuse

La plupart de tous les nouveaux arrivants sont confus par l'étrange erreur de la dernière ligne de code. Voici un exemple:



Quelque chose d'incompréhensible s'affiche dans la console. Traduit, c'est littéralement «Fin inattendue de la saisie» - et que faire à ce sujet? De plus, le nouveau venu par habitude regarde le numéro de ligne. Tout lui semble normal. Et pourquoi la console le pointe-t-elle alors?

Tout est simple. Pour comprendre comment interpréter votre programme, l'interpréteur JS doit savoir où se termine le corps de la fonction et où se termine le corps de la boucle. Dans cette version du code, j'ai absolument intentionnellement oublié la dernière accolade:

  //           let root = document.getElementById("root"); //    root let article__btn = document.querySelector("article__btn"); //       article__btn.onclick = () => { for (let i = 0; i < headers.length; i++) { root.insertAdjacentHTML("beforeend", ` <div class="content is-medium"> <h1>${headers[i]} </h1> <p>${paragraps[i]}</p> </div>`) //    .     } 

Maintenant, JavaScript ne comprend pas où se trouve la fin du corps de la fonction et où la fin de la boucle ne peut pas interpréter le code.

Que faire dans ce cas? Dans tout éditeur de code moderne, si vous placez le curseur devant le crochet d'ouverture, son option de fermeture est mise en surbrillance (si l'éditeur n'a pas encore commencé à souligner cette erreur en rouge). Examinez à nouveau attentivement le code, en gardant à l'esprit qu'il n'y a pas d'accolades solitaires dans JS. Vous pouvez voir la version problématique ici , et la version corrigée - ici .

Nous divisons le code

Le plus souvent, cela vaut la peine d'écrire du code, de tester son travail en petits morceaux. Ou, en tant que personne normale, apprenez le TDD. Par exemple, vous avez besoin d'un programme simple qui reçoit les entrées d'un utilisateur, les ajoute à un tableau, puis affiche leurs valeurs moyennes:

  let input_number = prompt("  "); // ,       let numbers = []; function toArray(input_number){ for (let i = 0; i < input_number; i++) { let x = prompt(`  ${i}`); numbers.push(x); //      } } toArray(input_number); function toAverage(numbers){ let sum = 0; for (let i = 0; i < numbers.length; i++) { sum += numbers[i]; } return sum/numbers.length; } alert(toAverage(numbers)); 

À première vue, tout va bien dans ce code. Il a la logique de base, divisée en deux fonctions, chacune pouvant ensuite être appliquée séparément. Cependant, un programmeur expérimenté dira immédiatement que cela ne fonctionnera pas, car à l' prompt données nous parviennent sous forme de chaîne. De plus, JS (telle est sa nature tolérante et indifférente) va tout démarrer pour nous, mais à la sortie, il produira des bêtises si incroyables qu'il sera même difficile de comprendre comment nous sommes arrivés à une telle vie. Essayons donc de compter quelque chose dans notre exemple interactif. Introduisons le nombre 3 dans le nombre de variables, et 1 2 3 dans le champ de saisie des données:



Quoi? Quoi? D'accord, c'est JavaScript. Parlons mieux, comment pourrions-nous éviter une conclusion aussi étrange. Il fallait écrire en Python, il nous avertirait humainement d'une erreur . Après chaque moment suspect, nous avons dû faire une conclusion sur le type de variables et regarder l'état de notre tableau.

Une variante du code dans laquelle la probabilité de sortie inattendue est réduite:

  let input_number = prompt("  "); console.log(typeof(input_number)); let numbers = []; function toArray(input_number){ for (let i = 0; i < input_number; i++) { let x = prompt(`  ${i}`); numbers.push(x); } } toArray(input_number); console.log(numbers); function toAverage(numbers){ let sum = 0; for (let i = 0; i < numbers.length; i++) { sum += numbers[i]; } return sum/numbers.length; } console.log(typeof(toAverage(numbers))); alert(toAverage(numbers)); 

En d'autres termes, j'ai mis tous les endroits suspects dans lesquels quelque chose pourrait mal se passer dans la console pour m'assurer que tout se passe comme prévu. Bien sûr, les données console.log sont des jouets pour enfants, et normalement, bien sûr, vous devez étudier n'importe quelle bibliothèque décente pour les tests. Par exemple celui-ci . Le résultat de ce programme de débogage peut être vu dans les outils de développement ici . Comment y remédier, je pense, il n'y aura pas de questions, mais si c'est intéressant, alors ici (et oui, cela peut être fait simplement avec deux avantages).

Pas à pas: maîtriser les outils de développement Chrome

Le débogage à l'aide de console.log en 2019 est déjà quelque chose d'archaïque (mais nous ne l'oublierons jamais, c'est déjà comme le nôtre). Chaque développeur qui veut porter le fier titre de professionnel doit maîtriser les riches outils des outils de développement modernes.

Essayons de résoudre les problèmes dans notre code à l'aide des outils de développement. Si vous avez besoin d'une documentation avec des exemples, vous pouvez tout lire ici . Et nous allons essayer d'analyser l'exemple précédent en utilisant Dev Tools.

Donc, nous ouvrons un exemple . Nous avions évidemment une sorte de bogue caché dans le code, mais comment savez-vous à quel moment JavaScript a commencé à lire quelque chose de mal? C'est vrai, nous emballons cette joie avec des tests pour le type d'une variable, c'est très simple. Nous allons dans l'onglet Sources dans les outils de développement. Ouvrez le fichier code.js Vous aurez 3 parties: la première à gauche, qui affiche une liste de fichiers, et la seconde - dans laquelle nous affichons le code. Mais la plupart des informations que nous pouvons obtenir de la troisième partie ci-dessous, qui montre la progression de notre code. Mettons un breakpoint d' breakpoint sur la ligne 15 (pour ce faire, cliquez sur le numéro de ligne dans la fenêtre où nous avons le code affiché, après quoi vous verrez une étiquette bleue). Redémarrez la page et entrez toutes les valeurs dans notre programme.



Vous pouvez maintenant extraire de nombreuses informations utiles du panneau de debug inférieur. Vous constaterez que JS ne pense pas vraiment au type de variables, car les langages statistiques sont stupidement meilleurs et vous n'avez qu'à les écrire pour obtenir des programmes rapides et fonctionnant de manière prévisible qui mettent les variables sous forme de chaîne dans notre tableau. Maintenant, ayant réalisé l'image de ce qui se passe, nous pouvons prendre des contre-mesures.

Apprendre à détecter les erreurs

La construction try ... catch se trouve dans tous les langages de programmation modernes. Pourquoi cette construction de syntaxe est-elle nécessaire? Le fait est que lorsqu'une erreur se produit dans le code, il arrête son exécution à l'endroit de l'erreur - et l'interpréteur n'exécutera pas toutes les autres instructions. Dans une application vraiment fonctionnelle, sur plusieurs centaines de lignes de code, cela ne nous conviendra pas. Et supposons que nous voulons intercepter le code d'erreur, transmettre le code au développeur et poursuivre l'exécution.

Notre article serait incomplet sans une brève description des principaux types d'erreurs en JavaScript:

• L'erreur est le constructeur général de l'objet d'erreur.
• EvalError est le type d'erreur qui se produit pendant les erreurs d'exécution eval() , mais pas les erreurs de syntaxe, mais lorsque cette fonction globale est utilisée de manière incorrecte.
• RangeError - se produit lorsque vous allez au-delà de la plage autorisée dans l'exécution de votre code.
• ReferenceError - se produit lorsque vous essayez d'appeler une variable, une fonction ou un objet qui n'est pas dans le programme.
• SyntaxError - erreur de syntaxe.
• TypeError - se produit lorsque vous essayez de créer un objet avec un type de variable inconnu ou lorsque vous essayez d'appeler une méthode inexistante
• URIError est un code rare qui se produit lorsque les méthodes encodeURL et DecodeURL sont mal utilisées.

Très bien, pratiquons un peu maintenant et voyons dans la pratique où nous pouvons utiliser la construction try ... catch. Le principe de fonctionnement de cette construction est très simple - l'interpréteur essaie d'exécuter le code à l'intérieur de try , s'il s'avère, alors tout continue, comme si cette construction n'avait jamais existé. Mais si une erreur s'est produite, nous l'interceptons et pouvons la traiter, par exemple, en indiquant à l'utilisateur exactement où il a fait une erreur.

Créons la calculatrice la plus simple (même si on l'appelle une calculatrice à voix haute, je dirais: «exécuteur des expressions saisies»). Son exemple interactif se trouve ici . Ok, regardons maintenant notre code:

  let input = document.querySelector("#enter"); let button = document.querySelector("#enter_button"); let result_el = document.querySelector("#result "); button.onclick = () => { try { let result = eval(input.value); //,    ,  catch   result_el.innerHTML = result; } catch (error) { console.error(error.name); result_el.innerHTML = " -   ,  <br>   "; //  ,    ,     //       )) } } 

Si vous essayez d'entrer la bonne expression mathématique, alors tout fonctionnera bien. Cependant, essayez d'entrer une expression incorrecte, par exemple, juste une chaîne, puis le programme affichera un avertissement à l'utilisateur.

J'espère que vous lirez plus d'articles expliquant d'autres parties du piégeage d'erreurs, comme celui-ci , pour élargir votre compréhension du débogage de programme et étudier d'autres constructions syntaxiques telles que finally , ainsi que la génération de vos propres erreurs.

C’est tout. J'espère que cet article a été utile et maintenant, lors du débogage des applications, vous vous sentirez plus en confiance. Nous avons analysé les erreurs typiques, des plus élémentaires que les nouveaux arrivants à la programmation JS ne font que quelques jours, à la technique de capture des erreurs utilisée par les développeurs plus avancés.

Et selon la tradition, des liens utiles:

• Nous écrivons notre propre framework de test. Utile pour une compréhension générale des stratégies de test.
• Documentation complète des erreurs, y compris les fonctionnalités expérimentales
• Article incroyablement utile sur MDN, qui décrit la plupart des problèmes qui se posent au début du développement sur JS: débogage, polyfills, débogueur et bien plus encore
  

C’est tout. Nous attendons vos commentaires avec impatience et vous invitons à un webinaire gratuit , où nous parlerons des fonctionnalités du framework SvelteJS .