The Sources Panel

Contact Us or call 1-877-932-8228
The Sources Panel

The Sources Panel

The "Sources" panel of Chrome's DevTools gives us the opportunity to add breakpoints ("pauses" in our code, where the browser will let us stop to review how things are going), to step through the execution of our code, and to watch the values of any given variable or expression. Tracking down that bug (hopefully just one!) in your thousands of lines of JavaScript code gets much easier if you can have the browser let you check the values of some variables each time you run through a loop and check out the current state of an array.

Let's look again at how we might use the tools from the "Sources" panel on our example page DebuggingTestingChrome/Demos/debugging.html. Right clicking on any part of the screen, choosing the "Inspect" from the popup menu, selecting sources, clicking on "debugging.html" from the left part of the panel gives us the following:

Chome DevTools Sources panel

We can click on the line number of any line of JavaScript code; in the example below we've clicked on line 18, in which we create a list-item node for a different Beatle on each iteration of our for loop:

Chome DevTools Sources panel

If we refresh the page, we see that Chrome pauses the execution of our JavaScript code each time we reach line 18 - pausing, in this case, in the middle of each loop. We can iterate through the loop using the "play" icon (highlighted in orange in the screenshot below) and we can see values for the various variables on the right side of the panel:

Chome DevTools Sources panel

We can use the "Watch" (in the upper right) to view the value of any variable or expression; in the example below, we clicked the "+" sign and added a watch for beatles, which lets us view the value of the array:

Chome DevTools Sources panel

You can try out the Chrome DevTools "Sources" panel in the next exercise.

Next