Menu
I have a web-page with the open Dev/F12 Tools (in Chrome).
When the page is resized, one of the observed div's style properties is modified certainly by some JavaScript code (chrome displays modified properties in purple):
Is there a way to know, what exactly JS code does it, track the JS source of the modification of a DOM element?
586
Press the Ctrl + U keyboard shortcut. Right-click an empty area on the web page and select the View page source or similar option in the pop-up menu.
Apart from clicking on "More tools-> Developer Tools", we can also open the element box using the following options: Clicking the F12 key. Using keyboard shortcut, "Ctrl + Shift + i" or "Ctrl + Shift + c" on Windows Operating System. The same command works on Chrome OS and Linux.
Learning how to inspect elements in a browser is beneficial, especially if you work in IT. Inspect Element lets visitors access and temporarily edit a website's front-end source code, including its HTML, CSS, JavaScript, and image files.
Yes, you can use Chrome's devtools DOM Breakpoints to do that:
style attribute's value)When the modification occurs, the breakpoint will stop JavaScript execution at that point and show the relevant script in the Sources tab.
If you ever need at some point to see a list of our DOM breakpoints, they're in the DOM Breakpoints tab in the panel to the right of the Elements panel.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
