{"id":5335,"date":"2024-08-27T16:01:18","date_gmt":"2024-08-27T16:01:18","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-inspecteur-html-deboguer\/"},"modified":"2024-11-08T19:18:25","modified_gmt":"2024-11-08T19:18:25","slug":"utiliser-inspecteur-html-deboguer","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-inspecteur-html-deboguer\/","title":{"rendered":"2.15 Utiliser l&rsquo;Inspecteur HTML pour D\u00e9boguer"},"content":{"rendered":"\n\n\n<p><strong>Utiliser l&rsquo;Inspecteur HTML pour D\u00e9boguer<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Cette fonctionnalit\u00e9, int\u00e9gr\u00e9e dans la plupart des navigateurs modernes, permet de comprendre et de r\u00e9soudre les probl\u00e8mes d&rsquo;affichage et de comportement des pages web. Apprenons comment tirer le meilleur parti de l&rsquo;Inspecteur HTML gr\u00e2ce \u00e0 des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Inspecteur HTML<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586255120?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>L&rsquo;Inspecteur HTML est un outil interactif fourni par les navigateurs tels que Google Chrome, Firefox ou Microsoft Edge. Il permet aux d\u00e9veloppeurs d&rsquo;examiner, de modifier et de d\u00e9boguer le code HTML, CSS et JavaScript d&rsquo;une page web en temps r\u00e9el. Vous pouvez acc\u00e9der \u00e0 cet outil en cliquant avec le bouton droit sur une page web et en s\u00e9lectionnant \u00ab\u00a0Inspecter\u00a0\u00bb, ou en utilisant des raccourcis clavier comme <code>Ctrl+Shift+I<\/code> sur Windows\/Linux ou <code>Cmd+Opt+I<\/code> sur macOS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der \u00e0 l&rsquo;Inspecteur HTML<\/h3>\n\n\n\n<p>Pour acc\u00e9der \u00e0 l&rsquo;Inspecteur HTML, suivez ces \u00e9tapes simples :<\/p>\n\n\n\n<p><ol>\n<li>Ouvrez votre navigateur web.<\/li>\n<li>Chargez la page que vous souhaitez d\u00e9boguer.<\/li>\n<li>Faites un clic droit n&rsquo;importe o\u00f9 sur la page et s\u00e9lectionnez <code>Inspecter<\/code>.<\/li>\n<\/ol><\/p>\n\n\n\n<p>Alternativement, vous pouvez utiliser les raccourcis clavier mentionn\u00e9s ci-dessus pour ouvrir directement l&rsquo;Inspecteur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Explorer le DOM avec l&rsquo;Inspecteur HTML<\/h3>\n\n\n\n<p>Une fois l&rsquo;Inspecteur HTML ouvert, vous verrez la structure du Document Object Model (DOM) de la page. Le DOM repr\u00e9sente la hi\u00e9rarchie du contenu HTML de votre document. En naviguant dans cet arbre, vous pouvez s\u00e9lectionner n&rsquo;importe quel \u00e9l\u00e9ment pour voir ses propri\u00e9t\u00e9s CSS, ses \u00e9v\u00e9nements attach\u00e9s, et ses liaisons JavaScript.<\/p>\n\n\n\n<div id=\"exampleContainer\" style=\"position: relative; background: #f7f7f7; padding: 20px; border: 1px solid #e0e0e0; margin: 20px 0;\">\n  <p id=\"exampleText\" style=\"color: #333;\">Texte d&rsquo;exemple pour l&rsquo;inspection HTML.<\/p>\n<\/div>\n\n\n\n<p>En cliquant sur l&rsquo;\u00e9l\u00e9ment <code>Texte d'exemple pour l'inspection HTML<\/code> dans l&rsquo;Inspecteur, vous pouvez visualiser et modifier ses styles. Par exemple, vous pouvez changer la couleur du texte en \u00e9ditant directement le style CSS int\u00e9gr\u00e9 dans l&rsquo;Inspecteur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Modifier les Styles en Direct<\/h3>\n\n\n\n<p>Une des fonctionnalit\u00e9s les plus puissantes de l&rsquo;Inspecteur HTML est la capacit\u00e9 de modifier les styles CSS en direct et de voir instantan\u00e9ment les r\u00e9sultats. Cela vous permet de tester diff\u00e9rents styles et de comprendre comment ils affectent la page. Pour ce faire, s\u00e9lectionnez l&rsquo;\u00e9l\u00e9ment que vous souhaitez modifier, puis dans l&rsquo;onglet \u00ab\u00a0Styles\u00a0\u00bb, changez les valeurs CSS.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>#exampleText {\n    color: #007bff;\n    font-weight: bold;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9boguer les Script JavaScript<\/h3>\n\n\n\n<p>En plus de l&rsquo;HTML et du CSS, l&rsquo;Inspecteur permet \u00e9galement de d\u00e9boguer les scripts JavaScript. Dans l&rsquo;onglet \u00ab\u00a0Console\u00a0\u00bb, vous pouvez voir les erreurs et les avertissements de JavaScript, ex\u00e9cuter des expressions JavaScript et interagir avec les variables globales. Cela est extr\u00eamement utile pour identifier et r\u00e9soudre les probl\u00e8mes de scripts.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Exemple de script qui d\u00e9clenche une erreur\nfunction exampleFunction() {\n    console.log(nonExistentVariable);\n}\nexampleFunction();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation de l&rsquo;Inspecteur HTML<\/h3>\n\n\n\n<p>Pour approfondir l&rsquo;utilisation de l&rsquo;Inspecteur HTML, voici quelques exemples avanc\u00e9s qui montrent comment cet outil peut \u00eatre utilis\u00e9 pour r\u00e9soudre des probl\u00e8mes complexes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Analyser les Performances de la Page<\/h4>\n\n\n\n<p>Le panneau \u00ab\u00a0Network\u00a0\u00bb de l&rsquo;Inspecteur permet de suivre tous les appels r\u00e9seau effectu\u00e9s par la page, incluant les fichiers CSS, JavaScript et les requ\u00eates API. Cela vous permet de diagnostiquer les probl\u00e8mes de chargement lent et d&rsquo;optimiser vos ressources.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-json\"><code>{\n    \"status\": 200,\n    \"data\": {\n        \"message\": \"Requ\u00eate r\u00e9seau r\u00e9ussie\"\n    }\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9boguer le Rendu Mobile<\/h4>\n\n\n\n<p>En utilisant la vue adaptative, vous pouvez v\u00e9rifier comment votre page se comporte sur diff\u00e9rents appareils. Vous pouvez tester les r\u00e9solutions de diff\u00e9rents \u00e9crans, simuler des conditions r\u00e9seau lentes et m\u00eame pivoter l&rsquo;affichage. L&rsquo;option est accessible via l&rsquo;ic\u00f4ne de t\u00e9l\u00e9phone\/tablette dans l&rsquo;Inspecteur.<\/p>\n\n\n\n<div id=\"responsiveExample\" style=\"width: 100%; max-width: 300px; padding: 20px; background: #eee; margin: auto;\">\n  <p style=\"text-align: center;\">Exemple de contenu responsive<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Outils de Debugging pour les Frameworks Modernes<\/h3>\n\n\n\n<p>Avec la popularit\u00e9 croissante des frameworks JavaScript comme React, Vue, ou Angular, l&rsquo;Inspecteur HTML propose des extensions sp\u00e9cifiques pour d\u00e9boguer les applications d\u00e9velopp\u00e9es avec ces outils. Par exemple, l&rsquo;extension React Developer Tools permet de naviguer dans le DOM des composants React et d&rsquo;inspecter leur \u00e9tat et leurs props.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction ExampleComponent() {\n    const &#91;count, setCount] = useState(0);\n\n    return (\n        <div>\n            <p>You clicked {count} times<\/p>\n            <button onclick=\"{()\" ==\"\"> setCount(count + 1)}&gt;\n                Click me\n            <\/button>\n        <\/div>\n    );\n}\n<\/code><\/pre>\n\n\n\n<p>Pour optimiser vos comp\u00e9tences en d\u00e9veloppement web, vous pouvez \u00e9galement consulter notre guide complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" title=\"fonctionnement-navigateur-web-html-guide\">le fonctionnement des navigateurs web<\/a>. Apprendre les <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\" title=\"bases-langage-html-apprendre-fondamentaux\">fondamentaux du langage HTML<\/a> vous aidera en comprenant mieux comment les \u00e9l\u00e9ments HTML sont structur\u00e9s et comment l&rsquo;inspecteur vous aide \u00e0 naviguer \u00e0 travers le DOM. Si vous d\u00e9butez, commencez par <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" title=\"creer-premiere-page-html-tutoriel-facile\">cr\u00e9er votre premi\u00e8re page HTML<\/a> pour une meilleure compr\u00e9hension. D\u00e9couvrez \u00e9galement comment se servir des \u00e9l\u00e9ments de titre avec notre <a href=\"https:\/\/wikiform.fr\/codespace\/element-titre-html-explications-guide\" title=\"element-titre-html-explications-guide\">guide sur les \u00e9l\u00e9ments de titre<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ressources Suppl\u00e9mentaires et Apprentissage Continu<\/h3>\n\n\n\n<p>L&rsquo;Inspecteur HTML est un outil puissant, et il existe de nombreuses ressources pour approfondir son utilisation. Par exemple, le <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\" target=\"_blank\" rel=\"noopener\">site officiel de Chrome DevTools<\/a> fournit des tutoriels et des conseils d\u00e9taill\u00e9s. Pour ceux qui souhaitent aller plus loin, des plateformes comme <a href=\"https:\/\/www.udacity.com\/\" target=\"_blank\" rel=\"noopener\">Udacity<\/a> et <a href=\"https:\/\/www.freecodecamp.org\/\" target=\"_blank\" rel=\"noopener\">freeCodeCamp<\/a> offrent des cours en ligne pour ma\u00eetriser les outils de d\u00e9bogage web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Ma\u00eetriser l&rsquo;Inspecteur HTML est essentiel pour tout d\u00e9veloppeur web souhaitant optimiser et d\u00e9boguer efficacement ses applications. En exploitant les fonctionnalit\u00e9s comme l&rsquo;inspection DOM, la modification de styles en direct et le d\u00e9bogage de scripts JavaScript, vous pouvez rapidement identifier et r\u00e9soudre les probl\u00e8mes. Avoir une bonne compr\u00e9hension des outils de d\u00e9veloppement des navigateurs vous permettra d&rsquo;am\u00e9liorer continuellement vos comp\u00e9tences en <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\" title=\"syntaxe-css-bases-connaitre\">CSS<\/a> et d&rsquo;autres technologies du web. Continuez \u00e0 explorer ces outils pour perfectionner vos comp\u00e9tences en d\u00e9veloppement web.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-web\/145\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-WEB-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation D\u00e9veloppeur Web Offre 50%\" title=\"\"><\/a>\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Utiliser l&rsquo;Inspecteur HTML pour D\u00e9boguer est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Cette fonctionnalit\u00e9, int\u00e9gr\u00e9e dans la plupart des navigateurs modernes, permet de comprendre&#8230;<\/p>\n","protected":false},"author":4,"featured_media":2788,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5335","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5335"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5335\/revisions"}],"predecessor-version":[{"id":6030,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5335\/revisions\/6030"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2788"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}