Les Outils ultimes pour le Webdesign et le Débogage pour les Développeurs

64+ outils puissants pour inspecter, mesurer, capturer, analyser et concevoir des pages web directement dans votre navigateur.

Tous Favoris Inspecter Capturer Mesurer index.popup_tab_analyse
CSS Inspector
Inspecteur d'animations
Copier en Tailwind
Mode contour uniquement
Assistant Tailwind
Plan de page
Détecteur de composants
Déplacer un élément
Supprimer/masquer élément
Exporter élément
Copier compo..
Capture d'écran
Extraire images
SVG Grabber
Remplaceur d'image
Générateur QR
Comment démarrer

Commencez à utiliser DevSuite Pro en quelques clics

Démarrer est simple. Installez l'extension, ouvrez n'importe quelle page web et accédez à plus de 64+ outils de développement depuis le popup ou le dock flottant. Aucune configuration nécessaire.

Ajouter l'extension à Chrome

  1. Ouvrez le Chrome Web Store et recherchez l'extension "DevSuite Pro".
  2. Cliquez sur "Ajouter à Chrome" puis confirmez en cliquant sur "Ajouter l'extension" dans la fenêtre contextuelle.

Ouvrez n'importe quelle page web et lancez un outil

  1. Accédez à n'importe quel site web, puis cliquez sur l'icône DevSuite Pro dans la barre d'outils ou utilisez le dock flottant sur la page.
  2. Sélectionnez n'importe quel outil dans la grille. Des outils comme CSS Inspector, Rulers ou Color Picker s'activent instantanément sur la page en cours.
Fonctionnalités de l'extension

Fonctionnalités clés de DevSuite Pro

DevSuite Pro propose plus de 64+ outils de développement pour inspecter, mesurer, concevoir et analyser les pages web. Optimisez votre flux de travail avec des fonctionnalités puissantes intégrées directement dans votre navigateur.

CSS Inspector

Survolez n'importe quel élément pour afficher et modifier instantanément ses styles CSS en direct, facilitant le débogage et l'ajustement des designs en temps réel.

En savoir plus →

Inspecteur d'éléments

Cliquez sur n'importe quel élément pour inspecter ses propriétés, dimensions, espacements, polices et couleurs. Comprenez la structure de la page instantanément sans ouvrir les DevTools du navigateur.

En savoir plus →

Règles et repères

Mesurez les distances, vérifiez l'alignement et ajoutez des règles et des guides au pixel près sur n'importe quelle page web pour garantir un alignement parfait de vos designs.

En savoir plus →

Sélecteur de couleur

Sélectionnez des couleurs de n'importe quel élément de la page et kopiez les valeurs HEX, RGB ou HSL dans votre presse-papiers en un seul clic.

En savoir plus →

Capture d'écran

Capturez des captures d'écran de la page entière ou de la zone visible de n'importe quelle page web et téléchargez-les instantanément, idéal pour partager des designs et signaler des bugs.

En savoir plus →

Test responsive

Prévisualisez n'importe quelle page web à différentes tailles d'écran et résolutions d'appareils pour tester le design responsive sans quitter votre navigateur.

En savoir plus →
Explorez d'autres outils en détail :
Inspecteur CSS GRATUIT

Inspectez et modifiez les styles CSS en temps réel

L'inspecteur CSS est un puissant outil de développement qui vous permet de visualiser les propriétés CSS complètes de…

Déboguez et contrôlez les animations CSS en temps réel

L'Animation Inspector vous donne un contrôle total sur chaque animation CSS et transition en cours d'exécution sur…

Convertissez le CSS de n'importe quel élément en utility classes Tailwind

Copy as Tailwind fait le lien entre le design visuel et le code Tailwind CSS.

Visualisez la structure complète de mise en page de n'importe quelle page

Le mode Outline uniquement ajoute des contours border codés par couleur à chaque élément HTML d'une page web, vous…

