8 Lesser Known but KILLER Features of Chrome DevTools

The Chrome DevTools is one of the biggest reasons developers refuse to touch any other browser. But most of us only use a handful of features, remaining oblivious to the many more mind-blowing capabilities that get added silently with each release. Let‘s uncover some of these hidden gems!

Everyone has their favorite operating system, hardware platform, device type, form factor, etc. But one thing is common across the board – they are running the Chrome browser and only the Chrome browser! It‘s safe to say that the browser wars are over, and Chrome has won convincingly.

Windows users immediately download Chrome, ignoring all “recommendations” to use Edge. The same goes for Apple devices (especially MacBooks and larger screens), where even the most loyal Apple fans grudgingly use Chrome over Safari.

And if a device is not running Chrome, chances are high it’s a Chrome-compatible spinoff like Brave or Vivaldi. Yes, technically these browsers are not based on Chrome, but that‘s a separate discussion. The average user might be using these other browsers for ideological or niche reasons, but for developers, there’s no other browser except Chrome.

Even Chrome‘s reputation as a memory-hog gets brushed aside. The reason is simple – Chrome DevTools.

If you‘re reading this, you likely already know the DevTools well. But there are still hidden gems yet to be discovered. Let’s uncover some of them!

Design Mode

Developers often inspect an element and modify its HTML to preview changes. However, editing HTML directly in DevTools can be frustrating:

• Wading through nested tags
• Straining to find opening/closing brackets
• Dealing with ridiculous whitespace while editing text

It‘s even worse for designers unused to HTML/CSS.

Here‘s a screenshot from a page on this site:

The deeply nested HTML and mysterious CSS classes are typical on modern sites – the DevTools experience leaves much to be desired. 🤭

But there‘s a feature called Design Mode that can help in many cases. Using it, you can make live visual edits as if working in a spreadsheet or text editor!

Activating it takes a few steps, especially for non-developers:

1. Ensure the page you want to edit is loaded in the active tab
2. Open DevTools as usual (keyboard shortcut or mouse click)
3. Go to the Console tab
4. Click the first line next to the prompt to enable JS input
5. Type document.designMode = "on" and hit Enter/Return

That‘s it! Now you can freely edit the page visually:

Design Mode isn‘t a silver bullet – you can‘t easily copy/paste elements or change styling. But it solves use cases where content needs quick visual editing.

It seems like Google is testing the waters here. With good reception, more powerful editing capabilities will likely follow! 🤞🏻🤞🏻

Simulating Network Conditions

The Network tab in DevTools shows request data like:

• Type
• Headers
• Status
• Asset load times

With such usefulness, it’s no wonder the Network tab is widely used.

But there‘s an easily missed dropdown stating "Online". Click this to see options for throttling speed:

• Fast 3G
• Slow 3G
• Offline

This helps test site performance on slow networks or offline behavior.

Let’s see it in action. I‘ll set "Slow 3G" and reload this page:

On my 40 Mbps connection, assets load in under 100ms.

Now, with Slow 3G:

Loading times jumped to 5-10 seconds! Modern sites will be slow on 3G; whether optimizing for this is worthwhile depends on your goals.

Notice the warning icon – Chrome‘s way of indicating you‘ve made a non-default, persistent change. Unless you know what you‘re doing, reset it.

Interactive Color Picker

When inspecting DOM elements in DevTools, the CSS panel lets you see and edit styles.

Hidden among this is a color picker that appears when clicking a color property!

It‘s not bare-bones – you get:

• Opacity control
• Multiple color systems
• Sampling colors from the page

No more guessing values when experimenting with a site‘s colors! Many designers build sites directly in the browser – features like this are invaluable. 🙂

Monitoring Events on Page Elements

Tracking down bugs can be a nightmare when event logic is scattered across files.

Thankfully, DevTools can observe an element and log its events to the console. But there‘s no jQuery-style selection by class name.

To use it:

1. Inspect the element of interest
2. In the console, run monitorEvents($0, ‘mouse‘)
3. Interact with the element

This logged several event objects as I clicked, typed, and moved my mouse. The objects contain a wealth of information:

I encourage you to try this out – it‘s sure to save headaches in future projects!

Website Performance Reports

Today, website speed makes or breaks businesses. But how can you identify issues areas?

Hiring experts and waiting days for results is one option. But Chrome DevTools has you covered with Lighthouse.

To generate a report:

1. Load the page
2. Open DevTools
3. Go to the Lighthouse tab
4. Select options
5. Hit the blue "Generate report" button

A few seconds later, you‘ll have a detailed report like this:

The category scores show overall performance. Progressive web app capabilities are greyed out since this site doesn‘t have them.

Here‘s an excerpt from the Performance section:

Website owners and developers often lack insight into performance issues. Lighthouse suggestions are extremely helpful here.

This powerful tool is now built into DevTools yet remains underappreciated. It benefits business owners, developers, and sysadmins alike.

Code Editing Prowess

The Sources tab lets you access and edit loaded files. DevTools builds in conveniences for those used to IDEs.

For example, Ctrl + D (or Cmd + D on Mac) highlights all occurrences of a word. Holding Ctrl/Cmd while clicking gives multiple cursors.

Dive into the docs to take full advantage of code editing capabilities.

Controlling DOM Element State

When chasing particular behavior, you may need the element in a specific state. This can be frustrating, like when I waste time timing hover actions.

DevTools lets you easily change an element‘s state by right-clicking in Elements:

No more conditional logic or CSS tricks to test different states!

Tools Panel

The incredibly useful Tools panel is only visible via keyboard shortcuts. It brings together most DevTools functions under one roof.

Press Ctrl + Shift + P (Windows) or Cmd + Shift + P (Mac) to open it.

It holds surprises, like taking screenshots right within DevTools:

There are even options for capturing specific DOM nodes!

Explore this panel to unlock more of DevTools‘ power. For full-page screenshots, use the Top10SM Screenshot API.

Conclusion

Chrome DevTools contains many hidden and overlooked features. Some are experimental like Design Mode. Others get lost in the vastness of the DevTools UI and documentation.

But uncovering these tools can enhance your browsing and development workflow considerably. I hope this article revealed some new tools you can incorporate into your own process.

More importantly, I hope it demonstrated how much depth lies beneath the surface of DevTools. So next time you want to dig deeper or search for something specific, you‘ll know where to start exploring! 😆