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!
- Open up Developer Tools and go to "Sources" tab
- Hover your mouse to the element you are trying to inspect
- Without moving the mouse, hit F8 (You should see a "Paused in debugger" in your webpage)
- 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.
- 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!).