The Sources panel Shows you all the JavaScript that has been loaded into the page and provides tools for editing front-end code and debugging JavaScript.
Open the Sources tab, and select one of your JS scripts. When a file is edited in the Sources panel the changes are reflected immediately on the page without a refresh.

Breakpoints
Click on the code line number to create a breakpoint there. Now when you run try to use test the script on site, it will stop when it reaches that line.
Once the beark happens, you can head to the console and test your code further more (e.g. by typing ‘this’, etc.)

Edit Breakpoints
Right-click on the breakpoint number and type in a statement to stop the script at a specific condition. For example, typing ‘currentCount == 10’ in the edit breakpoint will stop the script when the variable currentCount is equal to 10. This useful because you wont have to observe all the code while you test your script, setting these conditions will observe your code for you.

Step In/Out/Over
Click on the up or down arrows with a dot to step deeper into code or out of it. Clicking the down arrow will show you for example where the code stopped as well in the jQuery library file.

Continue
Click the play icon to stop the break and continue running the script.

Pause
Pressing it will catch occurring exceptions. It will pause code from running when there are exceptions.

DOM Breakpoints
As you test your code, you may want to delete some set breakpoints.
To do that, in the panel to the right titled as DOM Breakpoints, right-click on one of the list elements and click Remove Breakpoint.

Revisions
Right-click on CSS code area, then click Local Modifications.
A new panel reveals the exact times when changes were made to the code with the ability to view the differences.

Save Modifications
Right-click on CSS code area, then click Save As.