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.
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.
Démarrage : Installation manuelle
CSS Scanner Pro est actuellement en attente d'approbation sur le Chrome Web Store, mais vous pouvez l'installer dès maintenant en utilisant les outils de développement de Chrome. Voici comment :
Étape 1 : Télécharger l'extension
Rendez-vous sur le dépôt GitHub et téléchargez l'extension sous forme de fichier ZIP :
https://github.com/Thecoolsim/chrome-extensions/raw/refs/heads/main/css-scanner-pro/css-scanner-pro-production.zipExtrayez le fichier ZIP dans un dossier sur votre ordinateur. Vous devriez avoir un dossier appelé css-scanner-pro avec tous les fichiers de l'extension à l'intérieur.
Alternativement, si vous êtes à l'aise avec Git, clonez le dépôt :
git clone https://github.com/Thecoolsim/chrome-extensions.git
cd chrome-extensions/css-scanner-proÉtape 2 : Charger 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
C'est tout. L'extension apparaîtra maintenant dans votre barre d'outils Chrome.
Étape 3 : Commencer l'inspection
Cliquez sur l'icône CSS Scanner Pro dans votre barre d'outils (ou appuyez sur Ctrl+Maj+S sur Windows/Linux, Cmd+Maj+S sur Mac) pour activer l'inspecteur. Survolez n'importe quel élément de la page pour voir son CSS.
Un flux de travail rapide
Une fois que vous êtes opérationnel, 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'approbation du Chrome Web Store, l'extraction de variables CSS, le mode sombre, l'export SCSS, et plus encore. Mais même dans sa forme actuelle, c'est un outil puissant pour les développeurs web et les designers.
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 à l'essayer ? Téléchargez CSS Scanner Pro depuis GitHub dès aujourd'hui et ne payez plus jamais pour un inspecteur CSS.
