Feature Request: Ability to toggle highlight of an element to see its box model in the viewport

[Manjit Karve]

Hi,

The bounding box of an element is sometimes smaller or bigger than what is shown in the viewport, such as if its visibility is hidden, or it is laid out in a container that causes it to stretch (flexbox/cssgrid). In such cases it is difficult to observe the effect of styling changes on the element. I'm able to get around this sometimes by hovering on the DOM tree-node in the DevTools Elements tab, but that leaves the mouse unavailable to do other things.

Another alternative is putting the following code in my CSS:

#foo, #foo>*{background-color: rgba(255,255,255,0.1);}

This allows me to track the element and its children. However, it would be great if something in DevTools could do this.

Regards,

Manjit

P.S. This request started from this support tweet: https://twitter.com/laaltoofan/status/882547858292867076

[Bennie Copeland]

I second this. It's the ONE feature that I think the IE developer tools does better.

[Luke Hatfield]

+1

[Kayce Basques]

Does the Box Model chart in the Styles pane suffice? Or do you need to view in the viewport specifically, for some reason?

[Manjit Karve]

Hi Kayce,

Apologies for the late reply.

The Box Model chart requires the target element to remain selected in the DOM tree and still requires you to used the mouse pointer hovering over the margin/padding/border etc.. 

I'll give a example to explain my need better. Let's say I'm trying to tweak the :before and :after pseudo-elements for a box in order to give a "raised corner" shadow:

The pseudo-elements would have been partially obscured (they're shadows, so underneath another element) and their edges indistinct (they're shadows :) ). The only way to see their boundary is to hover over them in the element tree or on the box-model chart. Currently I need to hover the mouse over the element and keep it hovered over there while I tweak the width, height, box-shadow etc. I cannot use my mouse for any other navigation. If it were possible to toggle the highlight state for an element, say right-click > highlight in the DOM tree, the psuedo-element would remain highlighted while I went around using the mouse for other things like tweaking the shadow using the excellent shadow editor, or pick a color etc..

I hope I have explained it better this time around. Let me know if you need more clarification.

Regards,

Manjit

[PhistucK]

First, in case that was a problem, you can force the :hover state unconditionally (see the screenshot below).

Then, you can move to another element and back to your element with your keyboard arrows - that will keep the highlight on the page while you change its CSS properties.

It is not perfect, but it is something.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chrome DevTools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/ed3d4fee-3a60-46b3-838b-b8836ee28913%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Kayce Basques]

Try PhistucK's suggestion. I think it'll get the job done in this case.

[Manjit Karve]

Thank you for your replies, PhistucK and Kayce. I'm afraid I might have been unclear again. I use the "Force hover state" facility all the time. I'll try to explain in another way.

In the following pen https://codepen.io/manjitkarve/pen/OZPVme (just an anchor with padding and margin that turns red on hover) I can use the "Force hover state" functionality that PhistucK has pointed out to keep the link red. What I cannot do is toggle highlight of the entire element itself on the canvas while I use the mouse for other things like in the image below:

The only way to highlight the element on the canvas is by hovering over it in the DOM tree. I can't toggle that highlight. It is only available via hover of the element or by hovering over the margin/padding/border in the bounding box control under computed style:

I believe this kind of toggling (maybe via the computed style bounding box itself) will be useful for visualizing changes to the bounding box as you make them. This is particularly useful when they happen because of transforms, shadows and perspective distortion because it is not immediately apparent whether or not the bounding box has changed at all. For example, in this pen https://codepen.io/manjitkarve/pen/gvwyea (playing cards that can be tilted and flipped) the bounding box of the card is different from the boundary of the card image. The shadow is a descendant of div.card, but is not included in the bounding box. And to see how things change while you tweak rotation angles or something, you have to keep hovering on the element in the DOM tree while trying to tab through values in the styles section:

I hope I have made more sense this time around.

Regards,

Manjit

On Wed, Apr 18, 2018 at 8:56 PM, 'Kayce Basques' via Chrome DevTools <google-chrome-...@googlegroups.com> wrote:

Try PhistucK's suggestion. I think it'll get the job done in this case.

--
You received this message because you are subscribed to a topic in the Google Groups "Chrome DevTools" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-chrome-developer-tools/7vuOpsVQaGs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/04a6c189-82bc-4da2-8ddf-769f1e57bd15%40googlegroups.com.

[Kayce Basques]

Are you saying that you want to toggle the hover state on multiple items at once?

If so, have you tried right-clicking each element and selecting Force State > :hover?

[Manjit Karve]

Actually, I'm looking for a way to turn this blue highlighting on and off via toggling rather than hovering over its element in the DOM tree with the mouse:

There isn't currently any way to do that in Chrome :(. Hence the feature request.

Thanks for trying, Kayce. Saw your tweet over on Dev-tools twitter, probably triggered by this thread :)

Regards,

Manjit

--
You received this message because you are subscribed to a topic in the Google Groups "Chrome DevTools" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-chrome-developer-tools/7vuOpsVQaGs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/9d846fa8-d3ac-45cc-98a4-768289d37e3d%40googlegroups.com.

[Kayce Basques]

Ah, OK. Yeah, I skimmed your last reply so I figured I may have misunderstood.

I got it now, let me see if there's any way around that.

Yes, this thread did indeed inspire that tweet. Thank you for the idea :)

On Wednesday, July 5, 2017 at 1:55:43 PM UTC-7, Manjit Karve wrote:

[Manjit Karve]

Thank you, Kayce. Maybe there's a function that I can call from the console. 

Regards,

Manjit

--

You received this message because you are subscribed to a topic in the Google Groups "Chrome DevTools" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-chrome-developer-tools/7vuOpsVQaGs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/1e67165d-f952-490e-b51e-d6eef89da56a%40googlegroups.com.

[Andy Cochrane]

Hello all.

I came here to request this feature but did a search first. I'm happy to see that others would find this useful.

There have been many times where I wished this was possible and would like to throw in an emphatic +1.

To be clear, I'm supporting the request for an option to turn on (and lock) the highlighting of an element. One example use case would be so you can see exactly how an element's size and position changes in response to resizing the browser or changing css.

Ideally, the different ways to toggle the element highlight lock would be via a little button or checkbox in the bottom right of the Elements pane, a keyboard shortcut and a context menu option.

Cheers,

Andy

[Helder S Ribeiro]

I'd like to add my vote for this. It would be really useful make the node highlighting sticky when inspecting elements.

There's some "instant connection" Bret Victor argument to be made here vs using the computed layout box.

This is a follow up to a conversation with @ChromeDevTools on Twitter. Thanks for the attention!

https://twitter.com/ChromeDevTools/status/1024377843495518208

Cheers,

Helder

[Richard Honey]

This is such an important feature request.

 

I need to see the element's size, border, padding and margin continuously highlighted while I drag the window to the left and right, in order to have a clear visual of my changes as the css changes with the viewport.

 

A feature like this will be an insane time-saver!!! +1

[Tiago Parreira]

I have longed for this since I started doing web development.

Invaluable and a huge time saver.

+1. Very needed.

On Wednesday, July 5, 2017 at 10:55:43 PM UTC+2, Manjit Karve wrote:

[Andrew Lewis]

+1
I was looking for this today. I knew it existed, didn't realise it was only in IE though. I was sure it would be in Chrome but I guess not...

[Christian Toffolo]

+1

I second this too... could be really useful to continuously see the box model of the selected element while changing its properties.