JavaScript development workflow: tooling and practices

Debugger keyword

Put the debugger keyword in your script to initiate a debug session.

Google Chrome console

Use the “Sources” tab.

Useful sections:

• Breakpoints.
• Scope.
• Call stack.
• XHR/fetch Breakpoints.
• DOM Breakpoints.
• Global Listeners.
• Event Listener Breakpoints.

Inspect arrays and objects in the console: expand nested properties with the mouse and explore the structure.

Quick checks in the console only:

1999 * 433 + 123;
'Hello, world!'.length;