The Hello World of Chrome DevTools Hacking

Paul Irish
Draft · 2 min read

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
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.
This is sometimes called “Inspector Inception”.

Tweak DevTools’ CSS

  • In your new devtools window, go to Sources, hit cmd-p, and open elementsPanel.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%); }

Oh yeah, so calm.

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

Tweak DevTools’ JavaScript:

On panel change, we’re going to modify the devtools toolbar background color.

  • In console run:

queryObjects(UI.InspectorView)

  • 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.
Trippy.

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.