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!
Oldest comments (21)
Nice bro!
Thanks my friend!
Great! Works for css hovers too! This saves me a lot of clicking in DevTools :)
Awesome that it helped 🙌
Neat
awesome tip. Really shows how the debugger is underrated and should be used more 😄
Definitely! There are cases in which only the debugger can help you 😅
Nice approach and very nifty trick. :)
Awesome trick!
Thanks, my friend!
Awesome!!! I don't do back-end, but wouldn't another use case be to write a microservice to trigger a page rebuild weekly/monthly? Is that a ridiculous idea? Asking for a friend....
No, this particular trick would not be ideal since it would require your back-end JS process to run indefinitely. A better option would be a daemon or cron job process running on a given machine that initializes the new build and runs the deployment process on a set schedule like weekly/monthly/etc.
Projects with a lot of UI states and complexity would require some safeguards be in place, such as automated end-to-end (E2E) testing via a Continuous Integration (CI) service to ensure updated dependencies don't cause breaking bugs.
Yeah, I didn't even think about it running indef, but like I said I haven't really done any back-end yet. I'm trying to figure out how to rebuild/redeploy a site I built for my church whenever a new post is published to Wordpress and I was hoping against hope this would be a passable solution. You clearly know what you're talking about, can you point me to a microservice I can put into a firebase function to have it call and check?
Note: I think there is a plugin on wp that is designed to do exactly this, but the church isn't trying to pay 300/yr and I feel like if I were smarter, I could figure it out. But again, I'm on front-end and this is backend, so I'm kinda lost....
Shit, Welcome to Dev!!!
👏👏👏
Maybe I'm wrong but isn't Toggle Device Toolbar doing exactly the same thing in Google Chrome?
You can set in the DevTools a break on node change and other cases.
You just have to right click the inspected HTML element and it will behave like any other break.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.