Obtenez les classes Tailwind catégorisées pour n'importe quel élément

Tailwind Helper inspecte n'importe quel élément d'une page web et génère une analyse complète et catégorisée des…

Superposition visuelle de l'arborescence HTML sur n'importe quelle page web

Page Outliner affiche la structure DOM complète de toute page web sous forme de superposition arborescente visuelle…

Détectez les composants React, Vue, Angular et Svelte sur n'importe quel site

Component Detector identifie automatiquement quel framework frontend un site web utilise et révèle son arborescence de…

Drag & Drop pour repositionner n'importe quel élément sur une page

Déplacer un élément vous permet de cliquer sur n'importe quel élément d'une page web et de le faire glisser…

Supprimer ou basculer la visibilité de n'importe quel élément

Supprimer/Masquer un élément vous permet de supprimer ou de masquer temporairement n'importe quel élément d'une page web en un seul clic.

Exportez n'importe quel élément en HTML, CSS ou JSON

Export Element vous permet de cliquer sur n'importe quel élément d'une page web et d'exporter sa structure complète en…

Générez des composants React, Vue et Svelte depuis n'importe quel élément

Copy Component Code transforme n'importe quel élément d'une page web en un fichier de composant propre, prêt pour la…

Capturez la zone visible ou une page entière en une seule action

Screenshot capture des images haute qualité de n'importe quelle page web selon deux modes : la zone visible (exactement…

Affichez, sélectionnez et téléchargez toutes les images d'une page web

Extract Images analyse n'importe quelle page web et présente toutes les images dans une galerie navigable.

Trouvez, prévisualisez et téléchargez chaque SVG sur n'importe quelle page

SVG Grabber découvre tous les SVG présents sur une page web — éléments SVG inline, références à des fichiers .svg…

Remplacez n'importe quelle image d'une page par la vôtre

Image Replacer vous permet de cliquer sur n'importe quelle image d'une page web et de la remplacer par la vôtre — en…

Générez des QR codes pour n'importe quelle URL ou texte instantanément

QR Code Generator crée automatiquement un QR code scannable pour l'URL de la page en cours — ou pour toute URL…

Règle de page GRATUIT

Règles, guide lines et mesures au pixel près sur n'importe quelle page

Page Ruler ajoute des règles de style Photoshop et des guide lines déplaçables à n'importe quelle page web.

Prévisualisez plusieurs viewports d'appareils simultanément

Responsive Viewer affiche la page web actuelle rendue à plusieurs tailles de viewport côte à côte — le tout sur un seul écran.

Mesurez les distances en pixels exactes entre deux éléments quelconques

Measure Distance vous permet de cliquer sur deux éléments d'une page web et de voir instantanément la distance en…

Visualisez chaque stacking context et couche z-index

Z-Index Inspector révèle l'ordre d'empilement complet de chaque élément d'une page web.

Inspectez les mises en page CSS Grid et Flexbox avec des overlays visuels

Grid/Flex Visualizer détecte chaque conteneur CSS Grid et Flexbox d'une page web et affiche leur structure de mise en…

Simulez les zones d'attention des utilisateurs sur n'importe quelle page

Heatmap Simulator génère une heatmap d'attention prédictive pour n'importe quelle page web, basée sur des modèles de…

Effacez sélectivement le cache, les cookies, localStorage et sessionStorage

Effacement des données de navigation offre aux développeurs un moyen rapide et sélectif d'effacer des types spécifiques…

Détectez chaque technologie derrière n'importe quel site web

Site Stack analyse n'importe quel site web et identifie sa pile technologique complète — frameworks frontend (React…

Inspecteur SEO GRATUIT

Audit SEO complet : meta tags, titres, OpenGraph et bien plus

SEO Inspector fournit un audit SEO instantané et complet de n'importe quelle page web.

Audit WCAG automatisé : contrast ratio, alt text, ARIA et plus encore

