Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Lucas
Lucas

Posted on • Edited on • Originally published atlucasjanon.com

     

My favorite front-end debugging hack

TL;DR, the trick is:

setTimeout(()=>{debugger;},3000);
Enter fullscreen modeExit fullscreen mode

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 ☕️:

Debugging coffee tooltip

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!

Top comments(21)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
wisniewski94 profile image
Wiktor Wiśniewski
Full Stack Developer | UI/UX Designer
  • Location
    Nysa, Poland
  • Work
    Full Stack Developer at mohi.to
  • Joined
• Edited on• Edited

Great! Works for css hovers too! This saves me a lot of clicking in DevTools :)

CollapseExpand
 
lucasjanon profile image
Lucas
Building @ designstripe.com

Awesome that it helped 🙌

CollapseExpand
 
gtyrkicksin216 profile image
Ryan Wood
Dev, library author, passionate about all things TypeScript. I like long walks on the beach, coffee, & good whiskey
  • Location
    Cleveland
  • Work
    Senior Software Engineer
  • Joined

Is there a reason why you'd use this over the built in UI breakpoint additions in the inspector (break on: subtree modification, attribute modification, node removal)?

CollapseExpand
 
tomsherman profile image
Tom Sherman
Hacking on design systems and component libraries.
  • Location
    Norwich, UK
  • Work
    Frontend Developer
  • Joined

If you're using a framework like react then the UI breakpoints kinda don't work because all of the DOM updates are batched and scheduled.

CollapseExpand
 
lucasjanon profile image
Lucas
Building @ designstripe.com

That's definitely an option! Depending on the case it may not be as predictable as the hack, since sometimes nodes in the DOM are inserted before being displayed/styled.

CollapseExpand
 
mohammadwali profile image
Mohammad Wali
  • Joined

For me, this is like -> open dev tools -> open sources panel -> hover over the navigation -> press f8 and it will pause there :)

CollapseExpand
 
bastaware profile image
Christian Hessenbruch
  • Joined

👏👏👏

CollapseExpand
 
htnguy profile image
Hieu Nguyen
Full-stack developer, blogger, anime addict, and a video gamer. Founder @devsurvival.com.
  • Location
    Louisville, KY
  • Education
    Computer Science at The University of Louisville
  • Work
    Intern/Co-op at Rawlings Group
  • Joined

awesome tip. Really shows how the debugger is underrated and should be used more 😄

CollapseExpand
 
lucasjanon profile image
Lucas
Building @ designstripe.com

Definitely! There are cases in which only the debugger can help you 😅

CollapseExpand
 
ben profile image
Ben Halpern
A Canadian software developer who thinks he’s funny.
  • Email
  • Location
    NY
  • Education
    Mount Allison University
  • Pronouns
    He/him
  • Work
    Co-founder at Forem
  • Joined

Neat

CollapseExpand
 
carlosmori profile image
Carlos Mori
  • Joined

Nice bro!

CollapseExpand
 
lucasjanon profile image
Lucas
Building @ designstripe.com

Thanks my friend!

CollapseExpand
 
cnotv profile image
cnotv
  • Location
    Berlin
  • Work
    Senior Frontend Developer
  • Joined

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.

CollapseExpand
 
mkherlakian profile image
Maurice Kherlakian
  • Joined

Awesome trick!

CollapseExpand
 
lucasjanon profile image
Lucas
Building @ designstripe.com

Thanks, my friend!

CollapseExpand
 
djariss profile image
Davor Veselinovic
Owner at Worda
  • Location
    Odžaci, Vojvodina
  • Joined

Nice approach and very nifty trick. :)

Some comments may only be visible to logged-in visitors.Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Building @ designstripe.com
  • Location
    Argentina
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp