{"id":368618,"date":"2022-12-17T10:01:00","date_gmt":"2022-12-17T07:01:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368618"},"modified":"2022-12-29T18:04:17","modified_gmt":"2022-12-29T15:04:17","slug":"comment-inspecter-les-elements-du-site-web-dans-votre-navigateur","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-inspecter-les-elements-du-site-web-dans-votre-navigateur\/","title":{"rendered":"Comment inspecter les \u00e9l\u00e9ments du site Web dans votre navigateur"},"content":{"rendered":"\n<p>Si vous avez d\u00e9j\u00e0 \u00e9t\u00e9 curieux de voir \u00e0 quoi ressemblerait votre page avec diff\u00e9rents styles, mais sans avoir \u00e0 appliquer de modifications, vous serez ravi d&rsquo;apprendre qu&rsquo;il existe un moyen pour vous de le faire. En fait, votre navigateur est livr\u00e9 avec un <strong>outil pratique qui vous permettra d&rsquo;inspecter les \u00e9l\u00e9ments du site Web<\/strong>. Ainsi, vous pourrez voir les diff\u00e9rentes fa\u00e7ons dont votre contenu peut ressembler.<\/p>\n<p>Dans le texte ci-dessous, nous vous fournirons tous les \u00e9l\u00e9ments essentiels pour inspecter les \u00e9l\u00e9ments du site Web tout en travaillant dans WordPress.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/KsV3YdZiwcU\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Qu&rsquo;est-ce qu&rsquo;Inspect Element\u00a0?<\/h2>\n<p>Tous les derniers navigateurs Web sont livr\u00e9s avec un ensemble d&rsquo;outils int\u00e9gr\u00e9s qui affichent le code CSS, JavaScript et HTML d&rsquo;une page particuli\u00e8re. L&rsquo;outil Inspect permet aux d\u00e9veloppeurs Web de modifier le code dans leur navigateur Web si n\u00e9cessaire. Cela leur donne la <strong>possibilit\u00e9 de pr\u00e9visualiser les modifications sans r\u00e9ellement alt\u00e9rer le code<\/strong>. En d&rsquo;autres termes, ils sont les seuls \u00e0 pouvoir voir ces changements dans leur navigateur.<\/p>\n<p>Cette option peut \u00eatre particuli\u00e8rement b\u00e9n\u00e9fique pour ceux qui souhaitent mettre en \u0153uvre des modifications sur leur site Web WordPress mais souhaitent les pr\u00e9visualiser avant de les autoriser \u00e0 prendre effet. Par exemple, si vous \u00eates propri\u00e9taire d&rsquo;un blog et que vous souhaitez voir comment l&rsquo; <a href=\"https:\/\/themewp.inform.click\/fr\/extrait-wordpress-quest-ce-que-cest-et-comment-lutiliser\/\" title=\"extrait WordPress de l'un de vos messages\">extrait WordPress de l&rsquo;un de vos messages<\/a> serait affich\u00e9 dans votre navigateur, vous pouvez facilement le faire \u00e0 l&rsquo;aide de cet outil.<\/p>\n<p>Non seulement cela est utile pour les propri\u00e9taires de sites Web, mais \u00e9galement pour tout \u00e9crivain, sp\u00e9cialiste du marketing, agent de support et toute autre personne int\u00e9ress\u00e9e \u00e0 voir \u00e0 quoi pourrait ressembler le contenu sur lequel ils travaillent.<\/p>\n<h2>Comment inspecter un \u00e9l\u00e9ment dans Google Chrome<\/h2>\n<p>Il existe deux fa\u00e7ons d&rsquo;acc\u00e9der \u00e0 cet outil. Vous pouvez soit <strong>cliquer avec le bouton droit sur n&rsquo;importe quelle zone de votre page Web et s\u00e9lectionner inspecter<\/strong>, soit cliquer sur CTRL + Maj + I sur votre clavier.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3c0ff88.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3c0ff88.jpg\" alt=\"Comment inspecter les \u00e9l\u00e9ments du site Web dans votre navigateur\"><\/a><\/p>\n<p>Apr\u00e8s avoir effectu\u00e9 cette premi\u00e8re \u00e9tape, votre navigateur se divisera automatiquement en deux, et le <strong>code source de votre page appara\u00eetra dans la petite fen\u00eatre<\/strong>. Dans cette fen\u00eatre, vous verrez HTML \u00e0 gauche et CSS \u00e0 droite.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3d855fd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f3d855fd.jpg\" alt=\"Comment inspecter les \u00e9l\u00e9ments du site Web dans votre navigateur\"><\/a><\/p>\n<p>Diff\u00e9rentes zones de la page Web seront <strong>mises en surbrillance lorsque vous faites glisser la souris sur la source HTML<\/strong>. Si vous finissez par cliquer avec le bouton droit sur un \u00e9l\u00e9ment sp\u00e9cifique de votre page Web, cet \u00e9l\u00e9ment sera mis en surbrillance.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f40925fb.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f40925fb.jpg\" alt=\"Comment inspecter les \u00e9l\u00e9ments du site Web dans votre navigateur\"><\/a><\/p>\n<h2>Comment modifier et d\u00e9boguer le code<\/h2>\n<p>Avec l&rsquo;outil Inspecter l&rsquo;\u00e9l\u00e9ment, vous pouvez modifier \u00e0 la fois HTML et CSS. Pour modifier le code HTML, double-cliquez simplement sur n&rsquo;importe quelle zone du code source HTML, puis modifiez le code.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f42ebb27.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f42ebb27.jpg\" alt=\"Comment inspecter les \u00e9l\u00e9ments du site Web dans votre navigateur\"><\/a><\/p>\n<p>Faire la m\u00eame chose est \u00e9galement possible dans la zone CSS. Pour <strong>ajouter une nouvelle r\u00e8gle de style<\/strong>, cliquez simplement sur l&rsquo;ic\u00f4ne + en haut.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f461f050.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f461f050.jpg\" alt=\"Comment inspecter les \u00e9l\u00e9ments du site Web dans votre navigateur\"><\/a><\/p>\n<p>Toutes les modifications que vous apportez seront imm\u00e9diatement affich\u00e9es dans votre navigateur.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f49607f3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f49607f3.jpg\" alt=\"Comment inspecter les \u00e9l\u00e9ments du site Web dans votre navigateur\"><\/a><\/p>\n<p>Encore une fois, nous devons souligner qu&rsquo;aucune de ces modifications ne sera enregistr\u00e9e. Vous pouvez inspecter tous les \u00e9l\u00e9ments du site Web que vous aimez aussi longtemps que vous le souhaitez, mais il ne s&rsquo;agit <strong>que d&rsquo;un outil de d\u00e9bogage qui ne vous permettra pas d&rsquo;appliquer de modifications r\u00e9elles au code<\/strong>. En d&rsquo;autres termes, toutes vos modifications dispara\u00eetront une fois que vous rechargerez votre page.<\/p>\n<p>C&rsquo;est pourquoi, si vous souhaitez r\u00e9ellement apporter les modifications, vous devrez acc\u00e9der \u00e0 la feuille de style de votre th\u00e8me WordPress et y modifier le code. Cependant, nous devons noter que <a href=\"https:\/\/themewp.inform.click\/fr\/comment-creer-un-theme-enfant-de-la-bonne-maniere\/\" title=\"vous devez cr\u00e9er un th\u00e8me enfant\">vous devez cr\u00e9er un th\u00e8me enfant<\/a> \u00e0 ces fins.<\/p>\n<h2>Zone de la console pour rechercher des erreurs<\/h2>\n<p>Une autre fonction importante de l&rsquo;outil Inspect Element est une zone de console. Cette zone particuli\u00e8re affiche toutes les <strong>erreurs existantes sur votre site<\/strong>. Par cons\u00e9quent, si vous souhaitez d\u00e9boguer une erreur sur votre page, v\u00e9rifier cette zone pour inspecter les erreurs pourrait vous \u00eatre utile.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f4cd1321.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-326930-633e5f4cd1321.jpg\" alt=\"Comment inspecter les \u00e9l\u00e9ments du site Web dans votre navigateur\"><\/a><\/p>\n<p>Apprendre \u00e0 inspecter les \u00e9l\u00e9ments du site Web n&rsquo;est pas seulement utile pour votre travail, mais cela peut \u00e9galement faire gagner du temps \u00e0 votre \u00e9quipe de support technique si vous savez d\u00e9j\u00e0 quel est votre probl\u00e8me. \u00c9tant donn\u00e9 que cet outil puissant pr\u00e9sente de multiples avantages, nous vous recommandons d&rsquo;essayer de l&rsquo;utiliser en suivant notre guide.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Votre navigateur est livr\u00e9 avec un outil pratique qui vous permettra d&rsquo;inspecter les \u00e9l\u00e9ments du site Web et de voir les diff\u00e9rentes fa\u00e7ons dont votre contenu peut ressembler.<\/p>\n","protected":false},"author":1,"featured_media":364372,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-368618","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-les-bases-de-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/368618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=368618"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/368618\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/364372"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=368618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=368618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=368618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}