Sometimes you have the luck that you must work on a project that is quite old an contains alot of scripts. Then, one day you are developing (or debugging) and you noticed that a certain html tag's attribute changed. You know that this is done by a script since that attribute does not have that value when viewing the source or when you look at what the backend renders. The next step is then obviously to find that script (and code line) so you can understand why it happens and, if needed fix it.

The most obvious way to find that script is to set a breakpoint the moment that attribute changed. The thing is, you can't set a breakpoint without knowing the javascript file and line number. Or can you??

As I found out recently, chrome's dev tools can actually set a breakpoint on the moment an attribute changes.

How to do it

To get straight to the point, you can you can right click on a html node and choose break on and then pick attribute modifications like this:

Chrome will add a blue dot left of the html tag:

Then, as soon as an attribute changes, the code will stop executing on the line that does the attribute changes

Additional tips

Since there are different ways in javascript to change an attribute (E.g. using jQuery, an additional js file,...) you might not end up on the code location you need to be. But on the right side of your dev tools you can see the stack trace. There you can see which function and file called the code you are currently breaking on.