Habituellement, lors de la modification d'une page Web, nous utilisons un outil de modification spécifique, tel que Adobe Dreamweaver, CoffeeCup, Bluefish ou l'un des autres outils de développement. Mais qu'en est-il si nous sommes juste en train de réfléchir ou si nous voulons essayer quelque chose sur une page en direct? Nous pourrions faire une copie de la page dans notre outil de prédilection et jouer avec cela. Ou nous pourrions le faire dans notre navigateur Web. Ce tutoriel va vous montrer comment éditer une page Web dans votre navigateur.
Désigné sous Outils de développeur, Firefox appelle la fonctionnalité Inspect Element tandis que Chrome l'appelle Inspecter. Quoi qu’il en soit, c’est un moyen pour le navigateur de jeter un coup d’œil derrière le brillant de votre conception et de jeter un coup d’œil sur le code qui le régit. Cette fonctionnalité est assez connue et est beaucoup utilisée. Ce qui est moins connu, c'est la possibilité de modifier ce code à la volée.
Toute modification apportée ne sera pas sauvegardée et n'affectera pas le live. Si vous ne voulez pas charger la page dans votre outil de développement, c'est une excellente façon d'expérimenter.
Modifier une page Web dans votre navigateur
Dreamweaver et des outils similaires ont un émulateur de navigateur intégré qui simule l'apparence d'un dessin dans différents navigateurs. Bien qu’elles soient, elles ne sont pas toujours exactes et vous constaterez souvent lors du lancement d’un site que ce qui semblait fantastique dans votre outil de développement est légèrement différent dans un navigateur autonome.
Généralement, vous lancez le site sur un serveur Web interne et testez dans un navigateur avant de lancer Live pour cette raison. Si une page est déjà en ligne ou si vous souhaitez simplement essayer quelque chose, vous n'avez pas besoin de la copier et de la charger dans votre outil de développement. Vous pouvez simplement utiliser l'outil Developer du navigateur.
J'utilise Firefox alors je vais vous montrer comment l'utiliser. Chrome est à peu près la même chose.
- Ouvrez une page Web que vous souhaitez expérimenter dans votre navigateur.
- Faites un clic droit n'importe où sur la page et sélectionnez Inspecter.
Vous devriez voir votre page se diviser en deux avec un nouveau panneau apparaissant en bas avec du code. Ce code est le moteur de la page que vous avez sélectionnée. Différents éléments de page sont accessibles depuis les onglets situés en haut de l’onglet inférieur. Par exemple, nous voyons Inspector, Console, Debugger, Style Editor, etc. dans Firefox.
Si vous passez votre curseur sur les lignes du volet inférieur, vous verrez différentes parties de la page Web en surbrillance. La ligne de code sur laquelle vous vous trouvez pendant la surbrillance est le code qui influence cette partie de la page.
- Si vous voulez jouer avec l'apparence de la page, essayez Style Editor.
- Si vous voulez jouer avec le fonctionnement de la page, essayez Console ou Accessibilité.
- Si vous voulez annuler des bugs ou résoudre un problème, utilisez Console ou Debugger
Les performances sont utiles pour le référencement sur site, mais la mémoire, le réseau et le stockage ne sont pas très utilisés.
N'oubliez pas que vous pouvez jouer dans les outils de développement autant que vous le souhaitez et que cela n'aura aucune incidence sur le site. Toute modification est uniquement apportée à la manière dont la page est affichée dans votre navigateur, vous n'affectez pas le site Web. Une fois que vous fermez l'outil, toutes les modifications sont perdues.
Apporter des modifications à une page
Maintenant que vous savez que vous pouvez changer tout ce que vous voulez sans affecter le site Web actuel, amusons-nous un peu. Recherchez un élément sur la page que vous souhaitez modifier. Vous pouvez changer une police, une couleur de police, une image d'arrière-plan ou tout ce que vous voulez. Pour cet exemple, je vais changer la couleur de police du titre de la bannière.
- Cliquez avec le bouton droit sur l'élément exact que vous souhaitez modifier et sélectionnez Inspecter.
- Mettez en surbrillance la ligne avec 'title' ou 'H1' afin que le texte soit mis en surbrillance dans le volet supérieur.
- Naviguez vers les deux volets de gauche et recherchez la couleur de la police.
- Définissez une valeur différente ou sélectionnez le point de couleur pour utiliser un sélecteur.
Votre changement apparaîtra dynamiquement à la fin du changement. Vous pouvez modifier la couleur, la taille, la police, l'arrière-plan et tout ce qui concerne la police. Vous ne pouvez pas enregistrer le travail, mais vos modifications resteront pour cette session.
Vous pouvez modifier tout ce qui concerne la page, ce qui est idéal si vous avez une idée et souhaitez la consulter rapidement avant de lancer toutes vos applications de développement. Tout ce que vous avez à faire est de vous rappeler quels changements vous avez apportés et où, car vous ne pouvez pas les enregistrer ici. Vous devrez prendre une capture d'écran ou enregistrer les modifications et les répliquer dans vos outils de développement pour les conserver.
Editer une page Web dans votre navigateur est une excellente façon d’expérimenter ou de jouer avec les pages. C'est également un bon moyen d'apprendre un peu sur le développement Web sans avoir à acheter des outils de développement coûteux. Maintenant que vous savez comment, allez jouer!
