Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

DOM Inspector doesn't automatically refresh after Javascript DOM manipulation

  • No replies
  • 1 has this problem
  • 12 views
rodrigo.santos
rodrigo.santos
more options

Hello,

I came across this issue in my company's web application. We have custom code that creates and populates an iframe, such as:

var frm1 = document.createElement("iframe"); $(frm1).css('width', width); $(frm1).css('height', height); document.body.appendChild(frm1);

When debugging the application, and executing this code step-by-step, after the appendChild call is executed, the iframe isn't visible in the Inspector tab. However, when I click the haircross icon after the iframe variable name "frm1", then the iframe will show up as expected in the Inspector tab.

In addition, this seems to affect the behaviour of the remaining code. We are using rasterizeHTML.js to render a screenshot of our web application, and it depends on the iframe being populated properly. When using Firefox, executing this code outside of debug mode, or executing it in debug mode without clicking the haircross, often results in an empty screenshot; but when the haircross is clicked and the iframe shows up in the Inspector, the screenshot will always work perfectly.

What could be the cause of this behaviour? Is it possible that Firefox is delaying the DOM operations, only forcing them when the element is directly inspected, and this subsequently causes the plugin to fail as the iframe "wasn't" initialized? Is there a way to force Firefox to execute all pending DOM operations?

Additional information that may be helpful in diagnosing:

  • The issue was tested in Firefox 81, both Windows and Mac versions. In Windows this behaviour will always happen, while in Mac it only happened when running the application in a private/incognito window.
  • The issue was also tested in the current beta version (82) and can still be reproduced there.

Thank you, Rodrigo Santos

Hello, I came across this issue in my company's web application. We have custom code that creates and populates an iframe, such as: var frm1 = document.createElement("iframe"); $(frm1).css('width', width); $(frm1).css('height', height); document.body.appendChild(frm1); When debugging the application, and executing this code step-by-step, after the appendChild call is executed, the iframe isn't visible in the Inspector tab. However, when I click the haircross icon after the iframe variable name "frm1", then the iframe will show up as expected in the Inspector tab. In addition, this seems to affect the behaviour of the remaining code. We are using [https://cburgmer.github.io/rasterizeHTML.js/ rasterizeHTML.js] to render a screenshot of our web application, and it depends on the iframe being populated properly. When using Firefox, executing this code outside of debug mode, or executing it in debug mode without clicking the haircross, often results in an empty screenshot; but when the haircross is clicked and the iframe shows up in the Inspector, the screenshot will always work perfectly. What could be the cause of this behaviour? Is it possible that Firefox is delaying the DOM operations, only forcing them when the element is directly inspected, and this subsequently causes the plugin to fail as the iframe "wasn't" initialized? Is there a way to force Firefox to execute all pending DOM operations? Additional information that may be helpful in diagnosing: * The issue was tested in Firefox 81, both Windows and Mac versions. In Windows this behaviour will always happen, while in Mac it only happened when running the application in a private/incognito window. * The issue was also tested in the current beta version (82) and can still be reproduced there. Thank you, Rodrigo Santos
Attached screenshots