Closed Bug 1352121 Opened 8 years ago Closed 4 years ago

Highlighter stops working after a period of time

Categories

(DevTools :: Inspector, defect, P2)

Product:
DevTools
Component:
Inspector
Version:
55 Branch
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED DUPLICATE of bug 1668265

People

(Reporter: burleigh, Unassigned)

References

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:55.0) Gecko/20100101 Firefox/55.0 Build ID: 20170330030213 Steps to reproduce: STR: 1. Open a page, then open the developer tools. 2. Open the HTML inspector pane, then hover pointer over a DOM element to verify the visual element in the content area gets a highlight (outline, dimensions, etc). 3. Do other work or do nothing. After maybe 10, 15 minutes tops, the highlight behavior will stop working. That is, hovering over an element in the inspector pane will produce no visual highlight in the content area. Expected results: I've been noticing this for a few days in Nightly, currently: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:55.0) Gecko/20100101 Firefox/55.0 ID:20170330030213 CSet: 60d7a0496a3673450ddbc37ec387525148c32604 I found the same behavior in Nightly builds from 3/26, 3/19, and 3.1 before ending my search for the most recent, unbroken Nightly. I'd be surprised if this observation is legit -- I can't believe a Mozilla developer hasn't seen, reported or fixed this. Still, this is what I see.
Component: Untriaged → Developer Tools: Inspector
Summary: Devtools inspector highlighter stops working after a period of tome → Highlighter stops working after a period of tome
The behavior I saw is real and persistent -- I've been watching it all day. But I've also realized that the highlighter stops working only when I'm inspecting the site I'm developing now, served by an Apache vhost from my local machine (a MBP). Inspecting other sites does not exhibit this behavior even after hours with the inspector panel open on them. First suspicion: browser-sync cruft stuffed in the cache. Work on this site is so preliminary that there's nothing but CSS and HTML used on the page now.
Priority: -- → P2
The behavior I described *is* related to use of browser-sync [BS]. But the conditions required to reproduce it are very specific, so I'd guess few people would be affected by this. Here, I tell Gulp to start browser-syncing -- which is proxying an Apache virtual host: [14:24:58] Using gulpfile ~/Sites/wwwsite-law2017/gulpfile.js [14:24:58] Starting 'serve'... [14:24:58] Finished 'serve' after 26 ms [BS] Proxying: http://wwwsite-law2017.site [BS] Access URLs: ---------------------------------------- Local: http://localhost:3000 External: http://xxx:3000 ---------------------------------------- UI: http://localhost:3001 UI External: http://xxx:3001 Nightly opens the site at localhost:3000, no problem. BS has attached handlers to <body> for reset, click, keyup, submit. Now, if I open this site at its real local address wwwsite-law2017.site, with or without BS running, the highlighter is gone. In every other way the inspector panel seems ok. Even shift+ctrl+r doesn't restore proper behavior. But closing and reopening the developer tools does. The browser-sync tool is a nice Node-based "change any markup-style-script, every connected browser update" tool.
Summary: Highlighter stops working after a period of tome → Highlighter stops working after a period of time
I can confirm this bug is still present in the 54.0 release in combination with the latest version of browsersync. The 53.0 release did not have this issue.
Product: Firefox → DevTools

This just started for me with 82.0b4. The behavior is the same with BrowserSync and LiveReload.

Still happens on 82.0b5.
I can't figure a way to reproduce but it happens while using some kind of LiveReload or Webpack HMR.
It stops working until you open entirely new tab.

I am seeing this problem, too. It seems to happen after I make CSS changes and reload the page. I am forced to close the Inspector and reopen it to get highlighting working again.

I am also having this problem though it's only just started happening to me after updating to the latest 82.0b6 (64-bit) of firefox developer edition.

Highlighting of the relevant DOM element while mousing over the inspector just seems to stop working and I have to close/re-open the devtools to get it working again. Here's a video:
https://i.imgur.com/Q3nVhyU.mp4

I also get another issue where multiple DOM elements are highlighted for no apparent reason and get stuck that way, also requiring a close/re-open. This seems to happen mostly if I run my mouse over the inspector before it's had a chance to render the DOM and highlight its first element.
https://i.imgur.com/PbTc8CP.mp4

forgot to add, it particularly happens after a refresh of the page or a re-size of the window

(In reply to billyjean from comment #8)

forgot to add, it particularly happens after a refresh of the page or a re-size of the window

I noticed that instead of having to reload the page, you can also solve it by opening and closing the inspector, on the same page.
If you have the inspector open and reload the page, it stops working, and starts working again either on a different tab, or after closing and reopening the inspector.

This behavior is not present on Vanilla Firefox.

(In reply to mgangsal from comment #9)

(In reply to billyjean from comment #8)

forgot to add, it particularly happens after a refresh of the page or a re-size of the window

I noticed that instead of having to reload the page, you can also solve it by opening and closing the inspector, on the same page.
If you have the inspector open and reload the page, it stops working, and starts working again either on a different tab, or after closing and reopening the inspector.

This behavior is not present on Vanilla Firefox.

Yeah, what I meant was that I can trigger the devtools element highlighting to break by refreshing the page. sometimes just resizing the window to view the page at a different resolution is enough to trigger the problem.

Unfortunately I can't really avoid doing either action as I need to refresh pages to look at my new updates. It's becoming a real nuisance and makes the devtools almost complete useless.

I'm using an ancient Radeon HD 5770 graphics card if it makes any difference
I'm not using browsersync or any sort of auto-refresh so I don't think this is limited to browsersync as per OP's comments. I'm just running a barebones LXLE virtual machine with apache, php, mysql and netbeans IDE

This has the symptoms of two duplicate newly introduced bugs:

  • Bug 1668265 Highlighter breaks while refreshing page
  • Bug 1667368 Inspector node highlighting is randomly glitching

I'll keep this open while I investigate, but I expect the fix for Bug 1668265 to solve this one too.

Status: UNCONFIRMED → NEW
Ever confirmed: true
See Also: → 1668265
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.