CSS11 min
How to Debug CSS Problems: A Practical Developer's Guide
Why your style isn't applying, what's causing the horizontal scrollbar, and how to work out which rule actually won. A methodical approach to CSS bugs.
Read article555 tools · 22 categories · 100% on-device500+ developer tools.
500+ developer tools.
One extension.
Inspect, debug, modify, test and audit any page from a single keyboard-friendly popup. A genuinely comprehensive toolkit — every tool runs privately in your browser.
- No sign-up
- No tracking
- Runs on-device
- Free
A few of the 22 categories inside
CSS Utilities50HTML & DOM48Data & Format41SEO Tools34Network Tools34Storage Manager33Page Utilities31Disable Features29Color & Design28JavaScript Tools25+12 more →
Tool explorer
The whole toolkit, in one place
0 individual utilities, grouped into 22 categories. Search below — the same way you would inside the extension.
Showing all 22 categories
50
CSS Utilities
Toggle stylesheets, swap the box model, and live-edit CSS.
- Disable All Styles
- Use Border-Box Model
- View CSS
- +47 more
48
HTML & DOM
Read element metadata, IDs, classes, ARIA roles and structure.
- Display Element Information
- Display Div Dimensions
- Display Id & Class Details
- +45 more
41
Data & Format
Format, validate and convert JSON, XML, YAML, CSV and Base64.
- JSON Formatter
- JSON Validator
- XML Formatter
- +38 more
34
SEO Tools
Audit metadata, canonicals, hreflang and structured data.
- SEO Audit
- Meta Length Checker
- Canonical Conflict Detector
- +31 more
34
Network Tools
Inspect response headers, bodies, status codes and resource sizes.
- View HTTP Response Headers
- Copy Response Body
- HTTP Status Code Lookup
- +31 more
33
Storage Manager
View and edit cookies, localStorage, sessionStorage and IndexedDB.
- View & Edit Storage
- Cookie Search
- Search localStorage
- +30 more
31
Page Utilities
Generate placeholder text, test regex, count and transform text.
- Lorem Ipsum Generator
- Slug Generator
- Text Case Converter
- +28 more
29
Disable Features
Switch off JavaScript, images, fonts, animations and more per site.
- Disable JavaScript
- Disable Popups
- Disable Image Loading
- +26 more
28
Color & Design
Pick colors, extract palettes and inspect type and spacing.
- Eyedropper Tool
- Color Palette Extractor
- CSS Variable Color Palette
- +25 more
25
JavaScript Tools
Detect frameworks, list scripts, find listeners and console errors.
- View Loaded JavaScript Files
- View ES Modules
- Detect Framework
- +22 more
25
Image Utilities
Reveal alt text and dimensions, and find broken or missing-alt images.
- Display Alt Attributes
- Display Image Dimensions
- Outline Images Without Alt
- +22 more
25
Accessibility
Flag missing labels and ARIA, low contrast, and simulate color vision.
- Highlight Missing Labels
- Highlight Missing ARIA
- Highlight Empty Buttons
- +22 more
22
Generators & Validators
Validate HTML/CSS, edit CSS live, and export reports.
- Validate HTML
- Validate CSS
- Pro CSS Editor
- +19 more
20
Security
Review CSP, HSTS, referrer policy and other security headers.
- Security Headers Checker
- CSP Viewer
- HSTS Checker
- +17 more
19
Form Tools
Populate and clear fields, reveal passwords and flag missing labels.
- Populate Form Fields
- Clear Form Fields
- Display Passwords
- +16 more
19
Browser Environment
Pick pixel colors, measure with rulers and guides, clear cache.
- Color Picker
- Advanced Palettes
- Ruler
- +16 more
18
Responsive Tools
Resize the viewport and inspect media queries and pixel ratio.
- Display Window Size
- Resize Window
- View Responsive Layouts
- +15 more
15
Performance
Analyze DOM size, resource counts and render-blocking assets.
- DOM Size Analyzer
- Resource Count Summary
- Detect Render Blocking CSS
- +12 more
14
Outline Elements
Outline blocks, headings, tables, iframes and positioned elements.
- Outline Block Elements
- Outline Headings
- Outline Tables & Cells
- +11 more
10
PWA Tools
Validate manifests, check installability and service workers.
- Manifest Viewer
- Manifest Validator
- Installability Check
- +7 more
8
Technology Detector
Identify frameworks, CMS platforms, analytics, CDNs and more.
- Frontend Frameworks
- CSS Frameworks
- CMS Platforms
- +5 more
7
Resource Explorer
Browse every CSS, JS, image, font and iframe the page loads.
- CSS Files
- JavaScript Files
- Images
- +4 more
The workflow
From toolbar to insight in four steps
No configuration and no account. It works on every tab the moment it's installed.
- 01
Open the popup
Click the toolbar icon or hit the shortcut. The popup opens on top of the current tab — no DevTools, no context switch.
- 02
Search or browse
Type what you need across all 555 tools, or browse the category sidebar. Recent and favorite tools stay one click away.
- 03
Run it on the page
Toggle a tool on, run a one-shot action, or open a live editor. A badge shows how many tools are active on the tab.
- 04
Read the report
Auditing tools open searchable reports — headers, CSS, images, outline, colors — in a dedicated panel you can export.
Built around your work
Six ways to work a page
The toolkit isn't a pile of buttons. Every utility maps to something you actually do — from first inspection to final optimization pass.
Inspect
See how any page is built.
- Element Information
- Box Model & Computed Styles
- Document Outline
- ARIA Roles
- Typography Inspector
- Media Query Info
A representative sample — each workflow draws on dozens more tools inside the extension.
Modify
Edit the live page — and keep going
Open the Pro CSS Editor and rewrite styles against the real DOM, then flip whole stylesheets off, swap to the border-box model, or force system fonts to see structure underneath. Nothing is permanent; reload to reset.
- Live CSS editing with instant preview
- Disable all, linked or inline styles
- Populate & clear forms, reveal passwords
Pro CSS Editor
.card {
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 1px 2px rgba(0,0,0,.06);
}Disable All StylesBorder-Box ModelForce Sans-Serif
Audit
Every check opens a real report
Auditing tools don't just flash a color on the page — they open a searchable, exportable report. Review security headers, SEO metadata, accessibility issues, the document outline and response headers side by side.
- Security headers, CSP, HSTS & more
- SEO audit with meta and canonical checks
- Accessibility: labels, ARIA and contrast
Security Headers Checker
- Content-Security-PolicyPresent
- Strict-Transport-Securitymax-age=63072000
- X-Frame-OptionsMissing
- Referrer-Policystrict-origin
- Permissions-PolicyNot set
Inspect
Storage and network, fully decoded
Read and edit cookies, localStorage, sessionStorage, IndexedDB and Cache Storage in one manager. Copy any response body, inspect headers, and check status codes without opening a separate tool.
- View & edit every storage backend
- Search, add and delete cookies
- Response headers, bodies & status codes
Storage Manager
CookieslocalStoragesessionStorageIndexedDB
| session_id | a3f9…c1 | HttpOnly |
| theme | dark | — |
| _ga | GA1.2.88… | Analytics |
Search, add, edit or delete any entry — then export.
One toolkit, many jobs
Whatever you build, there's a tool for it
The breadth means the same extension covers the whole team — no hunting for five different add-ons.
Developers
Inspect the DOM, edit CSS live, and read every request the page makes.
- Live CSS Editor
- Element Inspector
- Response Headers
- Detect Framework
- Storage Manager
- JSON Formatter
Designers
Sample exact colors, extract palettes, and check type and spacing.
- Eyedropper
- Palette Extractor
- Typography Inspector
- Spacing Inspector
- Ruler & Guides
- CSS Variable Colors
QA Engineers
Resize viewports, populate forms, and reset page state fast.
- Resize Window
- Populate Form Fields
- Broken Image Finder
- Clear Storage
- Console Errors
- Disable JavaScript
Accessibility
Surface missing labels, weak contrast, and color-vision issues.
- Missing Labels
- Missing ARIA
- Low Contrast Detector
- Simulate Protanopia
- Empty Buttons
- Document Outline
SEO
Validate metadata, canonicals, structured data and hreflang.
- SEO Audit
- Meta Length Checker
- Canonical Conflicts
- Rich Results Detector
- Hreflang Viewer
- Breadcrumb Schema
From the blog
Guides for debugging, testing and shipping
Practical write-ups on the work the toolkit is built for, useful whether or not you install anything.
No Ads
No ad networks bundled in.
No Tracking
Zero analytics or telemetry.
No Data Selling
Your data is never sold.
No Login Required
Every tool works with no account.
Local Processing
Inspection runs in your browser.
No Remote Code
Everything ships bundled.
Transparent Permissions
Each one maps to a tool.
Optional Pro Sign-In
Never needed for the toolkit.
Local Report Exports
Audit reports save to your device only.
Privacy
Built for privacy, not tracking
Your pages never leave your browser without permission.
Web Developer Tools was built privacy-first from day one. There are no accounts and no network calls except the ones you explicitly trigger.
- Every tool — CSS/DOM editing, cookie & storage viewers, header and security reports — runs locally in your browser against the page you're on. Nothing is uploaded.
- We don't sell your data, run ads inside the extension, or use any cross-site tracking or analytics.
- No account required for the toolkit — signing in is only for the optional Pro plan.
- Settings like theme, enabled tools and shortcuts save to
chrome.storage— never your browsing data. - No remote code: every script ships inside the extension package, reviewed and bundled at build time.
555 tools. One extension.
Every utility across 22 categories, free and on-device. Add it to your browser and it's ready on the next tab you open.
No sign-up · No tracking · Works on Chrome, Edge, Brave & other Chromium browsers