Frontend Sorcery: Unleashing Chrome DevTools Magic Without an IDE!

Cup, Code, and Console.

Picture this: it’s the day before Christmas holidays, and you’re all set to publish your awesome feature. But wait, your team lead drops a bombshell — a backend bug in production! The backend team is already halfway to holiday mode, leaving you to fix it with only frontend access. Panic mode activated!

Hi, I’m Umar Ahmed, and I’ve been in that situation more times than I can count. But fear not, my friend, because today I’m going to share a tale of cups, codes, and consoles — a journey into web debugging that will make you laugh, scratch your head, and come out a debugging ninja using Chrome DevTools.

a simple unstyled cup

First things first, imagine our web feature is like a cup. It’s there, but it’s just a barebones skeleton. Enter the magic of CSS — no need for an IDE! I sprinkle a bit of “Hocus Pocus Overrido Contento”, and voila! The cup is transformed into something straight out of a wizard’s dream.

CSS content overrided and styled the cup

But the drama doesn’t end there. We want to see if our API throws error values. No problemo! We can override our API responses too. I crank up the error value from 60% to 120%, hit reload, and whoops! The cup breaks! Looks like we’ve got a missing condition culprit.

API response overrided in Realtime !

Do you know 70% of developers worldwide use console.log() for debugging. Somewhat like this:

console.log(“It works on my computer”);

Now, here’s where the real debugging magic happens. Forget about console.log(); that’s so last year. We’re talking about the superhero of debugging — the “debugger” statement. Breakpoints, real-time data flow, CSS inspection, animations — you name it, “debugger” has got it. We add the debugger, dissect our code line by line, and fix that condition so our cup never overflows again.

Chrome debugger have endless tools to make your application bug free !

So, there you have it — my journey of cups, codes, and consoles. Learn, connect, and grow with Google. Because when the bugs hit the fan, Chrome DevTools and a sprinkle of magic can turn any debugging nightmare into a tale worth sharing.

Stay curious, my friends!

References:

• https://developer.chrome.com/docs/devtools/overrides
• https://developer.chrome.com/docs/devtools/javascript
• https://developer.chrome.com/blog/new-in-devtools-113

Mentions:

• Inspiration: Addy Osmani, Ahsan Ayaz and Eric Bhatti
• Colleagues: Hassam Jawed, Hira Tariq, Danella Patrick and Samima Khan