Chrome's Hidden Features 99% of Programmers Don't Know

Yesterday, I was debugging a weird performance issue with my colleague Mike. The page was lagging like crazy for no reason. I casually pressed Cmd+Shift+P, typed "Coverage", and found the problem in seconds.

Mike was absolutely shocked: "Holy shit, what kind of insane operation is this? I've been using Chrome for three years and never knew this feature existed!"

To be honest, Chrome DevTools has so many hidden features it's ridiculous. 99% of programmers only use Elements to check styles and Console to print logs, thinking they're hot shit.

But that's just the tip of the iceberg! Today I'm going to reveal some of Chrome's hidden "black tech" features. Each one will let you show off in front of your colleagues and absolutely blow your mind!

Command Palette - My Favorite Hidden Feature

Shortcut: Cmd/Ctrl + Shift + P

This feature is absolutely my favorite, but I bet you've never used it. Press the shortcut and a search box pops up with hundreds of commands hidden inside.

A few I use regularly:

Screenshot Function - Type Screenshot Before, when taking screenshots for product managers, I either used QQ screenshot which only captured the visible part, or installed various plugins. Now I just type Screenshot full size and get the entire page in one click, including scrollable areas.

Code Coverage - Type Coverage
This feature has saved me countless times. You can see which CSS and JS code isn't being used at all. Delete this dead code and the page immediately loads much faster.

Sensor Simulation - Type Sensors Super useful when testing geolocation features - no need to actually go outside to test.

Rendering Debug - Type Rendering Can display page repaint areas, very useful for finding performance issues. When you see those constantly flashing green areas, you know where the problem is.

Code Coverage - Secret Weapon for Performance Optimization

Path: More tools → Coverage

I only discovered this feature last year, and now I can't live without it.

The operation is simple: click the record button, refresh the page, then you can see which code was used and which wasn't. The red parts are unused code.

The most memorable time was when our company project was loading super slowly and the product manager was nagging every day. Using this feature, I saw that we imported Ant Design but only used a few components, yet loaded the entire library - a whopping 500KB.

Another time I found a colleague imported the entire Lodash library but only used one debounce function. I thought, isn't this using a sledgehammer to crack a nut?

The most ridiculous was finding a polyfill file that wasn't needed at all in Chrome 80+ environments, wasting 100KB of loading. After deleting this dead code, page loading speed literally doubled.

Network Request Override - Online Debugging Magic

Path: Network → Right-click request → Override content

This feature is literally a lifesaver.

I remember once when there was an urgent bug online and users complained about white screens. But I couldn't reproduce it in the local environment no matter what, and I was sweating bullets.

Then I remembered this feature and directly intercepted the problematic JS file online, replacing it with the fixed local file. I verified the fix in minutes, then quickly deployed to solve it.

Another time, a designer said a button color was wrong, but changing CSS required going through the deployment process. I directly used this feature to replace the CSS file, let her see the effect online directly, confirmed it was fine, then submitted the code.

The biggest advantage of this feature is being able to test in a real environment, avoiding the embarrassment of "works locally, breaks online."

Performance Panel - X-ray Vision for Performance Issues

Everyone knows about this panel, but few people really know how to use it. I've only recently figured out some tricks myself.

The most useful is the flame graph, which shows how long each function executed. Functions that take a long time display wider, so you can spot problems at a glance.

Once I encountered a weird issue where the page was super laggy when scrolling, but the code looked fine. I used Performance to record the scrolling process and found a loop in a scroll event listener that executed hundreds of times with each scroll.

After finding the problem, I added debouncing and the page immediately became smooth.

Another time I found an animation dropping frames severely. Through the flame graph, I discovered frequent DOM manipulation during animation, causing constant reflow and repaint. After optimization, the animation was silky smooth.

This tool has a bit of a learning curve, but once you master it, solving performance problems is like having X-ray vision.

Device Simulation - More Than Just Responsive Testing

Path: Toggle device toolbar

Many people only use this feature to test responsive layouts, but it can simulate so much more:

• Network Speed: 3G, 4G, slow networks
• CPU Performance: Simulate low-end device processing power
• Sensors: Gravity sensing, geolocation, touch events

Especially CPU performance simulation - lets you experience low-end device lag on a high-end computer, very helpful for performance optimization.

Memory Analysis - Finding Memory Leaks

Path: Memory panel

JavaScript memory leaks are a pain point for many single-page applications. The Memory panel can help you pinpoint problems precisely.

Three analysis methods:

1. Heap snapshot: Memory snapshot, see current memory usage
2. Allocation instrumentation: Real-time memory allocation monitoring
3. Allocation sampling: Sampling analysis, minimal performance impact

