The Hello World of Chrome DevTools Hacking

Updated July 2019

Chrome DevTools is just a webapp, built out of JavaScript and CSS. And it’s very hackable. Now, you could write a patch for DevTools, but if you’re not ready for that but still curious, we’ll walk through how to hack on the DevTools in front of you.

  • Open DevTools to the Elements Panel
  • Undock DevTools
Image for post
Image for post
Undock via the DevTools menu in the top-left
  • Make sure Elements panel is visible
  • Use the keyboard shortcut to Open devtools (ctrl+shift+i or cmd-opt-i). You’re now inspecting the inspector.
Image for post
Image for post
This is sometimes called “Inspector Inception”.

Tweak DevTools’ CSS

  • Add this rule for a calming gradient behind the DOM:

#elements-content.elements-wrap { background: linear-gradient(to bottom, rgba(242,246,248,1) 0%, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); }

Image for post
Image for post
Oh yeah, so calm.

You can also just use the Styles in Elements panel as you normally would.

Tweak DevTools’ JavaScript:

  • In console run:


  • Open the result array, right click the 0-th item and select Store as global variable
  • Drop this into the console

temp1._tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, e => {
const elemStyle = e.data.view._parentWidget._tabsElement.style;
elemStyle.cssText = `height: 26px; background-color: #${Math.floor(Math.random()*16777215).toString(16)};`;

  • View your masterpiece by clicking around on the toolbar.
Image for post
Image for post

If this is fun, then you should try out the larger Chrome DevTools Contribution Guide which get you going in contributing code to the project.

The web, performance, and tooling. Also ❤z.