Chrome Dev Tools: Sources Tab

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.

[TheBaltLT]

what is the purpose of your head in *tutorial*? to increase focus on content?

[sinac.]

Yes, I know that's really helpful, but what's page, file-system, override, overrides, content scripts and snippets tabs under Sources tab?!