Astuces de l'inspecteur d'éléments : 8 hacks à connaître absolument ! 🛠️
L'inspecteur d'éléments dans votre navigateur peut sembler être un outil réservé aux développeurs, mais vous pouvez en fait faire des choses plutôt sympas avec lui même si vous ne savez rien de la programmation ! 🚀
1 . Télécharger les images
Peut-être avez-vous besoin de télécharger une image à partir d’un site Web. Vous essayez de faire un clic droit et d’appuyer sur « Enregistrer l’image », et vous constatez que l’option est grisée ou que le bouton « Enregistrer l’image » n’apparaît pas. D'autres fois, vous ne pourrez télécharger qu'une miniature de l'image, et non le fichier entier. 🤔 Quoi de neuf ?
Les développeurs désactivent souvent intentionnellement ce bouton « Enregistrer l’image » ou utilisent un framework Web qui ne permet pas de télécharger des images de cette façon. Mais il existe une solution pratique dans l’inspecteur d’éléments. Vous pouvez obtenir n’importe quelle ressource d’image à partir d’un site Web, en taille réelle, en trois étapes simples. 📸
Étape 1
Fait clic droit sur n’importe où sur la page et sélectionnez « Inspecter l’élément » ou « Inspecter ». Vous pouvez également utiliser le raccourci clavier spécifique à l'inspecteur dans votre navigateur. F12 fonctionne dans la plupart des navigateurs et les systèmes d'exploitation. J'utilise Firefox pour cette démo, mais les étapes sont identiques. 🖱️
Étape 2
Dans la fenêtre de l’inspecteur d’éléments, cliquez sur l’onglet « Réseau ». L’onglet réseau devrait avoir « Images » comme l’un de ses sous-menus. Cliquez sur « Images ». 🖼️
Rechargez maintenant la page afin que toutes les ressources d’image apparaissent dans l’onglet « Images ». Utilisez le Bouton Actualiser à côté de la barre d'adresse depuis votre navigateur ou appuyez sur Ctrl+R. 🔄
Étape 3
Et voilà. L'intégralité de la bibliothèque d'images doit être chargée dans la liste. La liste est mise à jour de manière dynamique, de sorte qu'à mesure que davantage d'images sont téléchargées sur le site Web, elles apparaîtront également ici. 🖼️✨
Vous pouvez survoler un fichier pour voir son aperçu et ses dimensions. Double-cliquez pour ouvrir le fichier dans un nouvel onglet, où vous pourrez l'enregistrer en utilisant le menu contextuel. 💾
2 . Télécharger des vidéos
Tout comme les ressources d'image, les sites Web ne le permettent parfois pas décharge vidéos directement. Mais vous pouvez les télécharger en les chargeant dans l'inspecteur d'éléments. Une fois chargés dans l'inspecteur, double-cliquez simplement sur le nom du fichier pour l'ouvrir dans un nouvel onglet. 🎥
Étape 1
Ouvrez la fenêtre Inspecteur d’éléments en appuyant sur le raccourci clavier F12 (devrait fonctionner sur la plupart des systèmes). Vous pouvez également cliquer avec le bouton droit de la souris n’importe où sur la page Web et sélectionner « Inspecter ». La fenêtre Inspecteur d’éléments devrait apparaître. 🖱️
Étape 2
Cliquez sur l’onglet « Réseau » puis sur « Média » pour filtrer tout sauf les fichiers vidéo. Recharger la page. Soit en cliquant sur le bouton d'actualisation du navigateur, soit en appuyant sur Ctrl+R. 🔄
Étape 3
Les fichiers vidéo doivent être chargés dans une liste. Vous ne pouvez pas faire un aperçu instantané, mais vous pouvez double-cliquer sur un fichier pour l'ouvrir dans un nouvel onglet. Là, vous pouvez faire un clic droit et le télécharger. 🎬
3 . Captures d'écran de la page entière
Si vous souhaitez enregistrer une page Web entière, vous pouvez la télécharger rapidement sous forme de fichier PDF ou HTML. Mais que faire si vous souhaitez prendre une capture d’écran régulière de la page entière ? Ici Je vais vous expliquer comment le faire. 📸
Firefox dispose d'un outil de capture d'écran dédié dans le menu contextuel, je vais donc vous montrer comment le faire dans Google Chrome et d'autres navigateurs. 🌐
Ouvrez l’outil d’inspection en cliquant avec le bouton droit n’importe où sur la page ou en appuyant sur F12.
Appuyez sur Ctrl+Maj+P pour ouvrir la fenêtre Exécuter. J'ai écrit Capture capture de écran pleine taille dans cette fenêtre. Cliquez dessus. 📄
Une fenêtre « Enregistrer sous » devrait apparaître instantanément, vous permettant d’enregistrer la capture d’écran de la page complète au format JPG. 💾
4 . Faites comme si vous étiez au téléphone
La plupart des sites Web se chargent différemment selon le type d'appareil et la taille de l'écran. Si vous souhaitez tromper le site en lui faisant croire que vous utilisez un autre appareil (pour une raison quelconque), vous pouvez facilement le faire avec l'outil d'inspection. 📱
Dans Chrome, ouvrez la fenêtre Inspecteur d’éléments à partir du menu contextuel ou avec F12. Cliquez ensuite sur la petite icône représentant un ordinateur portable et un téléphone dans le coin supérieur gauche. Firefox dispose d'un bouton similaire, appelé Mode Responsive Design (Ctrl+Maj+M). 🖥️
Vous aurez une liste d'appareils que vous pouvez émuler, et vous pouvez également ajuster manuellement la taille de l' écran. Une fois que vous avez choisi un appareil mobile, vous remarquerez que votre navigateur simule également les gestes tactiles. 📱✨
5 . Identifier les sources
Cette astuce est destinée aux créatifs, mais toute personne curieuse des polices sur un site Web peut utiliser cette astuce. Vous pouvez utiliser le outil d'inspection pour identifier et parfois même télécharger des polices. 🖋️
Tout d’abord, ouvrez l’outil Inspecteur d’éléments. Ensuite, cliquez sur l’onglet « Réseau » (il peut être masqué dans le menu déroulant) et sélectionnez « Source ».
Appuyez ensuite sur Ctrl+R. Les polices rendues seront chargées dans la liste, probablement au format WOFF. Vous pouvez les télécharger directement en double-cliquant sur le nom de la police. Par exemple, How-To Geek utilise Roboto comme police par défaut. 🔤
Si vous avez besoin d’informations plus détaillées sur la police, accédez à l’onglet « Éléments » et sélectionnez « Styles ». Faites défiler jusqu’à la propriété de la famille de polices et cliquez dessus. Le texte correspondant sera enluminé sur le site. De cette façon, vous pouvez identifier une source avec précision. 🎨
6 . Modifier le texte sur une page (temporairement)
Saviez-vous que vous pouvez modifier temporairement presque tout sur une page Web à l’aide de l’inspecteur ? Cet outil vous permet de modifier le code qui compose le site Web, donc si vous connaissez un peu de code, vous pouvez faire en sorte que la page ressemble à ce que vous voulez (uniquement sur votre machine, jusqu'à ce que vous rechargez la page). 🛠️
Même si vous ne connaissez aucun codage, vous pouvez modifier du texte de base sur n'importe quelle page Web. Cela peut être une petite farce amusante à faire à vos amis. 😉
Mettez en surbrillance le texte de la page que vous souhaitez modifier et faites un clic droit dessus. Sélectionnez ensuite « Inspecter » ou « Inspecter l’élément ».
L’extrait de texte pertinent doit apparaître dans l’onglet Éléments. Double-cliquez simplement et remplacez le texte par ce que vous voulez. ✏️
Fermez l’inspecteur d’éléments et vous avez terminé ! Veuillez noter que si vous rechargez la page, vos modifications seront annulées. 🔄
7 . Supprimer des éléments
Tout comme pour l’édition de texte, vous pouvez également supprimer des éléments spécifiques d’une page Web. Encore une fois, les modifications ne dureront que jusqu'à ce que vous rechargez la page. ❌
Faites un clic droit sur l’élément que vous souhaitez supprimer, puis sélectionnez « Inspecter » ou « Inspecter l’élément ».
Passez la souris sur les étiquettes «
" jusqu'à ce que l'élément entier soit mis en surbrillance. Appuyez ensuite simplement sur la touche Supprimer. 🔚
Comme ça, c'est parti ! 🕵️♂️
8 . Identifier les valeurs des couleurs
Un autre conseil pour les créatifs : vous pouvez obtenir des valeurs RVB et HEX à partir de n'importe quel couleur sur une page Web avec l'outil pipette que vous trouverez dans l'inspecteur d'éléments. 🎨
Cliquez avec le bouton droit n’importe où sur la page et ouvrez l’inspecteur. Par défaut, la fenêtre Règles s'ouvre dans l'onglet Inspecteur. Faites défiler vers le bas pour trouver toutes les propriétés étiquetées couleur.
La propriété de couleur doit avoir un cercle ou un carré coloré à côté d'elle. Cliquez dessus pour ouvrir le sélecteur de couleurs et appuyez sur l’icône en forme de pipette à côté. 🖌️
Vous pouvez faire glisser cette pipette n'importe où sur la page pour trouver les valeurs de couleur. En cliquant sur la pipette, la propriété sera automatiquement renseignée avec la valeur de couleur que vous venez de sélectionner. Vous pouvez facilement le copier à partir d'ici. 📋
Ces les conseils effleurent à peine la surface que ce qui est réellement possible en utilisant l'inspecteur d'éléments. Si vous souhaitez approfondir le développement Web, voici un guide pour vous aider à démarrer. 💻
