1

I have a page with elements that JavaScript is creating at some point after the page loads and I want to remove them but I cant find the function that creates them.

I wonder if Firefox tools can help me with that? I use Firefox 53.0.3

Cain Nuke
  • 2,843
  • 5
  • 42
  • 65
  • https://stackoverflow.com/questions/10826916/how-to-set-dom-breakpoints-in-chrome – Scott Marcus Jul 07 '17 at 17:41
  • firefox please... – Cain Nuke Jul 07 '17 at 21:46
  • Why must this be done with Firefox? Isn't the goal to solve the programming problem? Why can't you simply do your testing in chrome? Then you will have your answer. – Scott Marcus Jul 09 '17 at 19:17
  • Because I use firefox so I am not very familiar with chrome. But if you can provide an explanation to achieve this with chrome considering that I will welcome it. – Cain Nuke Jul 09 '17 at 19:23
  • The link I provided will take you to a page that explains exactly how to set a DOM break point. this will cause your code to stop running at the moment that the element you set the breakpoint on is modified. Then you will know what code is causing the element to be changed. – Scott Marcus Jul 09 '17 at 19:28
  • So I should choose Subtree modifications and then where do I look to find the code? – Cain Nuke Jul 12 '17 at 23:28
  • @CaineNuke Yes. Then simply refresh the page and interface with the UI. When that subtree is modified the developer tools will show you the current state of the Dom in the elements tab. But, if you then click over to the sources tab you will be able to see what line of JavaScript is currently running. – Scott Marcus Jul 13 '17 at 00:02
  • Do i have to choose the option before the element appears? Because it appears so quickly it doesnt allow me time enough to get the menu and click it. – Cain Nuke Jul 13 '17 at 01:33
  • @CaineNuke Set the breakpoint first. – Scott Marcus Jul 13 '17 at 01:35
  • Before the element appears? – Cain Nuke Jul 13 '17 at 01:36
  • Yes, you set the breakpoint in the "elements" tab on a parent element that will wind up being modified. Then you refresh the page and interact with it so that whatever dynamic change is triggered. This will stop the browser at the moment the sub-tree of the breakpointed element is modified. When that happens, switch over to the "sources" tab and you will see what JavaScript was executing at the time. – Scott Marcus Jul 13 '17 at 12:35
  • [This video](https://www.youtube.com/watch?v=8OxJnivoewA) does a nice job demonstrating event breakpoints and DOM breakpoints. You could also use an event breakpoint that breaks on "DOM Mutuation" to accomplish your goal. – Scott Marcus Jul 13 '17 at 12:40
  • Thank you but its not working. There is not enough time for me to set the breakpoint since the element appears too fast. – Cain Nuke Jul 20 '17 at 22:20
  • You are not understanding me correctly. You set the breakpoint and then refresh the page. This way, the breakpoint is already set before any code executes. – Scott Marcus Jul 20 '17 at 22:55
  • I did so but the breakpoint wont be kept. It disappears after refreshing the page. – Cain Nuke Jul 20 '17 at 23:21
  • I don't know what to tell you. This is pretty simple stuff. There is something you're doing wrong in the process. – Scott Marcus Jul 20 '17 at 23:29
  • I can give you the URL privately so you can see yourself if you wish. – Cain Nuke Jul 21 '17 at 00:11
  • It just occurred to me that you are probably setting the breakpoint on an element that is being dynamically created and that's why the breakpoint isn't there when you refresh the page. You must set the breakpoint on a static element that pre-exists and one that you know will have descendant content dynamically added to it. Then, the breakpoint can be set and the page can be refreshed. – Scott Marcus Jul 22 '17 at 17:00
  • The element is static and it already exists. I set the subtree breakpoint there because the element in question (the one i want to delete) appears inside that subtree. – Cain Nuke Jul 25 '17 at 04:54

1 Answers1

0

right click inspect element, search code base for the ID or the class name of the div to see what spawns it. Without knowing if this is jquery, angular, or even the type of element I can not assist you more.

Surreal
  • 1,007
  • 1
  • 13
  • 29
  • I know the ID and class name but how can I use this to tell which function is creating the element? – Cain Nuke Jul 07 '17 at 21:39
  • You have to search your code base to find where the ID is being called from. I don't know your work environment or what packages you use so I can't really assist beyond that. After you find where the element is getting called from in your .js or .ts file I can help you understand more – Surreal Jul 09 '17 at 19:43
  • I found the Id being called by many functions in several JS files so I dont know which one is the one which is actually generating the element. – Cain Nuke Jul 09 '17 at 20:46
  • Are you using jqeury, react, angular, or just vanilla JS? – Surreal Jul 09 '17 at 20:48
  • I got no idea. This is a sample of my code: b=EHc(decodeURIComponent(a));b.zk()};$wnd.videoNotAvailable=function(a){var b=EHc(decodeURIComponent(a));b.Jk()};$wnd.initCallBackFuncsComplete=function(a){var – Cain Nuke Jul 10 '17 at 17:23
  • All caps help is not a suitable way to bump a post. Regardless it appears this is jquery. Since I [still] do not know what element you are looking for, you need to look for a jquery append of that element. Something like `$("#parentDiv").append("
    )` However, it could also be like `$(".actualDiv").html("
    Spawned Data
    ")`
     – Surreal Jul 11 '17 at 18:19
  • By searching the folder on Windows with all the JS files for the ID of the element I can find the function that has it. I can figure that out. However, this ID happens to be present in many functions throughout many files so im still unable to tell which one is the one Im looking for. – Cain Nuke Jul 11 '17 at 18:28
  • Unfortunately, this appears to be a problem I can not fix. The .append and the .html jQuery functions are those most common that affect the DOM directly. Without having access, knowledge, or idea of what the code base is, I [obviously] can not find what spawns your element. – Surreal Jul 11 '17 at 18:46
  • It would be enough help if you tell me a method to find out myself. – Cain Nuke Jul 11 '17 at 18:49
  • I have, you need to find the append or the html call that spawns your element you are looking for. The append or html are the most common jquery functions that affect the DOM. – Surreal Jul 11 '17 at 19:08
  • I know that, my question is how, given the tools I have. – Cain Nuke Jul 11 '17 at 19:11
  • Right click -> inspect element -> Debugger -> navigate to the correct file [ctrl+p to search] -> ctrl+f for suspect element – Surreal Jul 11 '17 at 19:28
  • It wont find it. The ID of that element is nowhere within the elements listed under sources. I can give you the URL of my page in private if you wish to try yourself. – Cain Nuke Jul 11 '17 at 19:37
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/148933/discussion-between-surreal-and-cain-nuke). – Surreal Jul 11 '17 at 19:42
  • are you still there? I could really use some help. – Cain Nuke Jul 12 '17 at 22:45
  • Reposting what I said in the chat So bad news, the code that contains your element you want to hide are minified that means you need to do this search on the code base, not with the production code I checked the two js files I had access to, prepare.js and config.js to see if there was anything related in there and found nothing – Surreal Jul 12 '17 at 23:52
  • Did you enter the room on top? – Cain Nuke Jul 13 '17 at 01:31
  • Yes, the code is minified. I can not debug minified code. You need to track it down from the codebase – Surreal Jul 13 '17 at 02:33
  • Did you see the element with the ID I sent you? – Cain Nuke Jul 13 '17 at 03:58
  • I saw it appear in the DOM once, then i checked the js files available to me and they were minified so I could not find what spawned it. – Surreal Jul 13 '17 at 12:52
  • I see. The only files that contain that are called cache.js and there is many of them. I dont know if you saw those on your end. – Cain Nuke Jul 13 '17 at 17:09
  • I can do a double check tonight, but I believe it's clear that you need to go the code base to solve this issue – Surreal Jul 13 '17 at 17:20
  • Sure. The problem is that I have several files that contain a function like that. – Cain Nuke Jul 14 '17 at 05:01
  • There is nothing I can do on my end; I just did a double check and it was minifed code that was applying the div to the DOM. Without being too brash, if you can not find what is appending into the DOM perhaps there is another developer there that can help you out – Surreal Jul 16 '17 at 23:02