DEV Community

My favorite front-end debugging hack

Lucas on April 05, 2020

TL;DR, the trick is: setTimeout(() => { debugger; }, 3000); Enter fullscreen mode Exit fullscreen mode I've be...
Collapse
 
wisniewski94 profile image
Wiktor Wiśniewski • Edited

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

Collapse
 
lucasjanon profile image
Lucas

Awesome that it helped 🙌

Collapse
 
gtyrkicksin216 profile image
Ryan Wood

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)?

Collapse
 
tomsherman profile image
Tom Sherman

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.

Collapse
 
lucasjanon profile image
Lucas

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.

Collapse
 
mohammadwali profile image
Mohammad Wali

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

Collapse
 
ben profile image
Ben Halpern

Neat

Collapse
 
cnotv profile image
cnotv

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.

Collapse
 
bastaware profile image
Christian Hessenbruch

👏👏👏

Collapse
 
djariss profile image
Davor Veselinovic

Nice approach and very nifty trick. :)

Collapse
 
mkherlakian profile image
Maurice Kherlakian

Awesome trick!

Collapse
 
lucasjanon profile image
Lucas

Thanks, my friend!

Collapse
 
htnguy profile image
Hieu Nguyen

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

Collapse
 
lucasjanon profile image
Lucas

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

Collapse
 
carlosmori profile image
Carlos Mori

Nice bro!

Collapse
 
lucasjanon profile image
Lucas

Thanks my friend!

Collapse
 
ng_update profile image
Kieran

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....

Collapse
 
bmcminn profile image
Brandtley McMinn • Edited

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.

Collapse
 
ng_update profile image
Kieran

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....

Thread Thread
 
ng_update profile image
Kieran

Shit, Welcome to Dev!!!

Collapse
 
azollai profile image
azollai

Maybe I'm wrong but isn't Toggle Device Toolbar doing exactly the same thing in Google Chrome?