-2

A page I'm working on has seemingly random anchor tags showing up all over the place, which is causing significant formatting issues. Those tags are showing up in Chrome DevTools but not the page source, which suggests that they were added via jQuery.

How can I track down where those mysterious tags are coming from? The page has a ton of jQuery files in use, both first- and third-party, so it's difficult to trace.

I've tried commenting out entire JS files, and I've also tried putting breakpoints before the issue manifests itself, but it hasn't amounted to anything yet. I'm hoping there's a more sophisticated way of going about it.

  • He no longer works for the company. Additionally, I'm looking for general debugging tips for cases like this, not an answer to this specific problem. I'm hoping to use those debugging tips to figure this out on my own. – jacobsowles Jan 26 '17 at 17:08
  • Is this page otherwise sensibly-designed, or is it a maintenance trap? Might be better just to rework it. – Robert Harvey Jan 26 '17 at 17:12
  • It's a couple days before launch, so reworking is not an option. – jacobsowles Jan 26 '17 at 17:27
  • Ah. Given the short time frame, might it be easiest just to use jQuery to remove the anchor tags, and then fix the problem the right way after the launch? – Robert Harvey Jan 26 '17 at 17:33
0

Setting DOM breakpoints is perfect for this issue.

https://developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints#dom

I can right-click on any parent element, then select Break On Subtree Modifications. Then, any time that element or any of its children change (add, remove, or update), it'll show me which line of JavaScript caused the change.

One problem I had with this was that the breakpoint kept going away after I refreshed the page. To circumvent this, I set a JavaScript breakpoint before any DOM elements rendered, refreshed the page, then added the DOM breakpoint. From that point, I could just keep hitting "Continue" in the debugger until the mystery DOM element rendered. This process is discussed in greater detail here:

https://stackoverflow.com/questions/34301836/how-do-you-preserve-chrome-dom-breakpoints-on-page-refresh

Not the answer you're looking for? Browse other questions tagged or ask your own question.