{"id":32769,"date":"2019-10-31T21:48:48","date_gmt":"2019-10-31T18:48:48","guid":{"rendered":"https:\/\/prohoster.info\/blog\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript\/"},"modified":"2019-10-31T21:48:48","modified_gmt":"2019-10-31T18:48:48","slug":"oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","status":"publish","type":"post","link":"https:\/\/prohoster.info\/fr\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oups, je l'ai encore fait : d\u00e9bogage des erreurs courantes en JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oups,
\n
\nParfois, \u00e9crire du code JavaScript peut \u00eatre difficile, et cela fait peur \u00e0 de nombreux d\u00e9veloppeurs. Au cours du processus de travail, il est in\u00e9vitable que des erreurs surviennent, et certaines d'entre elles se r\u00e9p\u00e8tent fr\u00e9quemment. Cet article, destin\u00e9 aux d\u00e9veloppeurs d\u00e9butants, traite de ces erreurs et des moyens de les r\u00e9soudre. Pour plus de clart\u00e9, les noms des fonctions, des propri\u00e9t\u00e9s et des objets sont tir\u00e9s de chansons populaires<\/a><\/noindex>. Tout cela aide \u00e0 se souvenir rapidement de la mani\u00e8re de corriger les erreurs courantes.
\n<\/a><\/noindex><\/p>\n

Rappelons-le :<\/b> pour tous les lecteurs de \u00ab Habr \u00bb \u2014 une r\u00e9duction de 10 000 roubles lors de l'inscription \u00e0 tout cours Skillbox avec le code promo \u00ab Habr \u00bb.<\/i><\/p>\n

Skillbox recommande :<\/b> Cours pratique \u00ab D\u00e9veloppeur mobile PRO \u00bb<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError : propri\u00e9t\u00e9 non d\u00e9finie<\/h3>\n

<\/p>\n

let girl = {\n    name: \"Lucky\",\n    location: \"Hollywood\",\n    profession: \"star\",\n    thingsMissingInHerLife: true,\n    lovely: true,\n    cry: function() {\n        return \"cry, cry, cries in her lonely heart\"\n    }\n}\nconsole.log(girl.named.lucky)<\/code><\/pre>\n
\nL'exemple de code ci-dessus g\u00e9n\u00e8re l'erreur Uncaught TypeError : Cannot read property \u2018lucky\u2019 of undefined. Le probl\u00e8me est que l'objet girl n'a pas de propri\u00e9t\u00e9 named, bien qu'il ait une propri\u00e9t\u00e9 name. Et comme la propri\u00e9t\u00e9 girl.named n'est pas d\u00e9finie, il est impossible d'y acc\u00e9der, car elle n'existe formellement pas. Mais si l'on remplace girl.named.lucky par girl.name, alors tout fonctionnera et le programme retournera Lucky.<\/p>\n
Pour plus d'informations sur les propri\u00e9t\u00e9s, vous pouvez ici<\/a><\/noindex>.<\/p>\n
M\u00e9thodes de r\u00e9solution des erreurs TypeError<\/h3>\n
\nLes erreurs TypeError apparaissent lorsque le programmeur essaie d'ex\u00e9cuter des actions sur des donn\u00e9es qui ne correspondent pas \u00e0 un type sp\u00e9cifique. Par exemple, cela peut se produire lors de l'utilisation de .bold(), de la demande d'une propri\u00e9t\u00e9 undefined ou de l'appel d'une fonction qui n'est en r\u00e9alit\u00e9 pas une fonction.<\/p>\n
Ainsi, si vous essayez d'appeler girl (), l'erreur Uncaught TypeError : yourVariable.bold is not a function et girl is not a function appara\u00eetra, car un objet est appel\u00e9, pas une fonction.<\/p>\n
Pour r\u00e9soudre les erreurs, il est n\u00e9cessaire d'examiner les variables. Alors, qu'est-ce que girl ? Et qu'est-ce que girl.named ? Vous pouvez le savoir en analysant le code, en affichant les variables \u00e0 l'aide de console.log, avec la commande debugger ou en appelant le nom de la variable dans la console. Vous devez vous assurer que vous pouvez manipuler le type de donn\u00e9es contenu dans la variable. Si ce n'est pas appropri\u00e9, modifiez-le, par exemple, en ajoutant une condition ou un bloc try..catch - et gagnez le contr\u00f4le sur l'ex\u00e9cution de l'op\u00e9ration.<\/p>\n
D\u00e9bordement de pile<\/h3>\n
\nSi l'on en croit les auteurs de la chanson Baby One More Time (c'est Britney Spears, oui), alors le mot hit dans ce contexte signifie que la chanteuse souhaite recevoir un appel encore une fois (c'est une explication du contexte de la chanson, note du traducteur). Il est tout \u00e0 fait possible que ce souhait entra\u00eene une augmentation des appels dans la r\u00e9alit\u00e9. Mais en programmation, cela revient \u00e0 de la r\u00e9cursivit\u00e9, qui peut provoquer une erreur en cas de d\u00e9bordement de la pile d'appels.<\/p>\n
Les erreurs apparaissent comme suit :<\/p>\n
Erreur : espace de pile \u00e9puis\u00e9 (Edge)
\nInternalError : trop de r\u00e9cursions (Firefox)
\nRangeError : taille maximale de la pile d'appels d\u00e9pass\u00e9e (Chrome)
\n <\/i>
\nLe d\u00e9bordement de la pile se produit si le d\u00e9veloppeur n'a pas pris en compte le cas de base dans la r\u00e9cursivit\u00e9 ou si le code ne fait pas appel au cas pr\u00e9vu.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness++\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nDans ce cas, stillBelieve ne peut jamais \u00eatre false, donc \u00e0 chaque fois, on fera appel \u00e0 oneMoreTime, mais l'ex\u00e9cution de la fonction ne se terminera jamais.<\/p>\n
Cependant, si l'on commence \u00e0 compter sur deux amis, cela r\u00e9duira le loneliness (solitude), et l'appel pourra ne pas \u00eatre attendu.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness--\n    stillBelieve = false\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nUn exemple est celui des boucles infinies, o\u00f9 le syst\u00e8me ne renvoie pas de message d'erreur, et la page ex\u00e9cutant le code JavaScript se bloque simplement. Cela se produit si la boucle while n'a pas de condition d'arr\u00eat.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nOn peut r\u00e9soudre le probl\u00e8me de la mani\u00e8re suivante :<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n  worldEnded = true\n}<\/code><\/pre>\n
<\/p>\n
D\u00e9bogage des boucles infinies et des r\u00e9cursions<\/h3>\n
\nS'il y a un probl\u00e8me avec une boucle infinie, dans Chrome ou Edge, vous devez fermer l'onglet, et dans Firefox \u2014 la fen\u00eatre du navigateur. Ensuite, il faut analyser soigneusement le code. Si le probl\u00e8me ne peut pas \u00eatre trouv\u00e9, il est utile d'ajouter la commande debugger dans la boucle ou la fonction et de v\u00e9rifier la valeur des variables. Si le r\u00e9sultat ne correspond pas \u00e0 ce qui \u00e9tait attendu, alors on remplace, ce qui peut \u00eatre facilement fait.<\/p>\n
Dans l'exemple ci-dessus, il est recommand\u00e9 d'ajouter le d\u00e9bogueur en premi\u00e8re ligne d'une fonction ou d'une boucle. Ensuite, ouvrez l'onglet de d\u00e9bogage dans Chrome pour analyser les variables dans le scope. Gr\u00e2ce au bouton 'next', vous pouvez suivre leur changement \u00e0 chaque it\u00e9ration. Tout cela est simple \u00e0 r\u00e9aliser et, dans la plupart des cas, le probl\u00e8me est localis\u00e9.<\/p>\n
Vous pouvez lire plus en d\u00e9tail \u00e0 ce sujet ici (pour Chrome<\/a><\/noindex>) et ici (pour Firefox<\/a><\/noindex>).<\/p>\n
Erreur de syntaxe<\/h3>\n
\nL'une des erreurs les plus courantes en JavaScript est le SyntaxError. Pour les \u00e9viter, des extensions d'\u00e9diteur de texte peuvent \u00eatre tr\u00e8s utiles. Par exemple, Bracket Pair Colorizer colore les parenth\u00e8ses dans le code avec diff\u00e9rentes couleurs, et Prettier ou un outil d'analyse similaire facilitent la d\u00e9tection rapide des erreurs. Pour r\u00e9duire au minimum la probabilit\u00e9 de SyntaxError, choisissez une imbriquation minimale.<\/p>\n
Partagez dans les commentaires : que faites-vous pour \u00e9viter les erreurs ou les d\u00e9tecter et les corriger rapidement ?<\/p>\n
Skillbox recommande :<\/b><\/p>\n