8 astuces intéressantes que vous pouvez faire avec l'inspecteur d'éléments de votre navigateur
L'Element Inspector de votre navigateur semble être un outil destiné uniquement aux développeurs, mais vous pouvez faire des choses intéressantes avec même si vous ne connaissez aucune programmation.
Sommaire
1
Télécharger des images
Vous devrez peut-être récupérer une image sur un site Web. Vous essayez de faire un clic droit dessus et d'appuyer sur « Enregistrer l'image », pour constater que le clic droit est désactivé ou que le bouton « Enregistrer l'image » n'est pas disponible. D'autres fois, vous constaterez peut-être que vous ne pouvez télécharger qu'un petit aperçu miniature de l'image, et non le fichier en taille réelle. Qu'est-ce qui donne ?
Les développeurs désactivent volontairement ce bouton « Enregistrer l'image » ou utilisent un framework Web qui ne prend pas en charge de telles images. Il existe une solution de contournement intéressante pour cela dans l'inspecteur d'éléments. Vous pouvez réellement récupérer n’importe quelle image d’un site Web, en taille réelle, en trois étapes simples.
Parfois, ces images sont verrouillées pour des raisons de licence et de droits d'auteur, alors soyez-en conscient et respectez une utilisation équitable pour éviter tout problème juridique.
Étape 1
Faites un clic droit n'importe où sur la page et cliquez sur « Inspecter l'élément » ou « Inspecter ». Vous pouvez également rechercher et utiliser le raccourci clavier spécifique à l'inspecteur dans votre navigateur. F12 fonctionne pour la plupart des navigateurs et systèmes d'exploitation. J'utilise Firefox pour cette démonstration, mais les étapes sont identiques.
Étape 2
Dans la fenêtre d'inspection de l'élément, cliquez sur l'onglet « Réseau ». L'onglet Réseau doit avoir « Images » comme l'un de ses sous-menus. Cliquez sur « Images ».
Rechargez maintenant la page pour que tous les éléments d'image apparaissent dans l'onglet « Images ». Utilisez le bouton d'actualisation à côté de la barre d'adresse de 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 dynamiquement, de sorte qu'à mesure que davantage d'images se chargent sur la page Web, elles s'affichent également ici.
Vous pouvez survoler un fichier pour voir son aperçu et ses dimensions. Double-cliquez dessus pour ouvrir le fichier dans le nouvel onglet, où vous pouvez l'enregistrer avec le menu contextuel.
2
Télécharger des vidéos
Tout comme les ressources image, il arrive parfois que les sites Web ne vous permettent pas de télécharger directement des vidéos. Mais vous pouvez les télécharger en les chargeant dans l'inspecteur d'éléments. Une fois chargés dans l'inspecteur, vous pouvez simplement double-cliquer sur un nom de fichier pour l'ouvrir dans un nouvel onglet.
Étape 1
Ouvrez la fenêtre d'inspection de l'élément en appuyant sur le raccourci clavier F12 (cela devrait fonctionner pour la plupart des systèmes). Alternativement, vous pouvez cliquer avec le bouton droit n'importe où sur la page Web et sélectionner « Inspecter ». La fenêtre de l'inspecteur d'éléments devrait apparaître.
Étape 2
Cliquez sur l'onglet « Réseau », puis cliquez sur « Médias » pour filtrer tout sauf les fichiers vidéo. Rechargez la page. Cliquez sur le bouton d'actualisation du navigateur ou appuyez sur Ctrl+R.
Étape 3
Les fichiers vidéo doivent être chargés dans une liste. Vous ne pouvez pas les prévisualiser instantanément, mais vous pouvez double-cliquer sur un fichier pour l'ouvrir dans un nouvel onglet. Ici, vous pouvez simplement cliquer avec le bouton droit et le télécharger.
3
Capturer des captures d'écran pleine page
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 se passe-t-il si vous souhaitez prendre un instantané d’image régulier de la page entière ? Voici comment.
Firefox dispose d'un outil de capture d'écran dédié dans le menu contextuel habituel, je vais donc vous montrer comment procéder dans Google Chrome et d'autres navigateurs.
Ouvrez l'outil inspecteur en cliquant avec le bouton droit n'importe où sur la page ou en appuyant sur F12.
Appuyez sur Ctrl+Shift+P pour ouvrir la fenêtre Exécuter. Taper Capturer une capture d'écran en taille réelle dans cette fenêtre. Cliquez dessus.
Une fenêtre « Enregistrer sous » devrait apparaître instantanément et vous permettra d'enregistrer la capture d'écran pleine page au format JPG.
4
Imaginez que vous êtes au téléphone
La plupart des sites Web se chargent différemment en fonction du type d'appareil et de la taille de l'écran. Si vous souhaitez faire croire au site Web que vous êtes sur un autre appareil (pour une raison quelconque), vous pouvez facilement le faire avec l'outil d'inspection.
Dans Chrome, ouvrez la fenêtre Inspecter l'élément à partir du menu contextuel du clic droit ou avec F12. Cliquez ensuite sur la petite icône d'ordinateur portable et de téléphone dans le coin supérieur gauche. Firefox dispose d'un bouton similaire, appelé Responsive Design Mode (Ctrl+Shift+M).
Vous obtiendrez une liste des appareils que vous pouvez émuler et vous pourrez é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 polices
Celui-ci est destiné aux créatifs, mais toute personne curieuse de connaître les polices d'un site Web peut utiliser cette astuce. Vous pouvez utiliser l'outil d'inspection pour identifier et parfois même télécharger des polices.
Ouvrez d’abord l’outil d’inspection des éléments. Ensuite, cliquez sur l'onglet « Réseau » (il peut être masqué dans le menu à débordement) et sélectionnez « Police ».
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 s'allumera sur la page Web. De cette façon, vous pouvez identifier exactement une police.
6
Modifier le texte sur une page (temporairement)
Saviez-vous que vous pouvez modifier temporairement à peu près n'importe quoi sur une page Web à l'aide de l'inspecteur ? Cet outil nous permet de modifier le code qui compose le site Web, donc si vous connaissez le code, vous pouvez donner au site Web l'apparence de n'importe quoi (juste sur votre ordinateur, jusqu'à ce que vous actualisiez la page).
Même si vous ne connaissez rien au codage, vous pouvez modifier le 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 cliquez dessus avec le bouton droit. Cliquez ensuite sur « Inspecter » ou « Inspecter l'élément ».
Le morceau de texte pertinent devrait apparaître dans l'onglet Éléments. Double-cliquez simplement dessus et remplacez le texte par ce que vous voulez.
Fermez l'inspecteur d'éléments et vous avez terminé ! N'oubliez pas que l'actualisation de la page annulera vos modifications.
7
Supprimer des éléments
Tout comme pour la modification de texte, vous pouvez également supprimer des éléments spécifiques d'une page Web. Encore une fois, les modifications ne durent que jusqu'à ce que vous actualisiez la page.
Faites un clic droit sur l'élément que vous souhaitez supprimer, puis cliquez sur « Inspecter » ou « Inspecter l'élément ».
Passez la souris sur le «
Juste comme ça, c'est parti.
8
Identifier les valeurs de couleur
Autre conseil pour les créatifs : vous pouvez extraire les valeurs RVB et HEX de n'importe quelle couleur d'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 n’importe quelle propriété étiquetée couleur.
La propriété color doit être accompagnée d'un cercle ou d'un carré coloré. Cliquez dessus pour ouvrir le sélecteur de couleurs et appuyez sur l'icône en forme de pipette à côté.
Vous pouvez passer cette pipette n’importe où sur la page pour rechercher les valeurs de couleur. Cliquer sur la pipette remplit automatiquement la propriété avec la valeur de couleur que vous venez de choisir. De là, vous pouvez le copier facilement.
Ces conseils ne font qu'effleurer la surface de ce qui est réellement possible avec l'inspecteur d'éléments. Si vous souhaitez vous lancer davantage dans le développement Web, voici un guide pour vous aider à démarrer.
