Inspecting Dynamically manipulated HTML elements

Do you ever experienced inspecting an element that changes its styling, child, attributes etc when it gets hovered? By the time you move your mouse to DevTools to inspect it, the element you are trying to inspect already had changed its state!

Posted by Darwin Biler on June 13, 2020

Chrome Devtools "Elements" tab allows you to inspect elements currently displayed in the webpage. But the problem is, what if you want to inspect an element in the state wherein it is currently being "hovered" by your mouse?

This is due to in able to "inspect" the element, you need to move your mouse into Elements tab itself, triggering the "onmouseleave" event in the very element you are trying to inspect!

The Solution

  1. Open up Developer Tools and go to "Sources" tab
  2. Hover your mouse to the element you are trying to inspect
  3. Without moving the mouse, hit F8 (You should see a "Paused in debugger" in your webpage)
  4. Click on the "Elements" tab. Now, the styling, attributes etc is displayed properly in "Styles", "Computed" panel in the right side. So go ahead and do your thing.
  5. Once done, click the "Resume script execution" button

Did you find this useful?

I'm always happy to help! You can show your support and appreciation by Buying me a coffee (I love coffee!).