1

I have a page with so many elements I dont need but I cant remove them because I dont see them in the html templates so I assume javascript is creating them at some point.

I would like to use Firefox developer tools to detect which functions are doing that in order to stop the page from creating those elements. What should I do? I use Firefox 53.0.3

Thank you.

Cain Nuke
  • 2,843
  • 5
  • 42
  • 65
  • doubt you can do that (and you are still using firebug?) – epascarello Jun 12 '17 at 16:29
  • Add a *MutationObserver*? – Jonas Wilms Jun 12 '17 at 16:29
  • Could you please elaborate a little more? – Cain Nuke Jun 12 '17 at 16:32
  • Note that [Firebug is officially discontinued in favor of the Firefox internal developer tools](https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/). – Sebastian Zartner Jun 14 '17 at 09:30
  • Please update your question to note which version of Firefox and Firebug you are using, what you've tried so far and, if possible, provide a link to the website you're trying to debug. You may also add screenshots showing what you see. At the moment it is very hard to reproduce your problem. – Sebastian Zartner Jun 20 '17 at 09:10
  • I updated my question with my firefox version. I cant provide a link because the site is not online. – Cain Nuke Jun 20 '17 at 16:17
  • Possible duplicate of [Detect what JS function is creating an element with Firefox tools](https://stackoverflow.com/questions/44976719/detect-what-js-function-is-creating-an-element-with-firefox-tools) – Martin Smith Sep 02 '17 at 05:59

1 Answers1

1

First of all, you should verify whether the HTML is really added via JavaScript or it's already part of the page source.

To do that, right-click the page and choose View Page Source from the context menu or press Ctrl+U. In the source view search for the element, e.g. via its ID or its contents.

If you find it, it is obviously added within the server-side script, so you need to check there where it's added. If you cannot find it, it's added via JavaScript.

If the element is added by a specific action you do on the page, you can use Firebug's feature called Break on Child Addition or Removal, which allows to stop the JavaScript execution at the line where the change happened. To do so, right-click the parent of the element and choose the above option from the context menu.

A second way to find out where the HTML is added is by setting an event breakpoint for the load event. To do that, switch to the Events side panel, right-click the load event handler and choose Set breakpoint from the context menu:

Set load event breakpoint in Firebug

Then reload the page. The script execution will stop at the related line. Starting from there, you need to step through the code until you reach the line where the element is added.

Having said that, Firebug is officially discontinued in favor of the Firefox Developer Tools and Firebug's Script panel doesn't work anymore in current versions of Firefox. (Also the option to set the breakpoint is missing.) Unfortunately, the Firefox DevTools are currently (as of Firefox 54.0) still missing the feature to break on DOM changes. There is already a bug report for it, though.

Having said that, the second option to stop at the page load is also available there. To do so, switch to the Debugger panel. In there click the button to expand the side panels (Firefox DevTools side panels expand button), then switch to the Events side panel. There you need to check the load event listener:

Set load event breakpoint in Firefox DevTools

Then follow the steps as described above, stepping through the code until you reach the line where the element is added.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
  • I didnt know that. But even if discontinued, if Firebug can help me identify the function Im okay with that. The element is already there when the page loads so I fail to see how can I identify the function by stopping the JS? – Cain Nuke Jun 14 '17 at 17:00
  • I've updated my answer to clarify that the first step is to check whether the element is really added via JavaScript and added a more detailed description how to debug this. Note, [starting from Firefox 57 Firebug definitely won't work anymore](https://groups.google.com/d/msg/firebug/G3wTXM01f9A/IVoSph27AAAJ), so at some point you have to switch to the Firefox DevTools (or use different browser developer tools). – Sebastian Zartner Jun 16 '17 at 06:40
  • Thank you for the explanation. But the option to set breakpoint is missing from my context menu so Im stuck there. The object is not there from the beginning. It appears suddenly but I dont need to do anything. It just appears. – Cain Nuke Jun 19 '17 at 05:47
  • As I wrote in my answer, Firebug is discontinued and its debugger doesn't work anymore in current Firefox versions. Therefore you also won't see the option anymore. Did you try the Firefox DevTools as suggested above? If my explanations don't help you, you should edit your question and provide some more info about the website (e.g. if it is using a framework) and, if possible, a link to it and describe what you've tried so far. – Sebastian Zartner Jun 19 '17 at 11:17
  • Okay, I will get them but seems I need to download a different browser. Is that correct? – Cain Nuke Jun 19 '17 at 20:37
  • No, the [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools) are part of Firefox for several years already. You can open them via F12 when Firebug is deactivated (or removed) or via Ctrl+Shift+I. – Sebastian Zartner Jun 20 '17 at 09:07
  • Okay, I got it. I knew it as the "inspector" I stopped using it after I found Firebug. I tried it now again but Im still unable to see the option to set breakpoint either. In fact I cant right click at all on the events. Your first screenshot is from Firebug, right? What version is that? – Cain Nuke Jun 20 '17 at 16:46
  • My first screenshot is from Firebug 2.0.19 running in Firefox 47.0, one of the last versions where Firebug worked completely. In the DevTools you don't have to right-click, but you need to check the checkbox besides the event. Please note, Stack Overflow is not a forum. Endless comment threads should be avoided. So please edit your question and try to give as much info and be as specific as possible while staying concise. – Sebastian Zartner Jun 20 '17 at 17:47
  • No, just refine your question to get better answers. Please see also [how to ask a good question](https://stackoverflow.com/help/how-to-ask) and [what to do when you get an answer](https://stackoverflow.com/help/someone-answers). – Sebastian Zartner Jun 20 '17 at 18:54
  • Okay I did so. I am still unable to detect what function makes the element appear. It appears like 20 seconds after the page finishes loading so I get not much time to do things. – Cain Nuke Jun 20 '17 at 22:44