Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome "Developer Tools" element - hide annoying yellow dimensions box

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

See example image

like image 828
Rob Avatar asked Feb 14 '11 10:02

Rob


People also ask

What is the orange box in inspect element?

Inspect Element Components The orange below visually displays this element's margin-bottom property, and in this case indicates there are no side or top margins and no padding properties by the lack of being displayed.

How do I hide elements in Developer Tools?

We can hide an element by inspecting it with Chrome DevTools, right-clicking the element under the Elements tab, and choosing the Hide element menu from the context menu. If you're a fan of using the shortcut, then pressing the <kbd>h</kbd> key has the same effect.

How do I stop DevTools from popping up in Chrome?

Start Google Chrome with the “—disable-dev-tools” command line switch to prevent the “Developer Tools” feature from running.

What is orange in Chrome dev tools?

The colors are the following: Orange is Margin. Yellow is Border. Green is Padding.


1 Answers

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

like image 116
Brandon Avatar answered Sep 27 '22 18:09

Brandon