{"id":33467,"date":"2025-03-07T20:23:26","date_gmt":"2025-03-07T23:23:26","guid":{"rendered":"https:\/\/mastertrend.info\/?p=33467"},"modified":"2025-12-16T00:20:05","modified_gmt":"2025-12-16T03:20:05","slug":"astuces-avec-linspecteur-delements","status":"publish","type":"post","link":"https:\/\/mastertrend.info\/fr\/trucos-con-el-inspector-de-elementos\/","title":{"rendered":"Astuces avec l'inspecteur d'\u00e9l\u00e9ments\u00a0: Transformez votre site web d\u00e8s maintenant\u00a0! \u26a1\ufe0f"},"content":{"rendered":"

Astuces de l'inspecteur d'\u00e9l\u00e9ments\u00a0: 8\u00a0hacks \u00e0 conna\u00eetre absolument\u00a0! \ud83d\udee0\ufe0f<\/h2>\n

L'inspecteur d'\u00e9l\u00e9ments dans votre navigateur peut sembler \u00eatre un outil r\u00e9serv\u00e9 aux d\u00e9veloppeurs, mais vous pouvez en fait faire des choses plut\u00f4t sympas avec lui m\u00eame si vous ne savez rien de la programmation\u00a0! \ud83d\ude80<\/p>\n

<\/p>\n

1 . <\/span>T\u00e9l\u00e9charger les images<\/h2>\n

Peut-\u00eatre avez-vous besoin de t\u00e9l\u00e9charger une image \u00e0 partir d\u2019un site Web. Vous essayez de faire un clic droit et d\u2019appuyer sur \u00ab\u00a0Enregistrer l\u2019image\u00a0\u00bb, et vous constatez que l\u2019option est gris\u00e9e ou que le bouton \u00ab\u00a0Enregistrer l\u2019image\u00a0\u00bb n\u2019appara\u00eet pas. D'autres fois, vous ne pourrez t\u00e9l\u00e9charger qu'une miniature de l'image, et non le fichier entier. \ud83e\udd14 Quoi de neuf ?<\/p>\n

Les d\u00e9veloppeurs d\u00e9sactivent souvent intentionnellement ce bouton \u00ab\u00a0Enregistrer l\u2019image\u00a0\u00bb ou utilisent un framework Web qui ne permet pas de t\u00e9l\u00e9charger des images de cette fa\u00e7on. Mais il existe une solution pratique dans l\u2019inspecteur d\u2019\u00e9l\u00e9ments. Vous pouvez obtenir n\u2019importe quelle ressource d\u2019image \u00e0 partir d\u2019un site Web, en taille r\u00e9elle, en trois \u00e9tapes simples. \ud83d\udcf8<\/p>\n

Parfois, ces images sont bloqu\u00e9 pour des raisons de licence<\/a> et le droit d'auteur, alors soyez prudent avec cela et tenez-vous-en \u00e0 une utilisation \u00e9quitable pour \u00e9viter les probl\u00e8mes juridiques. \u2696\ufe0f<\/section>\n

\u00c9tape 1<\/h3>\n

Fait clic droit sur<\/a> n\u2019importe o\u00f9 sur la page et s\u00e9lectionnez \u00ab Inspecter l\u2019\u00e9l\u00e9ment \u00bb ou \u00ab Inspecter \u00bb. Vous pouvez \u00e9galement utiliser le raccourci clavier sp\u00e9cifique \u00e0 l'inspecteur dans votre navigateur. F12 fonctionne dans la plupart des navigateurs<\/a> et les syst\u00e8mes d'exploitation. J'utilise Firefox pour cette d\u00e9mo, mais les \u00e9tapes sont identiques. \ud83d\uddb1\ufe0f<\/p>\n

\u00c9tape 2<\/h3>\n

Dans la fen\u00eatre de l\u2019inspecteur d\u2019\u00e9l\u00e9ments, cliquez sur l\u2019onglet \u00ab R\u00e9seau \u00bb. L\u2019onglet r\u00e9seau devrait avoir \u00ab Images \u00bb comme l\u2019un de ses sous-menus. Cliquez sur \u00ab Images \u00bb. \ud83d\uddbc\ufe0f<\/p>\n

Rechargez maintenant la page afin que toutes les ressources d\u2019image apparaissent dans l\u2019onglet \u00ab Images \u00bb. Utilisez le Bouton Actualiser \u00e0 c\u00f4t\u00e9 de la barre d'adresse<\/a> depuis votre navigateur ou appuyez sur Ctrl+R. \ud83d\udd04<\/p>\n

\"Enregistrer<\/figure>\n

\u00c9tape 3<\/h3>\n

Et voil\u00e0. L'int\u00e9gralit\u00e9 de la biblioth\u00e8que d'images doit \u00eatre charg\u00e9e dans la liste. La liste est mise \u00e0 jour de mani\u00e8re dynamique, de sorte qu'\u00e0 mesure que davantage d'images sont t\u00e9l\u00e9charg\u00e9es sur le site Web, elles appara\u00eetront \u00e9galement ici. \ud83d\uddbc\ufe0f\u2728<\/p>\n

Vous pouvez survoler un fichier pour voir son aper\u00e7u et ses dimensions. Double-cliquez pour ouvrir le fichier dans un nouvel onglet, o\u00f9 vous pourrez l'enregistrer en utilisant le menu contextuel. \ud83d\udcbe<\/p>\n

\"Enregistrement<\/figure>\n

2 . <\/span>T\u00e9l\u00e9charger des vid\u00e9os<\/h2>\n

Tout comme les ressources d'image, les sites Web ne le permettent parfois pas d\u00e9charge<\/a> vid\u00e9os directement. Mais vous pouvez les t\u00e9l\u00e9charger en les chargeant dans l'inspecteur d'\u00e9l\u00e9ments. Une fois charg\u00e9s dans l'inspecteur, double-cliquez simplement sur le nom du fichier pour l'ouvrir dans un nouvel onglet. \ud83c\udfa5<\/p>\n

\u00c9tape 1<\/h3>\n

Ouvrez la fen\u00eatre Inspecteur d\u2019\u00e9l\u00e9ments en appuyant sur le raccourci clavier F12 (devrait fonctionner sur la plupart des syst\u00e8mes). Vous pouvez \u00e9galement cliquer avec le bouton droit de la souris n\u2019importe o\u00f9 sur la page Web et s\u00e9lectionner \u00ab Inspecter \u00bb. La fen\u00eatre Inspecteur d\u2019\u00e9l\u00e9ments devrait appara\u00eetre. \ud83d\uddb1\ufe0f<\/p>\n

\u00c9tape 2<\/h3>\n

Cliquez sur l\u2019onglet \u00ab R\u00e9seau \u00bb puis sur \u00ab M\u00e9dia \u00bb pour filtrer tout sauf les fichiers vid\u00e9o. Recharger la page. Soit en cliquant sur le bouton d'actualisation du navigateur, soit en appuyant sur Ctrl+R. \ud83d\udd04<\/p>\n

\"Chargement<\/figure>\n

\u00c9tape 3<\/h3>\n

Les fichiers vid\u00e9o doivent \u00eatre charg\u00e9s dans une liste. Vous ne pouvez pas faire un aper\u00e7u instantan\u00e9, mais vous pouvez double-cliquer sur un fichier pour l'ouvrir dans un nouvel onglet. L\u00e0, vous pouvez faire un clic droit et le t\u00e9l\u00e9charger. \ud83c\udfac<\/p>\n

\"Enregistrement<\/figure>\n

3 . <\/span>Captures d'\u00e9cran de la page enti\u00e8re<\/h2>\n

Si vous souhaitez enregistrer une page Web enti\u00e8re, vous pouvez la t\u00e9l\u00e9charger rapidement sous forme de fichier PDF ou HTML. Mais que faire si vous souhaitez prendre une capture d\u2019\u00e9cran r\u00e9guli\u00e8re de la page enti\u00e8re ? Ici Je vais vous expliquer comment le faire<\/a>. \ud83d\udcf8<\/p>\n

Firefox dispose d'un outil de capture d'\u00e9cran d\u00e9di\u00e9 dans le menu contextuel, je vais donc vous montrer comment le faire dans Google Chrome<\/a> et d'autres navigateurs. \ud83c\udf10<\/p>\n

Ouvrez l\u2019outil d\u2019inspection en cliquant avec le bouton droit n\u2019importe o\u00f9 sur la page ou en appuyant sur F12.<\/p>\n

\"Prendre<\/figure>\n

Appuyez sur Ctrl+Maj+P pour ouvrir la fen\u00eatre Ex\u00e9cuter. J'ai \u00e9crit Capture capture de \u00e9cran pleine taille<\/a> <\/strong>dans cette fen\u00eatre. Cliquez dessus. \ud83d\udcc4<\/p>\n

Une fen\u00eatre \u00ab\u00a0Enregistrer sous\u00a0\u00bb devrait appara\u00eetre instantan\u00e9ment, vous permettant d\u2019enregistrer la capture d\u2019\u00e9cran de la page compl\u00e8te au format JPG. \ud83d\udcbe<\/p>\n

\"Enregistrement<\/figure>\n

4 . <\/span>Faites comme si vous \u00e9tiez au t\u00e9l\u00e9phone<\/h2>\n

La plupart des sites Web se chargent diff\u00e9remment selon le type d'appareil et la taille de l'\u00e9cran. 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. \ud83d\udcf1<\/p>\n

Dans Chrome, ouvrez la fen\u00eatre Inspecteur d\u2019\u00e9l\u00e9ments \u00e0 partir du menu contextuel ou avec F12. Cliquez ensuite sur la petite ic\u00f4ne repr\u00e9sentant un ordinateur portable et un t\u00e9l\u00e9phone dans le coin sup\u00e9rieur gauche. Firefox dispose d'un bouton similaire, appel\u00e9 Mode Responsive Design (Ctrl+Maj+M). \ud83d\udda5\ufe0f<\/p>\n

\"Modification<\/figure>\n

Vous aurez une liste d'appareils que vous pouvez \u00e9muler, et vous pouvez \u00e9galement ajuster manuellement la taille de l' \u00e9cran<\/a>. Une fois que vous avez choisi un appareil mobile, vous remarquerez que votre navigateur simule \u00e9galement les gestes tactiles. \ud83d\udcf1\u2728<\/p>\n

5 . <\/span>Identifier les sources<\/h2>\n

Cette astuce est destin\u00e9e aux cr\u00e9atifs, mais toute personne curieuse des polices sur un site Web peut utiliser cette astuce. Vous pouvez utiliser le outil d'inspection pour identifier<\/a> et parfois m\u00eame t\u00e9l\u00e9charger des polices. \ud83d\udd8b\ufe0f<\/p>\n

Tout d\u2019abord, ouvrez l\u2019outil Inspecteur d\u2019\u00e9l\u00e9ments. Ensuite, cliquez sur l\u2019onglet \u00ab R\u00e9seau \u00bb (il peut \u00eatre masqu\u00e9 dans le menu d\u00e9roulant) et s\u00e9lectionnez \u00ab Source \u00bb.<\/p>\n

\"Identifier<\/figure>\n

Appuyez ensuite sur Ctrl+R. Les polices rendues seront charg\u00e9es dans la liste, probablement au format WOFF. Vous pouvez les t\u00e9l\u00e9charger directement en double-cliquant sur le nom de la police. Par exemple, How-To Geek utilise Roboto comme police par d\u00e9faut. \ud83d\udd24<\/p>\n

Si vous avez besoin d\u2019informations plus d\u00e9taill\u00e9es sur la police, acc\u00e9dez \u00e0 l\u2019onglet \u00ab \u00c9l\u00e9ments \u00bb et s\u00e9lectionnez \u00ab Styles \u00bb. Faites d\u00e9filer jusqu\u2019\u00e0 la propri\u00e9t\u00e9 de la famille de polices et cliquez dessus. Le texte correspondant sera enlumin\u00e9 sur le site. De cette fa\u00e7on, vous pouvez identifier une source avec pr\u00e9cision. \ud83c\udfa8<\/p>\n

\"Informations<\/figure>\n

6 . <\/span>Modifier le texte sur une page (temporairement)<\/h2>\n

Saviez-vous que vous pouvez modifier temporairement presque tout sur une page Web \u00e0 l\u2019aide de l\u2019inspecteur ? 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 \u00e0 ce que vous voulez (uniquement sur votre machine, jusqu'\u00e0 ce que vous rechargez la page). \ud83d\udee0\ufe0f<\/p>\n

M\u00eame si vous ne connaissez aucun codage, vous pouvez modifier du texte de base sur n'importe quelle page Web. Cela peut \u00eatre une petite farce amusante \u00e0 faire \u00e0 vos amis. \ud83d\ude09<\/p>\n

Mettez en surbrillance le texte de la page que vous souhaitez modifier et faites un clic droit dessus. S\u00e9lectionnez ensuite \u00ab Inspecter \u00bb ou \u00ab Inspecter l\u2019\u00e9l\u00e9ment \u00bb.<\/p>\n

L\u2019extrait de texte pertinent doit appara\u00eetre dans l\u2019onglet \u00c9l\u00e9ments. Double-cliquez simplement et remplacez le texte par ce que vous voulez. \u270f\ufe0f<\/p>\n

Fermez l\u2019inspecteur d\u2019\u00e9l\u00e9ments et vous avez termin\u00e9\u00a0! Veuillez noter que si vous rechargez la page, vos modifications seront annul\u00e9es. \ud83d\udd04<\/p>\n

7 . <\/span>Supprimer des \u00e9l\u00e9ments<\/h2>\n

Tout comme pour l\u2019\u00e9dition de texte, vous pouvez \u00e9galement supprimer des \u00e9l\u00e9ments sp\u00e9cifiques d\u2019une page Web. Encore une fois, les modifications ne dureront que jusqu'\u00e0 ce que vous rechargez la page. \u274c<\/p>\n

Faites un clic droit sur l\u2019\u00e9l\u00e9ment que vous souhaitez supprimer, puis s\u00e9lectionnez \u00ab Inspecter \u00bb ou \u00ab Inspecter l\u2019\u00e9l\u00e9ment \u00bb.<\/p>\n

Passez la souris sur les \u00e9tiquettes \u00ab<\/p>\n

\n

\u201d hasta que se resalte la totalidad del elemento. Luego simplemente presion\u00e1 la tecla Suprimir<\/a>. \ud83d\udd1a<\/p>\n

\"Suppression<\/figure>\n

Comme \u00e7a, c'est parti ! \ud83d\udd75\ufe0f\u200d\u2642\ufe0f<\/p>\n

8 . <\/span>Identifier les valeurs des couleurs<\/h2>\n

Un autre conseil pour les cr\u00e9atifs : vous pouvez obtenir des valeurs RVB et HEX \u00e0 partir de n'importe quel couleur sur une page Web<\/a> avec l'outil pipette que vous trouverez dans l'inspecteur d'\u00e9l\u00e9ments. \ud83c\udfa8<\/p>\n

Cliquez avec le bouton droit n\u2019importe o\u00f9 sur la page et ouvrez l\u2019inspecteur. Par d\u00e9faut, la fen\u00eatre R\u00e8gles s'ouvre dans l'onglet Inspecteur. Faites d\u00e9filer vers le bas pour trouver toutes les propri\u00e9t\u00e9s \u00e9tiquet\u00e9es couleur.<\/p>\n

La propri\u00e9t\u00e9 de couleur doit avoir un cercle ou un carr\u00e9 color\u00e9 \u00e0 c\u00f4t\u00e9 d'elle. Cliquez dessus pour ouvrir le s\u00e9lecteur de couleurs et appuyez sur l\u2019ic\u00f4ne en forme de pipette \u00e0 c\u00f4t\u00e9. \ud83d\udd8c\ufe0f<\/p>\n

\"Utilisation<\/figure>\n

Vous pouvez faire glisser cette pipette n'importe o\u00f9 sur la page pour trouver les valeurs de couleur. En cliquant sur la pipette, la propri\u00e9t\u00e9 sera automatiquement renseign\u00e9e avec la valeur de couleur que vous venez de s\u00e9lectionner. Vous pouvez facilement le copier \u00e0 partir d'ici. \ud83d\udccb<\/p>\n

\"Utilisation<\/figure>\n
\n

Ces les conseils effleurent \u00e0 peine la surface<\/a> que ce qui est r\u00e9ellement possible en utilisant l'inspecteur d'\u00e9l\u00e9ments. Si vous souhaitez approfondir le d\u00e9veloppement Web, voici un guide pour vous aider \u00e0 d\u00e9marrer. \ud83d\udcbb<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Astuces d'Element Inspector : d\u00e9couvrez 8 techniques surprenantes pour personnaliser et am\u00e9liorer facilement votre exp\u00e9rience en ligne \ud83d\udcbb\u2728<\/p>","protected":false},"author":1,"featured_media":89558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ai_generated_summary":"","iawp_total_views":65,"jnews-multi-image_gallery":[],"jnews_single_post":{"format":"standard","override":[{"template":"1","parallax":"1","fullscreen":"1","layout":"right-sidebar","sidebar":"default-sidebar","second_sidebar":"default-sidebar","sticky_sidebar":"1","share_position":"top","share_float_style":"share-monocrhome","show_share_counter":"1","show_view_counter":"1","show_featured":"1","show_post_meta":"1","show_post_author":"1","show_post_author_image":"1","show_post_date":"1","post_date_format":"default","post_date_format_custom":"Y\/m\/d","show_post_category":"1","show_post_reading_time":"1","post_reading_time_wpm":"300","post_calculate_word_method":"str_word_count","zoom_button_out_step":"2","zoom_button_in_step":"3","show_post_tag":"1","show_prev_next_post":"1","show_popup_post":"1","show_comment_section":"1","number_popup_post":"1","show_author_box":"1","show_post_related":"1","show_inline_post_related":"0"}],"image_override":[{"single_post_thumbnail_size":"crop-500","single_post_gallery_size":"crop-500"}],"trending_post_position":"meta","trending_post_label":"Trending","sponsored_post_label":"Sponsored by","disable_ad":"0","subtitle":""},"jnews_primary_category":[],"jnews_social_meta":[],"jnews_review":[],"enable_review":"","type":"percentage","name":"","summary":"","brand":"","sku":"","good":[],"bad":[],"score_override":"","override_value":"","rating":[],"price":[],"jnews_override_counter":{"view_counter_number":"0","share_counter_number":"0","like_counter_number":"0","dislike_counter_number":"0"},"footnotes":""},"categories":[1435],"tags":[1582,1445,1558],"class_list":["post-33467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-browsertips","tag-evergreencontent","tag-techtips"],"_links":{"self":[{"href":"https:\/\/mastertrend.info\/fr\/wp-json\/wp\/v2\/posts\/33467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mastertrend.info\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mastertrend.info\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/fr\/wp-json\/wp\/v2\/comments?post=33467"}],"version-history":[{"count":6,"href":"https:\/\/mastertrend.info\/fr\/wp-json\/wp\/v2\/posts\/33467\/revisions"}],"predecessor-version":[{"id":104702,"href":"https:\/\/mastertrend.info\/fr\/wp-json\/wp\/v2\/posts\/33467\/revisions\/104702"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/fr\/wp-json\/wp\/v2\/media\/89558"}],"wp:attachment":[{"href":"https:\/\/mastertrend.info\/fr\/wp-json\/wp\/v2\/media?parent=33467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mastertrend.info\/fr\/wp-json\/wp\/v2\/categories?post=33467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mastertrend.info\/fr\/wp-json\/wp\/v2\/tags?post=33467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}