Ajouter l'extension à Chrome
- Ouvrez le Chrome Web Store et recherchez l'extension "DevSuite Pro".
- Cliquez sur "Ajouter à Chrome" puis confirmez en cliquant sur "Ajouter l'extension" dans la fenêtre contextuelle.
64+ outils puissants pour inspecter, mesurer, capturer, analyser et concevoir des pages web directement dans votre navigateur.
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.
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.
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 →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 →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é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 →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 →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 →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è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…
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…
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 (< > &…
É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).
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é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.
Formatez, validez et visualisez l'XML avec coloration syntaxique
XML Formatter embellit, minifie et valide l'XML dans le navigateur.
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…
Choisissez le plan qui convient à votre flux de travail. Commencez gratuitement, mettez à niveau à tout moment.
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.
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.
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.
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.
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.
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.
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.
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.
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.