🍿 Invoke debugger on delay from bookmarklet

Snacks (🍿) are my collection of recipes for solving problems. Often recorded (and cleaned up) from actual discussions where I'm involved in helping others with technical problems. Not all solutions are mine but I started collecting them in one place because you never know when you need one.

I learned a really cool trick today. And I'm excited it can be used as a bookmarklet because I'm a big fan of them.

You know how sometimes there are hard-to-debug frontend interactions in the web because clicking anywhere causes the element lose focus and hide? Yeah, I get those every now and then.

What you can do is run this code with dev tools open

setTimeout(()=>{debugger;}, 2000);

// Or as a bookmarklet:

javascript:(function()%7BsetTimeout(()%3D%3E%7Bdebugger%3B%7D%2C2000)%3B%7D)()%3B

and it will wait for 2 seconds – giving you time to set the UI into a state you want it to be – and then trigger a debugger session.

In a debugger session, elements don't lose focus so they don't hide and you can explore the DOM as you wish.

If you need less or more time, just adjust the number 2000 as milliseconds to your liking.

Brilliant, let me tell you.