Firefox is removing DOM elements from inspector

(Matthew Jonat) #1

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.

Firefox code inspector hangs when trying to investigate elements
(Patrick Brosset) #2

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.

(Matthew Jonat) #3

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?

(Mike Ratcliffe) #5

This could be related to Firefox code inspector hangs when trying to investigate elements

(Matthew Jonat) #6

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.

(Julien Wajsberg) #7

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?

(Matthew Jonat) #8

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

(Matthew Jonat) #9

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?

(Clayton Jones) #11

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.

(Jens Nachtigall) #13

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 Reading through this thread this sounds like hard to debug because nobody delivered clear reproducable steps.