How do we turn off the outlines round every element we interact with when devtools is open?

Developer Tools
#1

When I have devtools open and interact with the page, I see light green lines around the elements I’m interacting with. This could be useful but shouldn’t be the default I think. How do we toggle it?

1 Like
#2

Hi!

This shouldn’t be the case and I can’t think about any feature in DevTools which triggers green outlines. Can you post a screenshot?

#3

Thanks Julian, yeah it’s a very strange bug. I need to show it as a video. First is Firefox Dev Ed, then Firefox. The bug is only in the Dev Ed

#4

Thanks for adding the video! I can’t think of any DevTools feature that would create this kind of outline. A few additional questions:

  • does this happen with several pages
  • do you have any webextension (eg a DevTools webextension) in your DevEdition profile
#5

Hello Fergus, any fix so far? I just got this screenshot with my phone:

Screen Shot 2022-11-18 at 5.41.44 PM
Screen Shot 2022-11-18 at 5.41.44 PM1572×2116 676 KB

#6

Hi @ronyortizop

Do you always reproduce this issue? I can see you have a few devtools webextensions installed, could you share the full list of extensions you installed?

Did you try with a clean profile or just without extensions?

#7

I had the same issue and disabling react dev tools extension fixed it.

Though I’m not sure if it’s a feature from react dev tools because they nowhere mention it, and it doesn’t happen on chromium-based browsers.