Chrome “Developer Tools” element - hide annoying yellow dimensions box

Question

How do I hide the annoying yellow box that appears under html fields when I hover over elements in the Chrome "Developer Tools" elements panel - it's driving me nuts as I can't see the bottom of my labels etc...

Answer 1

You might want to check Chrome 16 which got an improved element tooltip. Please comment on the bug and mention specific issues that you want to get fixed.

Answer 2

From the posted bug: "https://code.google.com/p/chromium/issues/detail?id=282493". If you hold keyboard Control (Ctrl) key before hovering the element (or command on a mac) the tooltip won't show. Not the ideal solution but it works as long as you know about it

Answer 3

You can pretty easily tweak devtools yourself. Basically, follow these instructions to get started.

Then, inside inspector.js, tweak WebInspector.highlightDOMNode, by applying this small patch.

1150,1151c1150
<     // Do not highlight the DOM node.
<     //this.highlightDOMNodeForTwoSeconds(nodeId);
---
>     this.highlightDOMNodeForTwoSeconds(nodeId);

Fore more info, check out this post on extending Chrome DevTools.