Introduction to Dev Tools, v3

Step Through Debugging Exercise

Jon Kuperman

Jon Kuperman

Introduction to Dev Tools, v3

Check out a free preview of the full Introduction to Dev Tools, v3 course

The "Step Through Debugging Exercise" Lesson is part of the full, Introduction to Dev Tools, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Jon instructs students to use step through debugging to find out why the list isn't populating from the API call. A student's question about removing all breakpoints is also covered.


Transcript from the "Step Through Debugging Exercise" Lesson

>> Let me walk through the exercise itself. So there's an unordered list here on this exercise debugging called ul ID catfacts. So if we inspect the DOM and we go to elements and we go inside the article inside div. We can see here this ul of ID of catfacts.

And what's supposed to be happening, we have this file public exercises debugging.js in our repo exercises debugging. So here it is. So what's supposed to be happening is it's fetching this API of catfacts. It's calling to JSON on, then it's taking the results. It's going through each of them.

And it's making a new list item and appending it, but something's wrong. So what we're supposed to be seeing here under here is a list of facts about cats is a list of facts about cats. But something's going wrong with it. And so the idea is to start with the console, see if there's any errors and then from there, put a step through debugger and and figure out what's going wrong and and how to fix it.

And so that's the exercise. Before we get started do we have any other questions on it? And again, we'll meet back afterwards and we'll go through the whole thing together. So the question is, you use the debugger and you end up with a lot of breakpoints, how can you get rid of a bunch of them, I don't know off the top of my head.

So let me let me get in this console log here and see if I can find it. So let us see we have a bunch of them. So it is so you have them all in multiple files, everything like that. So you can't do it from here. You can come over to the sidebar with the break points over here.

Then you can right click on one and remove all breakpoints, and that'll get rid of all of them from all the files and then you just hit play one more time and it'll play through with no more breakpoints.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now