Objectives

By the end of this chapter, you should be able to:

• Use the sources tab to create snippets
• Use the sources tab to set breakpoints to stop code execution
• Utilize the debugger keyword to write better code faster

Introduction to The Sources Tab

The developer tools in chrome are very powerful and useful tools that will help tremendously as you start to understand issues in your code. As a reminder, you can open up the developer tools by holding command + option + j on a mac or control + shift + j on a windows machine.

In this lesson, we will be talking mainly about the sources tab. After you open the developer tools, you can click on the appropriate tab labeled Sources. The tab allows you, the developer, to see the javascript code that is being run on your website. With the developer tools, you have the ability to stop the code at a certain point to see exactly what values variables are holding as the code is being run.

To demonstrate how to debug JavaScript code in the sources tab, we will use another feature of the developer tools called code snippets. Using code snippets, you can write and save pieces of javascript code which you can then run and debug. The following video will show you how to get to the sources tab, create a snippet, and create break points in the code to see what values different variables have as the code is being run.

Getting Started with the sources tab

Watch a quick walkthrough of the sources tab and check out the content below for some supplemental material:

Additional Sources Tab Features

If you would like to read more about the sources tab and some other useful tools you can find them at https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/step-code?hl=en

CodeSchool also offers a free course on the Chrome Dev Tools which you can find at http://discover-devtools.codeschool.com/