Comment utiliser l’outil vérifier les éléments du Navigateur

Quelques commandes pour ajuster l’affichage et simuler différentes résolutions d’écran: D’autre part, il existe plusieurs boîtes contenant des informations. Le panneau supérieur est le HTML de la page. Passez le curseur sur une partie du Code pour mettre en évidence la zone pertinente à droite de la page: Voici un panneau qui affiche les informations de la page. Les détails présentés ici varient selon l’onglet sélectionné. Dans la capture d’écran ci – dessus, le style css de la page est affiché. Le panneau suivant ne contient que des nouvelles et des mises à jour sur les outils de développement Chrome. Vous pouvez l’éteindre en toute sécurité en cliquant sur X pour réduire la confusion.
Enfin, vous pouvez modifier l’emplacement de ces carreaux en cliquant sur le menu en trois points dans le coin supérieur droit du panneau HTML et en sélectionnant une option Dock. Accédez à l’élément d’inspection dans Mozilla Firefox l’outil d’élément d’inspection dans Firefox est très similaire à chrome et vous pouvez y accéder de la même façon: Faites un clic droit sur l’élément de la page, puis cliquez sur l’élément d’inspection. Cliquez sur le menu Burger dans le coin supérieur droit de la fenêtre Firefox et sélectionnez développeur Web > inspecteur. Appuyez sur Ctrl + Maj + C sur le clavier (CMD + Option + C sur Mac). Par défaut, Firefox place la boîte d’information au bas de l’écran: Cependant, vous pouvez facilement les déplacer en cliquant sur le menu en trois points et en sélectionnant d’autres options. Accédez aux éléments de contrôle dans Safari sur un Mac et le navigateur Web Safari fournit également des outils pour vérifier les éléments. Cependant, il y a une autre étape pour y accéder: Vous devez activer les outils de développement safari. Pour ce faire, allez dans la barre de menu en haut de l’écran, puis allez à Safari > préférences > avancé. Vous pouvez ensuite sélectionner la case à cocher pour activer Strum
Prévisualiser les modifications apportées au texte, à la police ou à la couleur de la page. De cette façon, vous pouvez voir exactement ce que vous pensez sans même avoir à accéder au tableau de bord WordPress. Pour modifier un élément, faites un clic droit sur l’élément et sélectionnez vérifier. Ceci ouvre l’outil et affiche le Code de l’élément au premier plan. Si vous avez vérifié un élément ouvert, vous pouvez également cliquer sur l’élément dans le panneau d’aperçu pour mettre en évidence le Code associé. Ensuite, double – cliquez sur le Code pour le rendre modifiable. Par exemple, ici nous avons changé le titre du blog: Vous pouvez également changer de couleur. Il suffit de sélectionner un élément et de faire défiler le panneau de style pour trouver la section pertinente. Vous pouvez cliquer sur la boîte de couleurs pour afficher le sélecteur de couleurs: Si vous savez quoi utiliser, vous pouvez également modifier directement le Code de couleur hexadécimal. 4. Prévisualiser les modifications apportées à l’image de l’élément d’inspection peut également prévisualiser facilement les modifications apportées à l’image. C’est aussi une bonne façon d’essayer différentes tailles d’images. Sélectionnez simplement l’image à éditer dans le panneau d’aperçu et double – cliquez sur son URL dans le panneau HTML: Vous pouvez ensuite coller l’URL de différentes images pour le tester. Si l’image se trouve dans la médiathèque WordPress, vous pouvez rapidement trouver l’url dans les détails de la pièce jointe: Il y a aussi un bouton pratique pour copier l’URL dans le presse – papiers. De même, gardez à l’esprit que tous les changements que vous faites dans l’Inspecteur sont temporaires et que vous êtes le seul à pouvoir les voir, alors soyez assuré de jouer. Enfin, une autre caractéristique utile de l’élément d’inspection est la capacité de simuler différentes tailles d’écran ou même des appareils spécifiques. Cela vous permet de tester la réactivité du site et de voir à quoi il ressemble en fonction de divers facteurs.