Browser Devtools Workshop

“If debugging is the process of removing bugs, then programming must be the process of putting them in.”

  • Edsger W. Dijkstra

Debugging in code

Log statements:

  • console.log;
  • console.time;
  • console.error;
  • console.warn;
  • if (someBoolean) console.log;

Debugger statements:

  • debugger;
  • if (someBoolean) debugger;

Debugging in devtools (or IDE debugger)





  • Inserting logs
  • Inserting conditional logs


  • Set breakpoint
  • Set conditional breakpoint

Challenge: There’s some code to display the birthday for an array of users. They’re all fine besides this one. I know the user’s name is “Mark” but we have thousands of users and the API returns them in a different order each time. Set a conditional breakpoint in the code that iterates over the users and then find the bug. Is it an issue with the code or with the data?

While Debugging:

  • Watch expressions
  • Scope
  • Console/debug terminal

Challenge: There’s some function that doesn’t work correctly. We’re pretty sure we have a fix for it (include the fix here). Place a breakpoint near that code than run the code that could fix it in the console to see if it returns what we’re expecting.


Styles editor Challenge: Which styles rule do you have to disable in order for