Using Chrome DevTools' DOM Breakpoints feature allows you to quickly find the Javascript code that modifies a DOM element.
In Chrome developer tools, select the DOM element you want to monitor, right-click, and select Break on->Attributes modifications:
Then you can see the corresponding breakpoints in the DOM Breakpoints tab:
Then go back to Chrome and continue, and the Chrome DevTools debugger will automatically stop where the DOM properties change:
From the calling context of the debugger, we can see that the hide method on line 17 in the figure below sets the display:none attribute to trigger the DOM breakpoint.
To get more original technical articles from Jerry, please follow the public account "Wang Zixi" or scan the QR code below:
