[{"data":1,"prerenderedAt":697},["ShallowReactive",2],{"page-\u002Fpratiques\u002Flire-une-erreur":3,"pieces-pratiques":654,"autour-\u002Fpratiques\u002Flire-une-erreur":679,"prerequis-\u002Fpratiques\u002Flire-une-erreur":684,"plan-pratiques":686},{"id":4,"title":5,"body":6,"description":625,"extension":626,"ligne":627,"meta":628,"motsCles":629,"navigation":633,"niveau":634,"path":635,"prerequis":636,"ressources":638,"seo":647,"sources":648,"stem":652,"__hash__":653},"docs\u002Fpratiques\u002F02.lire-une-erreur.md","Lire une erreur",{"type":7,"value":8,"toc":614},"minimark",[9,14,27,31,35,38,42,59,62,164,170,177,210,214,217,244,280,295,298,302,305,373,384,390,394,397,434,451,461,465,477,530,533,537,540,563,570,576,580,610],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,24],"ul",{},[18,19,20],"li",{},"Ouvrir la console et repérer une erreur.",[18,22,23],{},"Lire un message d'erreur : son type, sa description, son fichier et sa ligne.",[18,25,26],{},"Chercher la solution sans te perdre dans les résultats.",[10,28,30],{"id":29},"une-erreur-nest-pas-un-échec","Une erreur n'est pas un échec",[32,33,34],"p",{},"Quand ton code plante, le navigateur te dit pourquoi. Le message est souvent précis. Beaucoup de débutants le regardent à peine, alors que la réponse s'y trouve.",[32,36,37],{},"Ton premier réflexe : ouvrir la console et lire.",[10,39,41],{"id":40},"ouvrir-la-console","Ouvrir la console",[32,43,44,45,49,50,54,55,58],{},"La ",[46,47,48],"strong",{},"console"," est une zone des outils de développement du navigateur où s'affichent les messages et les erreurs de ta page. Dans Chrome, Firefox et Edge, la touche ",[51,52,53],"code",{},"F12"," ouvre ces outils. Choisis ensuite l'onglet ",[46,56,57],{},"Console",".",[32,60,61],{},"Prends cette page, qui contient une faute :",[63,64,70],"pre",{"className":65,"code":66,"filename":67,"language":68,"meta":69,"style":69},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cul id=\"liste\">\u003C\u002Ful>\n\u003Cscript>\n  const recettes = ['Crêpes', 'Quiche']\n  console.log(recette)\n\u003C\u002Fscript>\n","recettes.html","html","",[51,71,72,103,113,141,154],{"__ignoreMap":69},[73,74,77,81,84,88,91,95,98,100],"span",{"class":75,"line":76},"line",1,[73,78,80],{"class":79},"scfrF","\u003C",[73,82,15],{"class":83},"s5JFL",[73,85,87],{"class":86},"s5iOY"," id",[73,89,90],{"class":79},"=",[73,92,94],{"class":93},"shWOn","\"liste\"",[73,96,97],{"class":79},">\u003C\u002F",[73,99,15],{"class":83},[73,101,102],{"class":79},">\n",[73,104,106,108,111],{"class":75,"line":105},2,[73,107,80],{"class":79},[73,109,110],{"class":83},"script",[73,112,102],{"class":79},[73,114,116,120,123,126,129,132,135,138],{"class":75,"line":115},3,[73,117,119],{"class":118},"sOnC1","  const",[73,121,122],{"class":86}," recettes",[73,124,125],{"class":118}," =",[73,127,128],{"class":79}," [",[73,130,131],{"class":93},"'Crêpes'",[73,133,134],{"class":79},", ",[73,136,137],{"class":93},"'Quiche'",[73,139,140],{"class":79},"]\n",[73,142,144,147,151],{"class":75,"line":143},4,[73,145,146],{"class":79},"  console.",[73,148,150],{"class":149},"syCW7","log",[73,152,153],{"class":79},"(recette)\n",[73,155,157,160,162],{"class":75,"line":156},5,[73,158,159],{"class":79},"\u003C\u002F",[73,161,110],{"class":83},[73,163,102],{"class":79},[32,165,166,167,58],{},"La console affiche une ligne rouge. En l'ouvrant, tu lis quelque chose comme ",[51,168,169],{},"ReferenceError: recette is not defined",[32,171,172,173,176],{},"Tu peux aussi écrire dans la console avec ",[51,174,175],{},"console.log()",", qui affiche une valeur pendant l'exécution :",[63,178,182],{"className":179,"code":180,"language":181,"meta":69,"style":69},"language-js shiki shiki-themes github-light-default github-dark-default github-dark-default","console.log(recettes)\nconsole.error('Quelque chose ne va pas')\n","js",[51,183,184,194],{"__ignoreMap":69},[73,185,186,189,191],{"class":75,"line":76},[73,187,188],{"class":79},"console.",[73,190,150],{"class":149},[73,192,193],{"class":79},"(recettes)\n",[73,195,196,198,201,204,207],{"class":75,"line":105},[73,197,188],{"class":79},[73,199,200],{"class":149},"error",[73,202,203],{"class":79},"(",[73,205,206],{"class":93},"'Quelque chose ne va pas'",[73,208,209],{"class":79},")\n",[10,211,213],{"id":212},"anatomie-dun-message-derreur","Anatomie d'un message d'erreur",[32,215,216],{},"Un message contient quatre informations utiles :",[218,219,220,226,232,238],"ol",{},[18,221,222,225],{},[46,223,224],{},"Le type"," de l'erreur, avant les deux-points.",[18,227,228,231],{},[46,229,230],{},"La description",", qui dit ce qui ne va pas.",[18,233,234,237],{},[46,235,236],{},"Le fichier"," concerné.",[18,239,240,243],{},[46,241,242],{},"Le numéro de ligne",", parfois suivi de la colonne.",[63,245,249],{"className":246,"code":247,"language":248,"meta":69,"style":69},"language-bash shiki shiki-themes github-light-default github-dark-default github-dark-default","Uncaught ReferenceError: recette is not defined\n    at recettes.html:4:15\n","bash",[51,250,251,272],{"__ignoreMap":69},[73,252,253,257,260,263,266,269],{"class":75,"line":76},[73,254,256],{"class":255},"sIXEE","Uncaught",[73,258,259],{"class":93}," ReferenceError:",[73,261,262],{"class":93}," recette",[73,264,265],{"class":93}," is",[73,267,268],{"class":93}," not",[73,270,271],{"class":93}," defined\n",[73,273,274,277],{"class":75,"line":105},[73,275,276],{"class":255},"    at",[73,278,279],{"class":93}," recettes.html:4:15\n",[32,281,282,283,286,287,290,291,294],{},"Ici, le type est ",[51,284,285],{},"ReferenceError",", la description dit que ",[51,288,289],{},"recette"," n'existe pas, et l'erreur est à la ligne 4. L'orthographe est en cause : la variable s'appelle ",[51,292,293],{},"recettes",", avec un s.",[32,296,297],{},"Le navigateur affiche souvent un lien cliquable vers le fichier. Clique dessus pour aller à la ligne en question.",[10,299,301],{"id":300},"les-erreurs-les-plus-courantes","Les erreurs les plus courantes",[32,303,304],{},"Les messages varient selon le navigateur, mais les types sont toujours les mêmes :",[306,307,308,324],"table",{},[309,310,311],"thead",{},[312,313,314,318,321],"tr",{},[315,316,317],"th",{},"Type",[315,319,320],{},"Sens",[315,322,323],{},"Cause fréquente",[325,326,327,341,353],"tbody",{},[312,328,329,335,338],{},[330,331,332],"td",{},[51,333,334],{},"SyntaxError",[330,336,337],{},"Le code est mal écrit et ne peut pas être lu.",[330,339,340],{},"Parenthèse, guillemet ou accolade oubliés.",[312,342,343,347,350],{},[330,344,345],{},[51,346,285],{},[330,348,349],{},"Tu utilises un nom qui n'existe pas.",[330,351,352],{},"Faute de frappe, variable pas encore déclarée.",[312,354,355,360,363],{},[330,356,357],{},[51,358,359],{},"TypeError",[330,361,362],{},"Tu utilises une valeur d'une façon impossible.",[330,364,365,366,369,370,58],{},"Appeler une méthode sur ",[51,367,368],{},"null"," ou ",[51,371,372],{},"undefined",[32,374,375,376,379,380,383],{},"MDN donne des exemples de messages réels : ",[51,377,378],{},"SyntaxError: missing ) after argument list"," signale une parenthèse fermante manquante, et ",[51,381,382],{},"SyntaxError: unterminated string literal"," signale un texte dont le guillemet de fermeture manque.",[385,386,387],"tip",{},[32,388,389],{},"Une erreur de syntaxe empêche tout le script de s'exécuter. Une erreur d'exécution, elle, arrête le script à l'endroit où elle se produit. Corrige donc toujours la première erreur de la liste : les suivantes en sont souvent la conséquence.",[10,391,393],{"id":392},"un-typeerror-pas-à-pas","Un TypeError pas à pas",[32,395,396],{},"Voici une erreur que tu croiseras souvent :",[63,398,400],{"className":179,"code":399,"language":181,"meta":69,"style":69},"const recette = document.querySelector('#recette-du-jour')\nrecette.textContent = 'Tarte aux pommes'\n",[51,401,402,424],{"__ignoreMap":69},[73,403,404,407,409,411,414,417,419,422],{"class":75,"line":76},[73,405,406],{"class":118},"const",[73,408,262],{"class":86},[73,410,125],{"class":118},[73,412,413],{"class":79}," document.",[73,415,416],{"class":149},"querySelector",[73,418,203],{"class":79},[73,420,421],{"class":93},"'#recette-du-jour'",[73,423,209],{"class":79},[73,425,426,429,431],{"class":75,"line":105},[73,427,428],{"class":79},"recette.textContent ",[73,430,90],{"class":118},[73,432,433],{"class":93}," 'Tarte aux pommes'\n",[32,435,436,437,134,440,442,443,445,446,448,449,58],{},"Si aucun élément n'a l'identifiant ",[51,438,439],{},"recette-du-jour",[51,441,416],{}," renvoie ",[51,444,368],{},". La seconde ligne essaie de lire une propriété sur ",[51,447,368],{}," et plante avec un ",[51,450,359],{},[32,452,453,454,457,458,460],{},"La cause n'est pas la ligne 2, mais la ligne 1. Pour comprendre une erreur, remonte vers l'endroit où la valeur a été produite. Affiche-la avec ",[51,455,456],{},"console.log(recette)"," : si tu lis ",[51,459,368],{},", tu as trouvé.",[10,462,464],{"id":463},"la-pile-dappels","La pile d'appels",[32,466,467,468,471,472,476],{},"Quand l'erreur se produit dans une fonction appelée par une autre fonction, le navigateur liste toutes les fonctions en cours. C'est la ",[46,469,470],{},"pile d'appels"," (",[473,474,475],"em",{},"stack trace",").",[63,478,480],{"className":246,"code":479,"language":248,"meta":69,"style":69},"TypeError: Cannot read properties of null (reading 'textContent')\n    at afficherRecette (recettes.js:12:18)\n    at chargerPage (recettes.js:30:5)\n",[51,481,482,510,520],{"__ignoreMap":69},[73,483,484,487,490,493,496,499,502,505,508],{"class":75,"line":76},[73,485,486],{"class":255},"TypeError:",[73,488,489],{"class":93}," Cannot",[73,491,492],{"class":93}," read",[73,494,495],{"class":93}," properties",[73,497,498],{"class":93}," of",[73,500,501],{"class":93}," null",[73,503,504],{"class":79}," (reading ",[73,506,507],{"class":93},"'textContent'",[73,509,209],{"class":79},[73,511,512,514,517],{"class":75,"line":105},[73,513,276],{"class":255},[73,515,516],{"class":93}," afficherRecette",[73,518,519],{"class":79}," (recettes.js:12:18)\n",[73,521,522,524,527],{"class":75,"line":115},[73,523,276],{"class":255},[73,525,526],{"class":93}," chargerPage",[73,528,529],{"class":79}," (recettes.js:30:5)\n",[32,531,532],{},"Lis de haut en bas. La première ligne est l'endroit où l'erreur éclate, la suivante est la fonction qui l'a appelée. Commence par la première ligne qui désigne ton propre fichier, pas un fichier d'une bibliothèque.",[10,534,536],{"id":535},"chercher-efficacement","Chercher efficacement",[32,538,539],{},"Si le message ne suffit pas, cherche-le sur le web. Quelques habitudes aident :",[218,541,542,545,554,557,560],{},[18,543,544],{},"Copie le message d'erreur, sans les noms propres à ton projet.",[18,546,547,548,134,551,58],{},"Ajoute le nom du langage ou de l'outil : ",[51,549,550],{},"javascript",[51,552,553],{},"nuxt",[18,555,556],{},"Garde les guillemets autour de la partie fixe du message.",[18,558,559],{},"Privilégie la documentation officielle et MDN avant les forums.",[18,561,562],{},"Vérifie que la réponse correspond à ta version de l'outil.",[32,564,565,566,569],{},"Un message comme ",[51,567,568],{},"Cannot read properties of null (reading 'textContent')"," est identique chez des milliers de personnes. Tu trouveras vite une explication.",[571,572,573],"warning",{},[32,574,575],{},"Ne colle jamais dans un forum ou un outil en ligne un message qui contient un mot de passe, une clé d'API ou une adresse privée. Remplace-les d'abord par des valeurs fictives.",[10,577,579],{"id":578},"à-retenir","À retenir",[15,581,582,588,591,601,604,607],{},[18,583,584,585,587],{},"La console s'ouvre avec ",[51,586,53],{},", onglet Console, et chaque erreur y est détaillée.",[18,589,590],{},"Un message d'erreur donne un type, une description, un fichier et une ligne.",[18,592,593,134,595,597,598,600],{},[51,594,334],{},[51,596,285],{}," et ",[51,599,359],{}," sont les trois types les plus fréquents.",[18,602,603],{},"Corrige la première erreur de la liste : les autres en découlent souvent.",[18,605,606],{},"Dans une pile d'appels, lis de haut en bas et cherche ton propre fichier.",[18,608,609],{},"Pour chercher, copie le message sans les détails privés et ajoute le nom de l'outil.",[611,612,613],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}",{"title":69,"searchDepth":105,"depth":115,"links":615},[616,617,618,619,620,621,622,623,624],{"id":12,"depth":105,"text":13},{"id":29,"depth":105,"text":30},{"id":40,"depth":105,"text":41},{"id":212,"depth":105,"text":213},{"id":300,"depth":105,"text":301},{"id":392,"depth":105,"text":393},{"id":463,"depth":105,"text":464},{"id":535,"depth":105,"text":536},{"id":578,"depth":105,"text":579},"Ouvrir la console du navigateur, comprendre un message d'erreur et savoir chercher efficacement la cause d'un problème.","md","pratiques",{},[630,48,631,334,359,285,470,632],"erreur","message d'erreur","recherche web",true,"debutant","\u002Fpratiques\u002Flire-une-erreur",[637],"\u002Fpratiques\u002Fnommer-et-organiser",[639,643],{"nom":640,"url":641,"type":642},"MDN, Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FScripting\u002FWhat_went_wrong","cours",{"nom":644,"url":645,"type":646},"MDN, l'API console","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FAPI\u002Fconsole","doc",{"title":5,"description":625},[649,650],{"nom":640,"url":641},{"nom":651,"url":645},"MDN, console","pratiques\u002F02.lire-une-erreur","cIVSKsTsKeXvQR6M5pP8oJpGE47q0vCUbrkB2xLg19E",[655,658,659,663,667,671,675],{"path":637,"title":656,"stem":657},"Nommer et organiser son code","pratiques\u002F01.nommer-et-organiser",{"path":635,"title":5,"stem":652},{"path":660,"title":661,"stem":662},"\u002Fpratiques\u002Fdeboguer","Déboguer méthodiquement","pratiques\u002F03.deboguer",{"path":664,"title":665,"stem":666},"\u002Fpratiques\u002Fgerer-un-projet","Gérer un projet","pratiques\u002F04.gerer-un-projet",{"path":668,"title":669,"stem":670},"\u002Fpratiques\u002Fsecurite-de-base","Sécurité de base","pratiques\u002F05.securite-de-base",{"path":672,"title":673,"stem":674},"\u002Fpratiques\u002Fqualite-et-mise-en-ligne","Qualité et mise en ligne","pratiques\u002F06.qualite-et-mise-en-ligne",{"path":676,"title":677,"stem":678},"\u002Fpratiques","Bonnes pratiques","pratiques\u002Findex",[680,682],{"title":656,"path":637,"stem":657,"description":681,"children":-1},"Choisir des noms qui se lisent comme des phrases, découper en petites fonctions et ranger les fichiers dans des dossiers cohérents.",{"title":661,"path":660,"stem":662,"description":683,"children":-1},"Reproduire un bug, l'isoler et le corriger avec console.log, les points d'arrêt, la méthode du canard en plastique et git bisect.",[685],{"path":637,"title":656,"ligne":627},[687,688,689,690,692,693,695],{"path":637,"title":656,"niveau":634,"stem":657},{"path":635,"title":5,"niveau":634,"stem":652},{"path":660,"title":661,"niveau":634,"stem":662},{"path":664,"title":665,"niveau":691,"stem":666},"intermediaire",{"path":668,"title":669,"niveau":691,"stem":670},{"path":672,"title":673,"niveau":694,"stem":674},"avance",{"path":676,"title":677,"niveau":696,"stem":678},"memo",1794583452042]