TL;DR, the trick is:
setTimeout(() => { debugger; }, 3000);
I’ve been using that line of code for years. I use it once in a while, but those times, it saves me from a big headache.
You may be asking yourself… really? Can I delay a debugger statement? Why would I even need to do that? Why am I reading this post?
Chill, I have a gif to answer all your questions. I’ll bring a coffee website as our example since we all love coffee ☕️:
The best use case for our hack is whenever we need to change or check styles in DevTools and the element gets closed if we move the cursor or press any key.
With that line of code, we can just put the cursor whenever we need it and wait for the debugger to start by itself without doing anything.
I hope your next impossible-to-debug tooltip finds you ready with this great hack 🚀.
Let me know in the comments if you find another use case!