In Google Chrome console, how to see where and how tag is modified?

Question

I am working on a website based on Prestashop, and there is a tag which classes are changed (from "col-md-12" to "col-md-6") when one activate a switcher.

I would like to be abble to see how and where this changed is made in the javascript code (I suppose it must be Javascript that make the change).

Thank you

Answer 1

1. Open chrome developer tools ( F12 on Windows/Linux, Command+Option+I on Mac).

2. Click on the element picker at the top-left corner of the devtools panel.

3. With this tool selected, find (in page) and click on the element whose attribute is changed at runtime. The tag must now be highlighted in devtools panel too. Right-click the highlighted tag in devtools.

4. In the pop-up menu, hover over Break on and select attribute modification .

5. Click the switch that changes the class to col-md-6 .

Please note that this will pause the execution every time one of the attribute is modified, which includes addition/removal of an attribute or change in their values.