DEV Community

Cover image for Front End Debugging Part 1: Not just Console Log

Front End Debugging Part 1: Not just Console Log

Shai Almog on October 29, 2024

Instant Debugging with the debugger Keyword Triggering Debugging from the Console DOM Breakpoints: Monitoring DOM Changes XHR Breakpoints: Uncover...
Collapse
 
programmerraja profile image
Boopathi β€’

This is a great introduction to front-end debugging! I especially appreciate the emphasis on going beyond just console.log. The debugger keyword and DOM breakpoints are powerful tools I'll definitely be adding to my arsenal.

Collapse
 
dhanush9952 profile image
Dhanush β€’

Hi @codenameone ,

Thank you for your detailed post on front-end debugging! Your insights on the debugger keyword and DOM breakpoints are incredibly helpful as I transition from Java to front-end development. I look forward to the rest of the series!

Collapse
 
bennettpeter profile image
Peter Bennett β€’

Thank you. This is great.

Console logs are so convenient with javascript that I have not taken the time to learn other techniques. With Angular you just add a console.log to the code and it is instantly compiled and running. Remembering to remove all the console logs sometimes catches me.

Collapse
 
codenameone profile image
Shai Almog β€’

This is part of a series. I will delve deeper into how you can use Console.log more effectively too.

Collapse
 
joeschr profile image
JoeSchr β€’

Picked up a few new tricks, thanks! πŸ‘

Collapse
 
dsaga profile image
Dusan Petkovic β€’

How often do you folks use console.log vs other ways to debug? and why?

Even with knowing how to use breakpoints I often just console log for debuging...

Collapse
 
codenameone profile image
Shai Almog β€’

That's fair and in the browser it sometimes makes sense. Lot's of times it's more convenient to just add a logpoint instead of changing the code flow. In an upcoming post I'll discuss how you can get more out of Console.log.

Collapse
 
syedmuhammadaliraza profile image
Syed Muhammad Ali Raza β€’

informative

Collapse
 
pedbad profile image
Pedram Badakhchani β€’

Thank you for sharing :)

Collapse
 
jangelodev profile image
JoΓ£o Angelo β€’

Hi Shai Almog,
Top, thanks for sharing.

Collapse
 
tn_decor profile image
TN_Decor β€’

Picked up a few new tricks

Collapse
 
martygo profile image
Martins Gouveia β€’

Awesome. Thanks πŸ™

Collapse
 
schreiner_finden profile image
Schreiner Finden β€’

Thanks!

Collapse
 
a-bentofreire profile image
Alexandre Bento Freire β€’ β€’ Edited

Have you tried JsTraceToIX?

It solves many problems not handled by adding console.log!

  • Free and open-source.
  • Doesn't requires installation on the browser.
  • Requires minimal changes for debugging.
  • Supports aggregation between inputs and output.
  • Supports dynamic filtering.
  • Supports inputs and output naming.
  • Allows for React and Vue template expressions debugging.
  • Runs on the Browser and on Nodejs.
  • You can the stream debugging results.
  • It has a global switch to enable/disable.

And much more!

Github: github.com/a-bentofreire/jstracetoix
Website: devtoix.com/en/projects/jstracetoix

Collapse
 
codenameone profile image
Shai Almog β€’

This post was mostly focused on generic JS and not framework debugging. I actually don't get into JS frameworks at all. Thanks for sharing.

Collapse
 
a-bentofreire profile image
Alexandre Bento Freire β€’

JsTraceToIX is independent of any framework, it's for debugging generic JS mainly, but also supports frameworks.