RUNWEBTOOLS
Français

Inspecteur de page

Analysez n’importe quelle page web en direct — ses polices, couleurs, images et SVG. Fonctionne comme bookmarklet sur tout site.

Démo en direct — ceci a analysé cette page. Installez le bookmarklet ci-dessous pour inspecter n'importe quel site web.

Analyse de cette page…

Utiliser sur n'importe quelle page (bookmarklet)

Envie d'utiliser Inspecteur de page sans quitter la page où vous êtes ? Glissez le bouton ci-dessous dans votre barre de favoris, puis cliquez dessus sur n'importe quel site : Inspecteur de page s'ouvre directement sur place — tout s'exécute dans votre navigateur.

Inspecteur de page← glissez ce bouton dans votre barre de favoris

À utiliser de façon responsable : Un bookmarklet s'exécute sur la page où vous cliquez dessus. Évitez les sites sensibles comme la banque en ligne, les paiements ou la santé — vous l'utilisez à vos risques. Tout est traité localement et aucune donnée n'est envoyée. Voir nos Conditions.

  1. Affichez la barre de favoris si elle est masquée — Ctrl+Shift+B (+Shift+B sur Mac).
  2. Glissez le bouton ci-dessus sur la barre de favoris.
  3. Ouvrez n'importe quel site et cliquez sur le favori — le panneau Inspecteur de page apparaît en haut à droite. Utilisez ✛ pour changer de coin, et ›/‹ pour le replier contre le bord puis le ressortir.
  4. Cliquez à nouveau sur le favori (ou sur ✕) pour le fermer.
Impossible de glisser ? Copiez-le et créez un nouveau favori avec ceci comme URL :

Remarque : quelques sites aux politiques de sécurité strictes peuvent bloquer les bookmarklets.

Exemples

Identifier les polices d'un site

Entrée

Cliquez sur le bookmarklet sur une page → onglet Polices

Sortie

Inter — 400/600/700 · 142×
Roboto Mono — 400 · 18×

Extraire la palette de couleurs

Entrée

Onglet Couleurs

Sortie

#111827 · 308   #2563EB · 47   #F9FAFB · 22  (cliquer pour copier le hex)

Lister les images avec format et taille

Entrée

Onglet Images

Sortie

logo.svg — SVG
hero.webp — WEBP · 1600×900

À propos de cet outil

L'Inspecteur de page est un analyseur de pages web gratuit qui révèle comment n'importe quel site en direct est construit : les polices qu'il rend, sa palette de couleurs, chaque image et SVG en ligne, ses liens et un aperçu technique rapide. Il s'exécute entièrement dans votre navigateur sans envoi, c'est donc un moyen rapide et privé de trouver les polices d'un site, d'extraire des couleurs, d'auditer des images ou de récupérer une icône SVG — que vous soyez un designer faisant de la rétro-ingénierie d'une mise en page, un développeur en débogage ou simplement curieux.

Mode d'emploi

  1. Essayez la démo en direct ci-dessus — elle analyse cette page même dans les onglets Aperçu, Polices, Couleurs, Images, SVG et Liens.
  2. Pour inspecter tout autre site, glissez le bouton Inspecteur de page ci-dessous dans votre barre de favoris.
  3. Ouvrez n'importe quel site web et cliquez sur le favori — un panneau s'ouvre par-dessus.
  4. Changez d'onglet pour lire ses polices, copier des couleurs hex, ouvrir des images ou copier le balisage SVG en ligne.

Ce qu'il inspecte

  1. Polices — les familles de polices réellement rendues, avec graisses et italiques, classées par usage.
  2. Couleurs — couleurs de texte, de fond et de bordure en hex, classées par fréquence pour que les couleurs de marque apparaissent en premier.
  3. Images — chaque <img> plus les images de fond CSS, avec format et dimensions naturelles.
  4. SVG — icônes SVG en ligne avec aperçu et copie du balisage en un clic.
  5. Liens — tous les liens répartis en internes et externes.
  6. Aperçu — titre, méta description, canonical, nombre de nœuds DOM, nombre de scripts/feuilles de style et taille HTML approximative.

Comme il lit la page rendue, il signale les polices et couleurs que les utilisateurs voient réellement, pas seulement ce qui est déclaré dans une feuille de style. Pour construire les balises SEO qu'il fait remonter, associez-le au Générateur de balises meta.

Utilisation responsable

L'Inspecteur de page est un outil de développement et d'apprentissage pour analyser la structure, les styles et les médias d'une page — les mêmes informations que les outils de développement intégrés de votre navigateur exposent déjà. Il ne copie, ne stocke ni ne redistribue de contenu : les images et vidéos s'ouvrent dans un nouvel onglet, et le code SVG est affiché pour inspection uniquement. Toutes les images, vidéos et SVG que vous consultez restent la propriété de leurs propriétaires d'origine (le site web et ses auteurs). Vous êtes seul responsable de l'usage que vous faites de ce qu'il montre ; ne réutilisez pas d'actifs protégés par le droit d'auteur sans permission. Voir nos Conditions d'utilisation.

Questions fréquentes

Qu'affiche l'Inspecteur de page ?

Il analyse une page web en direct et liste ses polices (avec les graisses), les couleurs utilisées pour le texte, les fonds et les bordures, chaque image (avec format et dimensions), les SVG en ligne, les liens (internes vs externes) et un aperçu rapide — titre, description, nombre de nœuds DOM, taille HTML et plus.

Comment inspecter un autre site web, pas seulement celui-ci ?

Glissez le bouton Inspecteur de page dans votre barre de favoris, ouvrez n'importe quel site web, puis cliquez sur le favori. Un panneau s'ouvre par-dessus cette page en montrant ses polices, couleurs, images, SVG et liens. La démo de cette page exécute exactement la même analyse sur la page que vous lisez actuellement.

Dois-je installer une extension ?

Non. C'est un bookmarklet — un favori normal dont l'adresse est un petit morceau de JavaScript. Il n'y a rien à installer ni de permissions à accorder ; il ne s'exécute que quand vous cliquez, et seulement sur l'onglet que vous consultez.

Trouve-t-il les polices qu'un site web utilise ?

Oui. Il lit la font-family calculée de chaque élément de texte, il signale donc les polices réellement rendues à l'écran (pas seulement celles déclarées en CSS), avec les graisses et si des italiques sont utilisées. Une façon rapide d'identifier la typographie de n'importe quel site.

Peut-il extraire la palette de couleurs d'une page ?

Oui. Il collecte les couleurs de texte, de fond et de bordure de chaque élément, les convertit en hex et les classe par fréquence d'apparition, pour que les couleurs de marque dominantes remontent. Cliquez sur n'importe quel échantillon pour copier son code hex.

Mes données sont-elles envoyées quelque part ?

Non. Tout s'exécute localement dans votre navigateur — l'inspecteur ne lit que la page où vous êtes et n'envoie jamais rien à un serveur. Pas d'inscription et entièrement gratuit.

Pourquoi certaines images ou couleurs manquent-elles ?

L'inspecteur lit le DOM rendu, donc les images chargées en différé sous la ligne de flottaison, le contenu dans des iframes d'origine croisée ou les styles appliqués après un clic peuvent ne pas apparaître avant d'être sur la page. Relancez le scan après avoir défilé ou interagi pour les capter.