This is specifically about firefox developer edition.
I am currently building a site and when I go to inspect something sometimes the DOM just seems to stop and doesnt show me all of the children elements that I need (it should show everything really)
See the screenshot for an example.
The container div does have children and you can even see the styles for children in the styles panel but the DOM just seems to stop there. This has happened a few times and I’m not sure why.
That’s very odd indeed.
Can you easily extract a simple web page where we can see it fail like this? If we can reproduce the issue ourselves, it would be a huge help for fixing it. Otherwise it might be really hard.
Another thing that may help is if you have errors in the browser console when that happens (you can open it with ctrl+shift+J). If you do, please paste them here.
Unfortunately it just seems to happen randomly, but once it happens it wont go away until i close and re-open the browser.
I was using it on a Mac with a webpack development environment using browsersync to serve the page…if that helps?
This could be related to Firefox code inspector hangs when trying to investigate elements
Has there been any progress on this? I find it incredibly frustrating but really like Firefox developer edition and dont really wanna switch back to chrome.
I can give more information about my work environment but I I still have no idea what is causing it although it seems to happen more often when I am working in responsive design mode.
This issue was happening at work on a mac although now I work from home in Linux…apart from both operating systems being unix based the only other thing thats the same is my dev environment using webpack and browsersync to serve the sites. At home I have no plugins on firefox so it isnt a plugin causing the issue.
If there’s any other logs or anything you need me to provide I will.
In your first message, you wrote “This is specifically about firefox developer edition”. Does that mean you don’t have the issue in other versions?
In all honesty I havent tried in normal firefox although I used to dev in Firefox a few years ago and didnt get this issue…I realised things have changed in Firefox in the last few years though haha.
I’ll spend the next couple days just using normal firefox and report back
Been using normal Firefox and it is happening.
Normal Firefox has no plugins (I haven’t used it in this OS I am using before)
My guess is its something to do with serving the pages through browsersync?
I have recently started a webpack project and am experiencing the same issues where the inspector has no elements apart from the tags.
The project I made used this GitHub project as a base.
I ran into same problem. Inspector is showing ohnly empty tags, although the elements are shown in browser window. It happens often when I’m using it as playground for styles and switch between reload page and opening some elements for changing styles very quickly. But I can’t figure out a specific order of steps to reproduce the bug. I have the normal version 61 on win10 and only adblocker plugins. It is really annoying.
Based on the linked github code maybe you or @legomaennchen could describe the steps to reproduce (if it’s not intermittend) and file a bug on bugzilla.mozilla.org)? Reading through this thread this sounds like hard to debug because nobody delivered clear reproducable steps.
+1 on this. However I dont use browser sync extension.
I work on alot of magento 2 sites, and these seem the worst for this issue.
It occurs alot for me and is very frustrating, forcing me to use chrome alot of the time 
Been putting up with this for months but losing patience.
I’d say it was intermittent with no clear way to reproduce, sometimes its very sticky. I find the only way to stop is clearing cache/restarting.
I’ve noticed if I’ve used grunt to recompile less files (working in developer mode) it happens alot less often.
