The Hello World of Chrome DevTools Hacking

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.

  • Open inspector.js and pretty-print it
  • ctrl-shift-p to open up the Jump to Function/Member Dialog
  • Select setCurrentPanel(panel, suppressBringToFront)
It’s the third one, here
  • Now within this function, set a breakpoint somewhere.
  • In your inspected DevTools window, select a new toolbar item (Audits, Resources, etc). This should trigger your breakpoint
  • Now back in your devtools, drop this into the console
this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, function(e){
 var elemStyle = e.target._tabsElement.parentNode.style;
 elemStyle.backgroundColor = ‘#’+Math.floor(Math.random()*16777215).toString(16);
}, this);
  • You can now remove the breakpoint and resume execution.
  • 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.