1

This question is similar to How can I inspect disappearing element in a browser?, except it's the reverse.

I'm trying to debug which JS adds a bunch of rogue <iframe> aswift_1, aswift_2, etc. elements to the page, like so: enter image description here

I'd like to use Chrome Devtools (or Firefox) to pause execution as soon as such an element is added and inspect the call stack, hopefully finding the culprit.

Other ideas are welcome as well.

Artem Russakovskii
  • 21,516
  • 18
  • 92
  • 115

2 Answers2

0

Quickest way in chrome would be to take a look at either the network tab (for response) or do a global search using Ctrl+Shift+F on Windows and look for certain tags used in those elements which are being added to the DOM

RobC
  • 22,977
  • 20
  • 73
  • 80
Mav
  • 1
0

You can use this simple chrome extension. It will trigger the debugger AFTER element with id matching aswift_ is added(of course you need to open chrome dev tools first).

https://gist.github.com/maciejmackowiak/8043c8630004644144711f730ef45f1b

To activate this extension download -> unpack, open manifest.json and in line 8 change the example.com to the domain you want to inspect.

Then go to chrome://extensions/ Click on Developer mode and Load unpacked

When you will go to the page maching the domain this should show up after element with id starting with aswift_ is added: Paused in debugger

Now you can use "step over next function call(F10)" (you may need to hit it few times before it will loop thru all mutations and "go" to another function)

Maciej Maćkowiak
  • 1