(Maintenant sur le Chrome Web Store !)
J'ai passé d'innombrables heures à chercher un bon outil d'inspection CSS pour Chrome, pour finalement découvrir que les meilleures options sont assorties de prix élevés. J'ai donc décidé de créer le mien.
Je vous présente CSS Scanner Pro — une extension Chrome rapide et légère qui rend l'inspection, la copie et l'analyse des styles CSS aussi simple que de survoler un élément.
Bonne nouvelle : CSS Scanner Pro est maintenant officiellement disponible sur le Chrome Web Store ! Vous pouvez l'installer en un seul clic, comme n'importe quelle autre extension.
Pourquoi j'ai créé cet outil
La plupart des outils CSS commerciaux vous obligent à payer pour des fonctionnalités que vous n'utilisez peut-être qu'occasionnellement. CSS Scanner Pro fait exactement ce dont vous avez besoin : inspecter le CSS instantanément, le copier proprement et retourner au travail. Pas d'abonnements. Pas de superflu. Juste une fonctionnalité pure.
Ce que fait CSS Scanner Pro
À la base, CSS Scanner Pro vous permet de :
- Inspecter n'importe quel élément en le survolant et en voyant le CSS calculé complet instantanément
- Copier le CSS, le HTML, ou les deux en un seul clic — la sortie est propre et prête à coller
- Modifier les styles en temps réel à l'aide de l'éditeur en direct intégré avant de copier
- Extraire les composants imbriqués avec l'option "Inclure les enfants" pour capturer le CSS complet du composant
- Exporter vers CodePen pour le partage et la collaboration
- Voir la source CSS pour comprendre d'où proviennent les styles
Au-delà des bases, il y a une superposition de grille pour le débogage de mise en page, un scanner d'élément parent pour explorer la hiérarchie DOM, et des raccourcis clavier pour les utilisateurs avancés.
Installation : C'est maintenant super facile
Installer depuis le Chrome Web Store (Recommandé)
- Visitez la page CSS Scanner Pro sur le Chrome Web Store
- Cliquez sur le bouton Ajouter à Chrome
- Confirmez l'installation quand vous y êtes invité
C'est tout ! L'extension sera installée et prête à l'emploi immédiatement.
Installation manuelle (Pour les développeurs)
Si vous préférez installer à partir de la source ou si vous voulez contribuer au projet, vous pouvez toujours le charger manuellement depuis GitHub :
Téléchargez l'extension depuis GitHub :
https://github.com/Thecoolsim/chrome-extensions/raw/refs/heads/main/css-scanner-pro/css-scanner-pro-production.zip- Extrayez le fichier ZIP dans un dossier sur votre ordinateur. Vous devriez avoir un dossier appelé
css-scanner-proavec tous les fichiers de l'extension à l'intérieur. Alternativement, clonez le dépôt si vous êtes à l'aise avec Git :
git clone https://github.com/Thecoolsim/chrome-extensions.git cd chrome-extensions/css-scanner-pro- Chargez l'extension dans Chrome :
- Ouvrez Chrome et naviguez vers
chrome://extensions/ - Activez le Mode développeur à l'aide du bouton bascule dans le coin supérieur droit
- Cliquez sur le bouton Charger l'extension non empaquetée
- Naviguez vers le dossier
css-scanner-proet sélectionnez-le
- Ouvrez Chrome et naviguez vers
Démarrage
Une fois CSS Scanner Pro installé, l'utiliser est simple :
- Cliquez sur l'icône CSS Scanner Pro dans votre barre d'outils (ou appuyez sur
Ctrl+Maj+Ssur Windows/Linux,Cmd+Maj+Ssur Mac) pour activer l'inspecteur - Survolez n'importe quel élément de la page pour voir son CSS
- Cliquez pour inspecter, ou utilisez le panneau pour afficher, modifier et copier les styles
Un flux de travail rapide
Voici comment je l'utilise généralement :
- Activer le scanner avec le raccourci clavier
- Survoler l'élément que je veux analyser
- Inspecter le CSS dans le panneau qui apparaît
- Copier le CSS (ou le HTML) en un clic
- Utiliser l'éditeur en direct pour tester les modifications avant de les valider
- Exporter vers CodePen si j'ai besoin de partager ou d'affiner davantage
Raccourcis clavier
| Action | Windows/Linux | Mac |
|---|---|---|
| Activer le scanner | Ctrl+Maj+S | Cmd+Maj+S |
| Basculer la superposition de grille | Ctrl+Maj+G | Cmd+Maj+G |
| Scanner l'élément parent | Ctrl+Maj+E | Cmd+Maj+E |
| Épingler l'inspecteur | Espace | |
| Fermer | Échap | |
Vous pouvez personnaliser ces raccourcis dans les paramètres d'extension de Chrome si vous préférez des touches différentes.
La suite
CSS Scanner Pro est construit avec du JavaScript vanilla et prend en charge plusieurs langues (anglais, français, espagnol et allemand). Le code est propre, bien organisé et entièrement open source sous licence MIT.
La feuille de route comprend l'extraction de variables CSS, le mode sombre, l'export SCSS, l'intégration JSFiddle, et bien d'autres. J'ajoute continuellement de nouvelles fonctionnalités en fonction des commentaires des utilisateurs.
Rejoignez la communauté
Vous avez trouvé un bug ? Vous avez une demande de fonctionnalité ? Consultez le dépôt GitHub et ouvrez un ticket. Les contributions sont les bienvenues — que ce soit du code, des traductions ou des commentaires.
Vous pouvez également me contacter sur Twitter ou consulter mes autres projets sur adjatan.org.
Prêt à commencer ? Installez CSS Scanner Pro depuis le Chrome Web Store dès aujourd'hui et ne payez plus jamais pour un inspecteur CSS.
Pour les développeurs qui veulent contribuer ou exécuter la dernière version de développement : Clonez le dépôt GitHub et chargez-le décompressé dans Chrome.
