10 Hidden Features of Your Browser You've Never Used
Your browser can do way more than open websites. Screen recording, color picking, responsive testing, and more are built right in.
Chrome has over 100 features in DevTools that most people have never opened. Firefox has a built-in screenshot tool. Safari has a responsive design mode. Your browser is secretly a Swiss Army knife.
Here are 10 features that are already installed and waiting for you to discover them.
1. Device Emulation Mode
Press F12 (or Cmd+Opt+I on Mac) to open DevTools. Click the phone/tablet icon in the top-left. Your page now renders at any device size you choose. iPhone, iPad, Galaxy, custom dimensions.
Want to see multiple sizes at once? The responsive preview tool shows your page at several breakpoints simultaneously.
2. Color Picker
In Chrome DevTools, click on any color value in the CSS panel. A full color picker appears with an eyedropper tool that lets you pick any color from anywhere on the screen. No extension needed.
For a standalone color picker with hex, RGB, HSL, and more: color picker.
3. Screenshot Without Extensions
Chrome: DevTools > Cmd+Shift+P > type “screenshot.” Options: full page, viewport, or specific element. No extension.
Firefox: Right-click > “Take Screenshot.” Choose visible area or full page.
Safari: Develop menu > Show Web Inspector > capture options.
4. Network Throttling
DevTools > Network tab > throttle dropdown. Simulate slow 3G, fast 3G, or offline mode. See what your users on bad connections actually experience. Spoiler: it’s often terrible.
5. Local Overrides
Chrome DevTools lets you override any file on a website locally. CSS, JavaScript, even HTML. Changes persist across reloads. Perfect for testing fixes without touching source code.
6. CSS Grid/Flexbox Inspector
Firefox has the best CSS layout inspector. It overlays visual guides on grid and flexbox containers, showing you exactly where tracks, gaps, and alignment are happening. Chrome has a similar feature in the Elements panel.
7. Performance Recording
DevTools > Performance tab > click record > interact with the page > stop. You get a flame chart showing exactly what took how long. Find the slow functions, the layout thrashing, the long tasks. This is how professionals debug performance.
8. Lighthouse Audit
DevTools > Lighthouse tab > Generate report. Instant audit of performance, accessibility, best practices, and SEO. It gives you specific, actionable recommendations. Run it on every page you build.
9. Console as a Calculator
Type math directly into the console. 2**10 gives you 1024. Math.random() gives you a random number. Date.now() gives you the current timestamp. It’s a JavaScript-powered calculator that’s always one F12 away.
10. Measure Pixels
Chrome: DevTools > Cmd+Shift+P > “Show rulers.” Rulers appear along the edges of the viewport. Hover over elements to see their exact pixel dimensions.
For more precise measurement: the screen ruler gives you a draggable on-screen ruler. And the viewport width calculator helps you figure out responsive breakpoints.
The Meta-Feature
The real hidden feature of your browser is that it’s a full development environment. You can write code, debug applications, profile performance, test accessibility, and emulate devices, all without installing a single additional tool.
Press F12 and explore. You’ll find something useful every time.