DEV Community

Cover image for 6 ways to turn your browser into super-debug-hero (ft. node.js + next.js!)

6 ways to turn your browser into super-debug-hero (ft. node.js + next.js!)

Jayant Bhawal on July 03, 2024

Unlike some of my other posts, this one is going to be straight-forward. I'll cover some of the less-frequently-used browser devtools features tha...
Collapse
 
cvam01 profile image
shivam singh

Best to the point articleπŸš€πŸš€πŸš€πŸš€!!!
@jayantbh Next article on using performance profiler or react profiler for debugging infinite re-renders of components.

Collapse
 
jayantbh profile image
Jayant Bhawal

While writing this one, I actually thought that a post about using the browser and react profiler might be a good next option.

Collapse
 
shivamchhuneja profile image
Shivam Chhuneja

Let's go!!

Collapse
 
samadyarkhan profile image
Samad Yar Khan

Been building stuff in React/Next for the past 3 years and I still didn't know more than half of these tricks! Super Article @jayantbh

Collapse
 
jayantbh profile image
Jayant Bhawal

Thanks, my dude!

Collapse
 
aravind profile image
Aravind Putrevu

The console one is quite surprising to me. I have debugged using browser, but there is always new thing to learn. Lighthouse is a open-source project I believe.

Collapse
 
jayantbh profile image
Jayant Bhawal

Yeah! Technically Chromium is the open source one, and lighthouse is now part of it. It used to be a separate thing previously, but now it's in the browsers too.

github.com/GoogleChrome/lighthouse
For anyone interested in that repo.

Collapse
 
ayush2390 profile image
Ayush Thakur

Super informative article

Collapse
 
jayantbh profile image
Jayant Bhawal

Thank you, @ayush2390!

Collapse
 
whattheportal profile image
WTP | WhatThePortal.com

Gotta love the fight between the Next.js Image component sizing and the Lighthouse first-contentful (FCP) paint tug-of-war.

Nice writeup, good reading points!

Collapse
 
jayantbh profile image
Jayant Bhawal

That's a fight that ultimately benefits the devs, and the users ✨✨

Collapse
 
mrrishimeena profile image
Rishi Kumar • Edited

If you hate node.js debugging, try Errsole , Its the only solution who can help you to resolve the node.js issue in just minutes.

Collapse
 
jayantbh profile image
Jayant Bhawal

I wouldn't say anyone "loves" debugging. XD

But making it as painless as possible is definitely a priority. πŸ˜‚

Collapse
 
mrrishimeena profile image
Rishi Kumar

True, fixing bugs is a pain in the azz, especially on vacation days. πŸ˜‚
Debugged and fixed my real comment. πŸ˜›

Thread Thread
 
jayantbh profile image
Jayant Bhawal

Haha! That's more relatable! ❀️

Collapse
 
adithyakam profile image
adithyakam

Hey great post

Also can you add do an performance profiling specific post ? It would be very useful

Collapse
 
jayantbh profile image
Jayant Bhawal

Interesting to see some interest around it.
@cvam01 mentioned something along the same lines too. Might actually do that!