Utiliser les outils de développement de votre navigateur

Sentez-vous la puissance ?

Tous les principaux navigateurs Internet que vous utilisez disposent de ce qu’on appelle un ensemble d’outils de développement. C’est le cas notamment de Google Chrome, Safari, Firefox et Internet Explorer. Grâce à toutes ces options, il est donc très facile d’utiliser ces outils de développement pour réaliser des choses vraiment sympas ! Sur cette page, j'utiliserai les outils de développement de Google Chrome, accessibles en cliquant avec le bouton droit de la souris puis en sélectionnant « Inspecter » (pour un bref aperçu des outils de développement de Chrome, cliquez sur ici). Vous trouverez ci-dessous quelques points essentiels sur ce que vous pouvez réaliser grâce aux outils de développement de votre navigateur et dans quelles situations ils peuvent vous être utiles.

Vérifiez les erreurs de la console pour savoir pourquoi quelque chose ne fonctionne pas correctement sur votre site.

Si vous constatez que le contenu de votre page ne se charge pas correctement ou que quelque chose semble ‘ bizarre ’, il est essentiel de pouvoir vérifier les éventuelles erreurs locales qui pourraient survenir lors du chargement d’une page. Pour commencer, ouvrez les outils de développement de votre navigateur et accédez à l'onglet “ Console ”. Une fois sur cette page, activez l'option « Conserver le journal » située en haut, sous les onglets principaux, puis actualisez la page si aucune information ne s'affiche.

Une fois cette opération effectuée, les messages d'erreur s'afficheront. Si vous ne savez pas exactement ce que signifie un message d'erreur ou comment y remédier, nous vous conseillons de lire cet article. ici. Si vous ne savez toujours pas comment procéder, merci de nous envoyer une capture d'écran de ce que vous voyez, accompagnée d'une brève explication du problème rencontré, dans un ticket d'assistance.

Modifiez ou adaptez vos styles CSS et observez leur impact sur votre site avant d'enregistrer les modifications dans votre thème ou votre plugin.

Si vous n'appréciez pas la manière dont votre thème ou MemberPress affiche ses styles CSS, ou Si l'affichage n'est pas correct, WordPress permet de corriger cela très facilement à l'aide d'un plugin tiers. Nous vous recommandons d'utiliser le Plugin CSS personnalisé simplemais il existe également d'autres options si vous effectuez un simple recherche pour les plugins WordPress de CSS personnalisé. Le principe de ce type de plugins est le suivant : vous pouvez créer n'importe quel code CSS personnalisé, le coller dans le plugin, et il sera appliqué. Si vous parvenez à restreindre le code CSS à votre thème, sachez que la plupart des thèmes disposent d'un emplacement dédié à l'ajout de CSS personnalisé ; n'hésitez donc pas à vous renseigner auprès du développeur de votre thème si vous ne savez pas où le trouver.

Dans cet exemple, imaginons que je souhaite que les intitulés des champs de mon formulaire d’inscription MemberPress soient un peu plus grands qu’ils ne le sont ici :

La façon la plus simple de procéder est de faire un clic droit directement sur l'élément 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'élément, cela ressemblera à ceci :

Vous remarquerez que lorsque j’ai fait cela, la section surlignée en gris dans les outils de développement correspond précisément à cette étiquette de formulaire. Nous recherchons ici la classe div, qui nous indiquera quelle est la classe CSS appelée et utilisée pour afficher le texte. Lorsque je passe la souris sur la classe div, l'élément concerné s'affiche en bleu ; c'est donc un bon moyen de vérifier que vous avez bien identifié la bonne classe. La classe correspondante est mp-form-label et bien que nous n'allions pas trop nous attarder dans cet article sur les détails du fonctionnement du CSS (mais si vous souhaitez en savoir plus sur le CSS, ici est un bon point de départ), sachez que pour cet exemple, afin d'agrandir le texte, je devrais l'entrer dans le plugin CSS Custom Manager :

Voici quelques points importants à retenir : veillez à commencer chaque classe par un “ . ” (point), à encadrer le code de mise en forme entre “ {} ” (accolades), et il est toujours recommandé d'inclure un !important variable. La raison pour laquelle vous pouvez avoir besoin d'inclure la variable !important La raison pour laquelle cette variable est nécessaire, c’est que, la plupart du temps, lorsque vous ajoutez du CSS personnalisé, vous remplacez le CSS existant, et cela devrait garantir que c’est bien votre CSS personnalisé qui s’affiche. Voici à quoi ressemblerait cette modification :

Vérifiez sur quel serveur votre contenu est chargé lorsqu'il ne s'affiche pas correctement.

Il arrive parfois qu’une partie spécifique de votre site ne se charge pas correctement, comme c’est le cas pour les fichiers protégés par des règles URI personnalisées. Ce problème est généralement dû au fait que le contenu est chargé par un serveur autre qu’Apache, comme NGINX, qui est souvent à l’origine de ce genre de dysfonctionnement. Pour vérifier cela, ouvrez les outils de développement, puis accédez à l’onglet « Réseau ». Si vous ne voyez rien s’afficher, vous devrez peut-être actualiser la page ; sinon, vous verrez apparaître une liste de tous les emplacements des fichiers utilisés pour charger la page. Faites défiler vers le bas jusqu’à ce que vous trouviez l’emplacement du fichier qui récupère le contenu ne s’affichant pas correctement (vous saurez généralement de quel fichier il s’agit, car il comportera une sorte de code d'erreur (au niveau du statut) et cliquez sur le lien. Cela affichera diverses informations, notamment le code de statut, mais ici, vous devrez vous reporter à la rubrique “ En-têtes de réponse ”, comme vous pouvez le voir ici :

Vous remarquerez ici que le contenu a été chargé via Apache, mais là encore, s'il s'agit d'un autre serveur et que vous rencontrez un problème, vous devrez apporter une modification. Plus précisément, vous devrez contacter votre hébergeur pour lui demander s'il est possible de transférer les requêtes concernant ces types de fichiers vers Apache pour qu'il les traite, plutôt que vers NGINX.