I've used this feature to find many memory leaks:

• Event listeners not properly removed
• Timers forgotten to be cleared
• DOM references not released

Security Panel - Check Website Security

Path: Security panel

This panel can check website security configuration:

• HTTPS certificate status
• Mixed content warnings
• Security header settings

For production websites, regularly checking this panel can avoid many security issues.

Application Panel - Local Storage Management

Path: Application panel

Besides viewing localStorage and sessionStorage, this panel can also:

• Service Worker debugging: View registration status, update cache
• IndexedDB management: Directly operate local database
• Cookie editing: Modify, delete cookies
• Cache analysis: View various cache usage

I often use it to debug PWA applications, especially Service Worker caching strategies.

Experimental Features - Early Access to New Features

Path: Settings → Experiments

Chrome DevTools has many experimental features. Although unstable, they often have surprises:

• CSS Grid debugging tools: Visualize grid layouts
• Flexbox debugging: Show flex container and item relationships
• 3D view: Three-dimensional view of page hierarchy

Many of these features later become official. Early access lets you show off in front of colleagues.

Keyboard Shortcuts - Double Your Efficiency

Mastering shortcuts is key to improving efficiency:

Common shortcuts:

• Cmd/Ctrl + Shift + C: Element selection mode
• Cmd/Ctrl + Shift + I: Open DevTools
• Cmd/Ctrl + R: Refresh page
• Cmd/Ctrl + Shift + R: Force refresh (ignore cache)
• Cmd/Ctrl + F: Search in current panel
• Cmd/Ctrl + Shift + F: Global search

Advanced shortcuts:

• Cmd/Ctrl + Shift + P: Command palette
• Cmd/Ctrl + Shift + D: Switch to device simulation mode
• Cmd/Ctrl + [: Switch to previous panel
• Cmd/Ctrl + ]: Switch to next panel

Customize DevTools - Build Your Personal Tool

Themes and Layout

DevTools supports deep customization:

• Theme switching: Light, dark themes
• Panel layout: Bottom, right side, separate window
• Font size: Adapt to different screens

Extensions

You can also install various extensions:

• React Developer Tools: React component debugging
• Vue.js devtools: Vue application debugging
• Redux DevTools: State management debugging

Mobile Debugging - Remote Real Device Debugging

USB Debugging

Connect your phone via USB to directly debug web pages on the phone:

1. Enable developer mode and USB debugging on phone
2. Visit chrome://inspect in Chrome
3. Select the page to debug

This feature solves the big problem of mobile debugging - no more looking at console.log on the phone.

Real Cases - Solving Real Problems

Case 1: Slow Page Loading

Problem: Users reported slow page loading Analysis process:

1. Network panel to view request waterfall
2. Found an image request taking 5 seconds
3. Coverage panel found 60% of CSS unused
4. Performance panel found main thread blocked

Solution:

• Compress images, use WebP format
• Delete unused CSS, load on demand
• Optimize JavaScript execution timing

Case 2: Memory Leak

Problem: Single-page application becomes laggy after use Analysis process:

1. Memory panel took multiple snapshots
2. Comparison found certain component instances constantly growing
3. Located event listeners not properly removed

Solution:

• Remove event listeners when component destroys
• Use WeakMap to avoid circular references

Tips Collection

1. Quick Style Editing

In the Elements panel, double-click any CSS property value to edit directly, supports color picker, shadow editor, etc.

2. Copy Element Path

Right-click any DOM element to copy its CSS selector, XPath, etc. - very useful when writing automated tests.

3. Simulate Network Conditions

In the Network panel you can simulate various network conditions to test user experience in weak network environments.

4. Save Modifications

Code modified in the Sources panel can be saved locally and automatically applied next time you open the page.

5. Multi-device Sync

Log in with Chrome account to sync DevTools settings across multiple devices.

Final Thoughts

To be honest, Chrome DevTools has so many features that I haven't fully mastered them all myself. Every time I encounter a new problem, I discover some previously unnoticed features.

My advice is don't try to learn all features at once - that'll just confuse you. When you encounter specific problems, first think if DevTools has related tools, then try them out.

For example, use the Performance panel for performance issues, Memory panel if you suspect memory leaks, Coverage if you want to see code coverage. The more you use them, the more proficient you become.

Here's a little tip: Chrome DevTools features update quickly, so I recommend following Chrome's update logs - there are often surprises.

Finally, if you know other useful DevTools features, welcome to share in the comments. Let's exchange ideas and progress together!

---

How many of these features have you used? What other hidden features did I miss? See you in the comments!