Sorry, I don't know how to name that, tried to search looking for rulers, guides, grid and markup - no luck.

I'm speaking about blue dashed lines and the gray area. Usually when you're at inspector you move mouse over the code, and FF highlights the proper area. Now, after the area was selected, I was playing with colour (right pane with styles) to change it. Then, that grid remained persistent whatever I did and switched off only when I switched off the developer console, but this is not the way I'd like to have.

Update: Somehow it is related with style editor, because it highlights in the same way all areas with that style, not this particular only.

Update: FF 49.0.1, it goes off when close the developer tool or just reload the tab.

So how it can be switched off?

Grid highlighting multiple elements within a website

  • Which Firefox version is this? What's the website? Does this happen on other sites? Does it go away if you restart the browser? I suspect it's a bug - especially if you're using Aurora. – Bob Oct 7 '16 at 6:40
  • 1
    @Bob updated, FF 49.0.1, it goes off when close the developer tool or just reload the tab. I can't reproduce it intentionally, it sometimes happens. – Putnik Oct 7 '16 at 6:51
  • I have also ran into this randomly! In one case after 30min, it randomly turned off, . Even without a reload. But then it then randomly turned back on. Then later would flicker back and forth. This is with Firefox Quantum 66.0.3 (64-bit). It happened to me on a page I'd been working on for over a week without this happening. It seems to me to be a random bug. I could not manually trigger it on or off. And at times it would appear or disappear without me having clicked on anything, and also did not correspond to any hover actions. Maybe if computer memory gets low, this could happen ? – SherylHohman Apr 22 '19 at 15:42
  • I mention a possible side effect of computer memory, because hours later, sublime text started acting weird: shift - tab would no longer "untab", but instead deleted the selected text. When I realized memory usage was high, I rebooted, and the sublime text issue went away. I do not recall how close in time proximity the Firefox dev tools and the Sublime Text issues were. Only in hindsight do I wonder if that could have had any effect. Note, too, I have had very high memory usage on other occasions (where browser became almost unresponsive), but the Firefox Grid Lines issue did NOT present. – SherylHohman Apr 22 '19 at 15:48

I think you may have enabled the option to highlight all elements matching the edited CSS rule:

Highlighting elements matching CSS rule

Though this shows the box model highlightings for me and not the grids.

| improve this answer | |
  • Thanks for the suggestion. I use that feature often. Too, I have experienced the phenomenon OP describes - the entire screen mysteriously overlays dashed blue grid lines for every element on the page that extend the whole length/width of the viewport. In my case, the grid-line phenomenon was not only visually very different from the setting you suggest, but was also independent: Turning on/off any CSS selector highlighting had no effect on the grid lines. Finally, this happened page that did not use grid or flex, so a different feature, to show Flex or Grid lines, could not even be turned on. – SherylHohman Apr 22 '19 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.