English
See more
Hides box-model/metrics pane from DevTools. Enable: 'Allow extensions to load custom stylesheets' in DevTools > Experiments to use.
Latest Version
Version
0.9.6
Update
November 13, 2024
Size
598KiB
Developer
Category
Users
26 
Rating
0 ★
Manifest Version
3
Web Store Status
Extension ID
Languages Support
Permissions
Slimmer DevTools (No-Metrics) Extension
Slimmer DevTools hides the \"Metrics\" panel in DevTools.
For many developers, this box is rarely useful but takes up valuable space, allowing only a few CSS properties to be visible at a time. Slimmer DevTools removes it, letting you see more properties at once and work more efficiently.
### Enable/Disable
To enable, open `DevTools (F12) > Experiments` and activate \"Allow extensions to load custom stylesheets,\" then restart DevTools.
To toggle Slimmer DevTools on or off, go to Chrome extensions and adjust as needed.
### Built for Simplicity
Designed to reduce clutter in DevTools – inspired by this [StackOverflow thread](https://stackoverflow.com/questions/66691662/is-there-a-way-to-hide-the-box-model-graphic-in-chrome-developer-tools).
Read more
For many developers, this box is rarely useful but takes up valuable space, allowing only a few CSS properties to be visible at a time. Slimmer DevTools removes it, letting you see more properties at once and work more efficiently.
### Enable/Disable
To enable, open `DevTools (F12) > Experiments` and activate \"Allow extensions to load custom stylesheets,\" then restart DevTools.
To toggle Slimmer DevTools on or off, go to Chrome extensions and adjust as needed.
### Built for Simplicity
Designed to reduce clutter in DevTools – inspired by this [StackOverflow thread](https://stackoverflow.com/questions/66691662/is-there-a-way-to-hide-the-box-model-graphic-in-chrome-developer-tools).
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "version": "0.9.6", "name": "Slimmer DevTools (No-Metrics)", "description": "Hides box-model/metrics pane from DevTools. Enable: 'Allow extensions to load custom stylesheets' in DevTools > Experiments to use.", "icons": { "16": "icon-16.png", "48": "icon-48.png", "128": "icon-128.png", "512": "icon-512.png" }, "devtools_page": "devtools.html"}
Read more
Similar Extensions
VisBug 26 252 ★ 5.38MiB
Tailwind CSS Devtools 26 7 ★ 857KiB
Chrome Extension Builder 26 14 ★ 512KiB
Atomic CSS Devtools 26 15 ★ 196KiB
React Developer Tools 26 1576 ★ 1.56MiB
Show All Padding & Margins 26 1 ★ 23.17KiB
Tabs Counter - Number of Browser Opened Tabs 26 7 ★ 48.12KiB
Lexical Developer Tools 26 1 ★ 238KiB
Window Resizer 26 6 ★ 602KiB
Siemens Web Framework DevTools 26 1 ★ 634KiB
Svelte DevTools 26 19 ★ 58.61KiB
Better Ruler 26 52 ★ 93.66KiB
Gimli Tailwind 26 33 ★ 151KiB
Hover inspector like in Zeplin , Figma 26 29 ★ 122KiB
Chrome Extensions Disabler 26 4 ★ 15.38KiB
Layout Grid for browser 26 1 ★ 952KiB
ToolsOverflow 26 3 ★ 44.45KiB
Gimli Bootstrap 26 1 ★ 117KiB
Bootstrap grid viewer 26 2 ★ 34.09KiB
CSS Selector Capture Pro 26 11 ★ 116KiB
Claude Artifact Expander 26 1 ★ 143KiB
Ad Manager Viewability Insights 26 4 ★ 297KiB
Svelte DevTools+ 26 5 ★ 267KiB
Web Developer Tool for Chrome 26 21 ★ 30.89KiB
