{"id":61405,"date":"2024-02-13T07:25:00","date_gmt":"2024-02-13T12:25:00","guid":{"rendered":"https:\/\/memberpress.com\/docs\/using-your-browsers-developer-tools\/"},"modified":"2024-02-13T17:19:22","modified_gmt":"2024-02-13T22:19:22","slug":"using-your-browsers-developer-tools","status":"publish","type":"ht_kb","link":"https:\/\/memberpress.com\/fr\/docs\/using-your-browsers-developer-tools\/","title":{"rendered":"Utiliser les outils de d\u00e9veloppement de votre navigateur"},"content":{"rendered":"

Sentez-vous la puissance ?<\/h2>\n

\n\t Tous les principaux navigateurs Internet que vous utilisez disposent de ce qu\u2019on appelle un ensemble d\u2019outils de d\u00e9veloppement. C\u2019est le cas notamment de Google Chrome, Safari, Firefox et Internet Explorer. Gr\u00e2ce \u00e0 toutes ces options, il est donc tr\u00e8s facile d\u2019utiliser ces outils de d\u00e9veloppement pour r\u00e9aliser des choses vraiment sympas ! Sur cette page, j'utiliserai les outils de d\u00e9veloppement de Google Chrome, accessibles en cliquant avec le bouton droit de la souris puis en s\u00e9lectionnant \u00ab Inspecter \u00bb (pour un bref aper\u00e7u des outils de d\u00e9veloppement de Chrome, cliquez sur ici<\/a>). Vous trouverez ci-dessous quelques points essentiels sur ce que vous pouvez r\u00e9aliser gr\u00e2ce aux outils de d\u00e9veloppement de votre navigateur et dans quelles situations ils peuvent vous \u00eatre utiles.<\/p>\n

V\u00e9rifiez les erreurs de la console pour savoir pourquoi quelque chose ne fonctionne pas correctement sur votre site.<\/h4>\n

\n\t Si vous constatez que le contenu de votre page ne se charge pas correctement ou que quelque chose semble \u2018 bizarre \u2019, il est essentiel de pouvoir v\u00e9rifier les \u00e9ventuelles erreurs locales qui pourraient survenir lors du chargement d\u2019une page. Pour commencer, ouvrez les outils de d\u00e9veloppement de votre navigateur et acc\u00e9dez \u00e0 l'onglet \u201c Console \u201d. Une fois sur cette page, activez l'option \u00ab Conserver le journal \u00bb situ\u00e9e en haut, sous les onglets principaux, puis actualisez la page si aucune information ne s'affiche.<\/p>\n

\n\t Une fois cette op\u00e9ration effectu\u00e9e, les messages d'erreur s'afficheront. Si vous ne savez pas exactement ce que signifie un message d'erreur ou comment y rem\u00e9dier, nous vous conseillons de lire cet article. ici<\/a>. Si vous ne savez toujours pas comment proc\u00e9der, merci de nous envoyer une capture d'\u00e9cran de ce que vous voyez, accompagn\u00e9e d'une br\u00e8ve explication du probl\u00e8me rencontr\u00e9, dans un ticket d'assistance<\/a>.<\/p>\n

Modifiez ou adaptez vos styles CSS et observez leur impact sur votre site avant d'enregistrer les modifications dans votre th\u00e8me ou votre plugin.<\/h4>\n

\n\t Si vous n'appr\u00e9ciez pas la mani\u00e8re dont votre th\u00e8me ou MemberPress affiche ses styles CSS, ou<\/strong> Si l'affichage n'est pas correct, WordPress permet de corriger cela tr\u00e8s facilement \u00e0 l'aide d'un plugin tiers. Nous vous recommandons d'utiliser le Plugin CSS personnalis\u00e9 simple<\/a>mais il existe \u00e9galement d'autres options si vous effectuez un simple recherche<\/a> pour les plugins WordPress de CSS personnalis\u00e9. Le principe de ce type de plugins est le suivant : vous pouvez cr\u00e9er n'importe quel code CSS personnalis\u00e9, le coller dans le plugin, et il sera appliqu\u00e9. Si vous parvenez \u00e0 restreindre le code CSS \u00e0 votre th\u00e8me, sachez que la plupart des th\u00e8mes disposent d'un emplacement d\u00e9di\u00e9 \u00e0 l'ajout de CSS personnalis\u00e9 ; n'h\u00e9sitez donc pas \u00e0 vous renseigner aupr\u00e8s du d\u00e9veloppeur de votre th\u00e8me si vous ne savez pas o\u00f9 le trouver.<\/p>\n

\n\t Dans cet exemple, imaginons que je souhaite que les intitul\u00e9s des champs de mon formulaire d\u2019inscription MemberPress soient un peu plus grands qu\u2019ils ne le sont ici :<\/p>\n

<\/p>\n

\n\t La fa\u00e7on la plus simple de proc\u00e9der est de faire un clic droit directement sur l'\u00e9l\u00e9ment que vous souhaitez modifier. Ainsi, si je fais un clic droit sur l'un de ces titres et que je clique ensuite sur inspecter l'\u00e9l\u00e9ment, cela ressemblera \u00e0 ceci :<\/p>\n

<\/p>\n

Vous remarquerez que lorsque j\u2019ai fait cela, la section surlign\u00e9e en gris dans les outils de d\u00e9veloppement correspond pr\u00e9cis\u00e9ment \u00e0 cette \u00e9tiquette de formulaire. Nous recherchons ici la classe div, qui nous indiquera quelle est la classe CSS appel\u00e9e et utilis\u00e9e pour afficher le texte. Lorsque je passe la souris sur la classe div, l'\u00e9l\u00e9ment concern\u00e9 s'affiche en bleu ; c'est donc un bon moyen de v\u00e9rifier que vous avez bien identifi\u00e9 la bonne classe. La classe correspondante est mp-form-label<\/strong> et bien que nous n'allions pas trop nous attarder dans cet article sur les d\u00e9tails du fonctionnement du CSS (mais si vous souhaitez en savoir plus sur le CSS, ici<\/a> est un bon point de d\u00e9part), sachez que pour cet exemple, afin d'agrandir le texte, je devrais l'entrer dans le plugin CSS Custom Manager :<\/p>\n

<\/p>\n

\n\t Voici quelques points importants \u00e0 retenir : veillez \u00e0 commencer chaque classe par un \u201c . \u201d (point), \u00e0 encadrer le code de mise en forme entre \u201c {} \u201d (accolades), et il est toujours recommand\u00e9 d'inclure un !important<\/strong> variable. La raison pour laquelle vous pouvez avoir besoin d'inclure la variable !important<\/strong> La raison pour laquelle cette variable est n\u00e9cessaire, c\u2019est que, la plupart du temps, lorsque vous ajoutez du CSS personnalis\u00e9, vous remplacez le CSS existant, et cela devrait garantir que c\u2019est bien votre CSS personnalis\u00e9 qui s\u2019affiche. Voici \u00e0 quoi ressemblerait cette modification :<\/p>\n

<\/p>\n

V\u00e9rifiez sur quel serveur votre contenu est charg\u00e9 lorsqu'il ne s'affiche pas correctement.<\/h4>\n

\n\t Il arrive parfois qu\u2019une partie sp\u00e9cifique de votre site ne se charge pas correctement, comme c\u2019est le cas pour les fichiers prot\u00e9g\u00e9s par des r\u00e8gles URI personnalis\u00e9es. Ce probl\u00e8me est g\u00e9n\u00e9ralement d\u00fb au fait que le contenu est charg\u00e9 par un serveur autre qu\u2019Apache, comme NGINX, qui est souvent \u00e0 l\u2019origine de ce genre de dysfonctionnement. Pour v\u00e9rifier cela, ouvrez les outils de d\u00e9veloppement, puis acc\u00e9dez \u00e0 l\u2019onglet \u00ab R\u00e9seau \u00bb. Si vous ne voyez rien s\u2019afficher, vous devrez peut-\u00eatre actualiser la page ; sinon, vous verrez appara\u00eetre une liste de tous les emplacements des fichiers utilis\u00e9s pour charger la page. Faites d\u00e9filer vers le bas jusqu\u2019\u00e0 ce que vous trouviez l\u2019emplacement du fichier qui r\u00e9cup\u00e8re le contenu ne s\u2019affichant pas correctement (vous saurez g\u00e9n\u00e9ralement de quel fichier il s\u2019agit, car il comportera une sorte de code d'erreur<\/a> (au niveau du statut) et cliquez sur le lien. Cela affichera diverses informations, notamment le code de statut, mais ici, vous devrez vous reporter \u00e0 la rubrique \u201c En-t\u00eates de r\u00e9ponse \u201d, comme vous pouvez le voir ici :<\/p>\n

<\/p>\n

\n\t Vous remarquerez ici que le contenu a \u00e9t\u00e9 charg\u00e9 via Apache, mais l\u00e0 encore, s'il s'agit d'un autre serveur et que vous rencontrez un probl\u00e8me, vous devrez apporter une modification. Plus pr\u00e9cis\u00e9ment, vous devrez contacter votre h\u00e9bergeur pour lui demander s'il est possible de transf\u00e9rer les requ\u00eates concernant ces types de fichiers vers Apache pour qu'il les traite, plut\u00f4t que vers NGINX.<\/p>","protected":false},"excerpt":{"rendered":"

Can You Feel the Power? Every major internet browser that you use has what is called a set of Developer Tools. This includes Google Chrome, Safari, Firefox and Internet Explorer. So, with all of those options it makes it really easy to utilize a set of Developer Tools to accomplish some pretty cool things! On […]<\/p>\n","protected":false},"author":62252,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","_FSMCFIC_featured_image_caption":"","_FSMCFIC_featured_image_nocaption":"","_FSMCFIC_featured_image_hide":"","_strive_checklists":"\"\"","_strive_active_checklist":"62291e2bb2422","footnotes":""},"ht-kb-category":[1314],"ht-kb-tag":[],"class_list":["post-61405","ht_kb","type-ht_kb","status-publish","format-standard","ht_kb_category-miscellaneous","entry","has-post-thumbnail"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t