Accessibility Inspector effectue des vérifications WCAG 2.1 Level AA automatisées sur n'importe quelle page web et…

Cliquez sur n'importe quel texte pour le modifier instantanément

Live Text Editor rend chaque élément textuel d'une page web modifiable en un seul clic.

Remplacez n'importe quelle police globalement ou par élément depuis Google Fonts

Fonts Changer vous permet de remplacer n'importe quelle police d'une page web par une autre issue de la bibliothèque…

Découvrez toutes les polices utilisées sur n'importe quelle page web

List All Fonts analyse n'importe quelle page web et présente un inventaire complet de chaque famille de polices…

Eyedropper de précision pour les valeurs de couleur HEX, RGB & HSL

Color Picker fournit un eyedropper au pixel près pour prélever des couleurs depuis n'importe quel élément d'une page…

Extrayez la palette de couleurs complète de n'importe quelle page web

Color Palette analyse chaque élément d'une page web et extrait l'ensemble complet des couleurs utilisées — du texte et…

Appliquer le Dark Mode sur n'importe quel site instantanément

Force Dark Mode applique un dark color scheme à tout site web qui n'en propose pas — ou remplace le thème clair d'un site.

Activer ou désactiver JavaScript par onglet instantanément

Toggle JavaScript désactive ou réactive l'exécution de JavaScript pour l'onglet du navigateur actuel en un seul clic.

Affichez, modifiez, ajoutez et supprimez des cookies pour n'importe quel domaine

Cookie Editor affiche tous les cookies du domaine actuel dans un tableau clair et triable.

Consultez la sortie console dans un panneau flottant — sans DevTools

Console Logger capture toute la sortie console (console.log, console.warn, console.error, console.info) et l'affiche…

Surveillez toutes les requêtes réseau en temps réel

Network Monitor capture et affiche chaque requête réseau effectuée par la page courante — appels XHR/Fetch API…

Consultez, modifiez, ajoutez et supprimez des entrées localStorage et sessionStorage

Local Storage Editor propose une interface tableau claire pour gérer les entrées localStorage et sessionStorage du site courant.

Analysez Tous les Liens d'une Page et Détectez les Liens Brisés

Le Vérificateur de Liens Brisés analyse tous les liens de la page en cours — les href d'ancres, les sources d'images…

Tableau de Bord de Performance Instantané : Temps de Chargement, Statistiques DOM et Ressources

Performance de Page fournit une vue d'ensemble instantanée des performances de n'importe quelle page web — métriques de…

Formateur JSON GRATUIT

Formater, Minifier et Valider le JSON en un Clic

JSON Formatter embellit, minifie et valide le JSON directement dans votre navigateur.

Encodez des chaînes en Base64 et vice versa instantanément

Base64 Encoder/Decoder convertit le texte en Base64 et le Base64 en texte directement dans votre navigateur.

Encodez et décodez des chaînes d'URL en un clic

URL Encoder/Decoder convertit les chaînes d'URL vers et depuis leur forme encodée en pourcentage (percent-encoded).

Encodez et décodez les entités HTML instantanément

