The Hello World of Chrome DevTools Hacking
- Open DevTools to the Elements Panel
- Undock DevTools
- 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.
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:
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%);
You can also just use the Styles in Elements panel as you normally would.
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)
- 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
var elemStyle = e.target._tabsElement.parentNode.style;
elemStyle.backgroundColor = ‘#’+Math.floor(Math.random()*16777215).toString(16);
- You can now remove the breakpoint and resume execution.
- View your masterpiece by clicking around on the toolbar.
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.