搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

DOM Inspector doesn't automatically refresh after Javascript DOM manipulation

  • 無回覆
  • 1 有這個問題
  • 16 次檢視
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
附加的畫面擷圖