UPDATE:
As Brad Parks wrote in his comment there is a much better and easier solution with only one line of JS code:
run setTimeout(function(){debugger;},5000);
, then go show your element and wait until it breaks into the Debugger
Original answer:
I just had the same problem, and I think I found an "universal" solution. (assuming the site uses jQuery)
Hope it helps someone!
- Go to elements tab in inspector
- Right click
<body>
and click "Edit as HTML"
- Add the following element after
<body>
then press Ctrl+Enter:
<div id="debugFreeze" data-rand="0"></div>
- Right click this new element, and select "Break on..." -> "Attributes modifications"
- Now go to Console view and run the following command:
setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
- Now go back to the browser window and you have 5 seconds to find your element and click/hover/focus/etc it, before the breakpoint will be hit and the browser will "freeze".
- Now you can inspect your clicked/hovered/focused/etc element in peace.
Of course you can modify the javascript and the timing, if you get the idea.
debugger;
) – Hope4Youwindow.setTimeout
to triggerdebugger
in 5 seconds, then hover over element and wait. – grimmdude