How to Find the JS Script That Adds an Attribute to an HTML Element

When working with someone else's code that adds certain attributes to HTML elements, which breaks the layout, and this is done by an unknown JS script, finding the responsible piece of code can sometimes be a very difficult task. At times, this task may be nearly impossible without the ability to use debugging.

In this note, we will explore one of the debugging options in Google Chrome's DevTools that allows you to find the script (specific code) that modifies the attributes of an HTML element.

DevTool allows you to set DOM Breakpoints - breakpoints on DOM elements. For more detailed examples, I suggest checking out this article: https://blog.bitsrc.io/using-dom-breakpoints-with-chrome-devtools-2f60e1fafcb2

Here, we will examine a specific case and its solution.

Problem

On one of the websites, some script adds style="display: block" to all section elements on the page. This behavior breaks the layout because some of these elements should have the property display: flex.

The site has a bunch of different scripts (integrations) that could potentially be doing this. Logically guessing which script to look at is impossible.

How to find the script and specifically the piece of code that does this?

Solution

In Chrome's DevTool, you can set breakpoints on changes to HTML elements; we are interested in "Attribute modifications":

Right click on element > Break on > Attribute modifications

The difficulty here is that this breakpoint only works at runtime, and our page has already loaded and all scripts have executed. If we now set this breakpoint and reload the page, nothing will happen.

We need to stop script execution somewhere before the modification of the element, then enable the breakpoint and only then continue the execution of the JS script.

This can be done in various ways, for example like this: set a breakpoint on any script that executes before the event we need: