1. Control the flow with Breakpoints
A breakpoint is an intentional stopping or pausing place in a script, which was put in place for debugging purposes. When a breakpoint is reached, you can “step-through” the code line-by-line and see if things follow the right logic. This view also allows you to inspect the values of any variables to ensure they are what you expect them to be. A very frequent error is you try to use a variable, but it is undefined in the current flow. And thank to breakpoints, it is easy to trace back and see where the bug is.
There’re 2 ways to set a breakpoint: manually clicking on the line-number in the Source tab of Chrome Dev Tools, or programmatically using thein your scripts.
After that, you can control the execution flow with these buttons:
1. Make sure you understand your codes and logic before using breakpoints.
2. Too many breakpoints is a very bad idea!
3. A detailed guide to use the breakpoints will be available in another post.
2. Master the console API
The Console API is a collection of methods, which was defined by Chrome Dev Tools. It can be accessed via the globalobject, to log all kinds of information you need: a property value, an entire object, or even a DOM element. These information are displayed in the Console tab of Chrome Dev Tools.
While there’re a lot of useful methods in the Console API, the below methods are definitely the most popular:
This method takes one or more expressions as parameters and writes their current values to the console.
Display formatted information of arrays and objects as tables. Columns can be sorted, too.
Using together withto start and stop a timer (identified by a string label). Time is logged in millisecond.
Output a stack trace from the point where the method was called, including links to the specific lines in the script source. A blue counter on the left indicates the number of times that method was invoked at that point.
3. De-minify or prettify your codes
4. Live edit scripts while running (locally)
Dev Tools allows you to edit script files and run them locally. Just clicking the file you want in the Resources tab, making modifications and Save/Save as with Ctrl+S.
By Karmi Phúc.