I've spent countless hours searching for a decent CSS inspection tool in Chrome, only to find that the best options come with hefty price tags. So I decided to build my own.
Introducing CSS Scanner Pro — a fast, lightweight Chrome extension that makes inspecting, copying, and analyzing CSS styles as simple as hovering over an element.
Why I Built This
Most commercial CSS tools force you to pay for features you might only use occasionally. CSS Scanner Pro does exactly what you need: inspect CSS instantly, copy it cleanly, and get back to work. No subscriptions. No bloat. Just pure functionality.
What CSS Scanner Pro Does
At its core, CSS Scanner Pro lets you:
- Inspect any element by hovering over it and seeing the complete computed CSS instantly
- Copy CSS, HTML, or both with a single click — the output is clean and ready to paste
- Edit styles in real time using the built-in live editor before copying
- Extract nested components with the "Include Children" option to capture full component CSS
- Export to CodePen for sharing and collaboration
- View the CSS source to understand where styles are coming from
Beyond the basics, there's a grid overlay for layout debugging, a parent element scanner to explore the DOM hierarchy, and keyboard shortcuts for power users.
Getting Started: Manual Installation
CSS Scanner Pro is currently waiting for approval on the Chrome Web Store, but you can install it right now using Chrome's developer tools. Here's how:
Step 1: Download the Extension
Head to the GitHub repository and download the extension as a ZIP file:
https://github.com/Thecoolsim/chrome-extensions/raw/refs/heads/main/css-scanner-pro/css-scanner-pro-production.zipExtract the ZIP file to a folder on your computer. You should have a folder called css-scanner-pro with all the extension files inside.
Alternatively, if you're comfortable with Git, clone the repository:
git clone https://github.com/Thecoolsim/chrome-extensions.git
cd chrome-extensions/css-scanner-proStep 2: Load the Extension into Chrome
- Open Chrome and navigate to
chrome://extensions/ - Enable Developer mode using the toggle in the top-right corner
- Click the Load unpacked button
- Navigate to the
css-scanner-profolder and select it
That's it. The extension will now appear in your Chrome toolbar.
Step 3: Start Inspecting
Click the CSS Scanner Pro icon in your toolbar (or press Ctrl+Shift+S on Windows/Linux, Cmd+Shift+S on Mac) to activate the inspector. Hover over any element on the page to see its CSS.
A Quick Workflow
Once you're up and running, here's how I typically use it:
- Activate the scanner with the keyboard shortcut
- Hover over the element I want to analyze
- Inspect the CSS in the panel that appears
- Copy the CSS (or HTML) with one click
- Use the live editor to test changes before committing
- Export to CodePen if I need to share or refine further
Keyboard Shortcuts
| Action | Windows/Linux | Mac |
|---|---|---|
| Activate Scanner | Ctrl+Shift+S | Cmd+Shift+S |
| Toggle Grid Overlay | Ctrl+Shift+G | Cmd+Shift+G |
| Scan Parent Element | Ctrl+Shift+E | Cmd+Shift+E |
| Pin Inspector | Space | |
| Close | Esc | |
You can customize these shortcuts in Chrome's extension settings if you prefer different keys.
What's Next
CSS Scanner Pro is built with vanilla JavaScript and supports multiple languages (English, French, Spanish, and German). The code is clean, well-organized, and completely open source under the MIT license.
The roadmap includes Chrome Web Store approval, CSS variable extraction, dark mode, SCSS export, and more. But even in its current form, it's a powerful tool for web developers and designers.
Join the Community
Found a bug? Have a feature request? Check out the GitHub repository and open an issue. Contributions are welcome — whether it's code, translations, or feedback.
You can also reach out on Twitter or check out my other projects at adjatan.org.
Ready to try it? Download CSS Scanner Pro from GitHub today and never pay for a CSS inspector again.