HTML Entity Encoder convertit les caractères spéciaux (< > & " ') en leurs équivalents d'entité HTML (&lt; &gt; &amp…

Échappez et déséchappez des chaînes pour le code

Backslash Escape/Unescape convertit les chaînes vers et depuis leur forme échappée (\n \t \r \" \' \\ et échappements Unicode).

64 Image &harr; Base64 GRATUIT

Convertissez des images vers et depuis des URI de données Base64

Image ↔ Base64 convertit les fichiers image (PNG, JPG, SVG, WebP, GIF) en URI de données encodées en Base64 et vice versa.

Débogueur JWT GRATUIT

Décodez les JSON Web Tokens instantanément

JWT Debugger décode et inspecte les JSON Web Tokens — analyse l'en-tête, la charge utile et la signature, affiche les…

Générez des identifiants UUID v4 en masse

UUID Generator produit des identifiants UUID v4 cryptographiquement forts en utilisant l'API crypto du navigateur.

Calculez des hashs MD5, SHA-1, SHA-256, SHA-384, SHA-512

Hash Generator calcule des hashs cryptographiques (MD5, SHA-1, SHA-256, SHA-384, SHA-512) de n'importe quel texte.

Générez des mots de passe cryptographiquement forts

Password Generator produit des mots de passe aléatoires et forts en utilisant l'API de hasard cryptographique du navigateur.

Testez des expressions régulières en direct avec coloration des correspondances

Regex Tester évalue les expressions régulières par rapport à un texte de test en temps réel.

Convertissez les dates Unix, ISO et lisibles par l'homme

Timestamp Converter traduit entre les horodatages Unix (secondes, millisecondes, microsecondes, nanosecondes), ISO…

Comparez deux blocs de texte ligne par ligne

Diff Tool compare deux blocs de texte et souligne les lignes ajoutées, supprimées et inchangées avec une sortie par code couleur.

Vérifiez le rapport de contraste WCAG entre deux couleurs

Contrast Checker calcule le rapport de contraste WCAG 2.1 entre deux couleurs et les évalue par rapport aux seuils…

Convertissez HEX, RGB, HSL, HSV & OKLCH instantanément

Color Format Converter traduit toute couleur entre HEX, RGB, HSL, HSV et OKLCH.

Extrayez la palette dominante de n'importe quelle image

Image Color Extractor analyse tout fichier image (glissez, collez ou cliquez pour charger) et renvoie jusqu'à 16…

Obtenez des sélecteurs CSS et XPath pour tout élément

DOM Path Finder vous permet de survoler n'importe quel élément d'une page pour révéler son sélecteur CSS unique, son…

Testez les requêtes Cross-Origin et inspectez les en-têtes CORS

CORS Checker vérifie si une requête cross-origin depuis votre site est autorisée par le serveur cible.

Capturez les trames WebSocket en temps réel

WebSocket Inspector capture chaque trame WebSocket — envoyée et reçue — sur toutes les connexions de la page.

Analysez instantanément la page à la recherche d'images cassées

Broken Image Finder scanne chaque <img> et image d'arrière-plan CSS de la page, détecte les erreurs de chargement (404…

Remplissez les formulaires avec des données de test réalistes

Form Filler remplit chaque champ visible avec des données réalistes : nom, e-mail, téléphone, adresse, mot de passe, etc.

Convertissez entre CSV et JSON dans les deux sens

CSV ↔ JSON Converter gère l'aller-retour complet entre les deux formats tabulaires les plus courants.

Formateur XML GRATUIT

Formatez, validez et visualisez l'XML avec coloration syntaxique

XML Formatter embellit, minifie et valide l'XML dans le navigateur.

Formateur SQL GRATUIT

Embellissez et formatez vos requêtes SQL

SQL Formatter transforme les requêtes SQL minifiées ou désordonnées en requêtes lisibles et indentées.

Sauvegardez les pages web comme des PDF propres

Convert to PDF sauvegarde la page web actuelle au format PDF via la fenêtre d'impression du navigateur, avec…

Tarifs et plans

Une tarification simple et transparente

Choisissez le plan qui convient à votre flux de travail. Commencez gratuitement, mettez à niveau à tout moment.

Basique

Parfait pour essayer DevSuite Pro. Aucune carte de crédit requise.

0 $

Gratuit à vie
Commencer gratuitement
  • 43 outils de développement gratuits
  • Inspecteur CSS et sélecteur de couleur
  • Capture d'écran
  • Interface dock flottante
  • Toutes les futures mises à jour gratuites

Mensuel Le plus populaire

Accès complet aux 64+ outils professionnels. Facturé mensuellement.

2,99 $

par mois
Démarrer le plan mensuel
  • Tous les 64+ outils de développement
  • Accès complet aux outils Pro
  • Jusqu'à 3 appareils
  • Support prioritaire
  • Annulez à tout moment

Unique Meilleure offre

Payez une fois, utilisez pour toujours. Accès complet à tous les 64+ outils pro sans frais récurrents.

29,99 $

paiement unique
Achetez une fois, utilisez pour toujours
  • Tous les 64+ outils de développement
  • Accès complet aux outils Pro
  • Jusqu'à 3 appareils
  • Support prioritaire
  • Aucun frais récurrent
DevSuite Pro FAQ section background
FAQ

Questions fréquemment posées par les utilisateurs de DevSuite Pro

Questions courantes sur les fonctionnalités et l'utilisation de l'extension DevSuite Pro. Si vous avez une question, la réponse se trouve peut-être déjà ci-dessous.

Comment installer DevSuite Pro ?

Rendez-vous sur le Chrome Web Store, recherchez "DevSuite Pro", cliquez sur "Ajouter à Chrome" et confirmez en sélectionnant "Ajouter l'extension". Une fois installée, l'icône de l'extension apparaîtra dans la barre d'outils de votre navigateur. Cliquez dessus pour accéder instantanément à plus de 64+ outils de développement.

Quelle est la différence entre les outils gratuits et Pro ?

Les outils gratuits (43+) sont accessibles à tous sans licence requise. Les outils Pro sont marqués d'un badge doré PRO et nécessitent une licence Pro active. Vous pouvez voir quels outils sont gratuits ou pro depuis le popup — les outils gratuits n'ont pas d'icône de verrouillage, tandis que les outils pro apparaissent légèrement estompés tant que vous n'avez pas activé votre licence.

Pourquoi un outil ne fonctionne-t-il pas sur certains sites ?

Certains sites web ont des politiques de sécurité du contenu (CSP) strictes qui bloquent certaines actions des extensions de navigateur. C'est particulièrement courant sur les sites bancaires et gouvernementaux. De plus, les pages internes de Chrome (chrome://) ne permettent pas aux extensions d'exécuter des scripts de contenu.

Mes modifications sur une page sont-elles permanentes ?

Non. Toutes les modifications effectuées par des outils comme Move Element, Live Text Editor, Delete/Hide Element et CSS Inspector sont temporaires. Elles n'affectent que ce que vous voyez dans votre navigateur à cet instant. Recharger la page restaurera tout à son état d'origine.

Comment activer ma licence Pro ?

Ouvrez le popup DevSuite Pro, cliquez sur l'icône Paramètres dans le coin supérieur droit. Faites défiler jusqu'à la section Licence, collez votre clé de licence dans le champ de saisie et cliquez sur Activer. Si la clé est valide, le badge passera de FREE à PRO et tous les outils pro seront déverrouillés instantanément.

Comment déplacer ou masquer le dock flottant ?

Vous pouvez déplacer le dock en allant dans les Paramètres et en choisissant une position de barre latérale différente — Haut, Bas, Gauche ou Droite. Vous pouvez également masquer complètement le dock en désactivant "Afficher le dock sur les pages" dans les Paramètres, ou en appuyant sur Ctrl+Shift+X à tout moment.

DevSuite Pro collecte-t-il des données de navigation ?

No. DevSuite Pro ne collecte, ne suit et ne transmet aucune donnée de navigation. Tous les paramètres sont stockés localement dans votre navigateur. La seule requête externe effectuée concerne l'activation de la clé de licence pour vérifier votre clé auprès de notre serveur.

Puis-je utiliser DevSuite Pro sur Firefox ?

Oui ! DevSuite Pro est disponible sur le Chrome Web Store et les modules complémentaires Firefox. Il fonctionne sur Chrome, Edge, Brave et d'autres navigateurs basés sur Chromium, ainsi que sur Firefox.