Chrome Dev Tools: Sources Tab

Channel:

freeCodeCamp.org

Subscribers:

10,700,000

Published on August 24, 2015 10:04:25 PM ● Video Link: https://www.youtube.com/watch?v=CoESC2XGZLg

Duration: 1:39

15,513 views

127

Info and mini-lesson on the 'Sources' tab of Chrome Dev Tools. Check out more in-depth documentation here: https://developers.google.com/web/tools/javascript/breakpoints/

The 'Sources' tab is most useful for debugging JavaScript. The bigger your project is, the harder it can be to find exactly where a problem occurs.

You can select different parts of the code to be 'breakpoints', checkpoints that will stop the code at that exact moment.

There are different breakpoints you can watch for, like for a specific line of code, on a DOM event, a server request called XMLHTTP request, or a javascript event.

When you set a breakpoint, the browser pauses everything when it interprets that line of code or event.

By slowing everything down and giving yourself a chance to examine what's happening at every spot you've set, you can keep track of exactly what's happening in the page or app.

Once all of the breakpoints are set, you can step through the code and examine the state of your page or app at every breakpoint.

Just like with elements, you can live-edit through dev tools, but remember to save those changes however you can so your progress isn't lost.