Debugging solutions

As a developer, you'll often need to debug your code, either while writing it or during deployment. Sometimes, debugging happens at a later stage when your code is already deployed to production and unforeseen issues are found.

With the SharePoint Framework, debugging primarily happens within your browser's developer tools.

Debugger statements using browser developer tools

Debugger statements are an ingenious way to add simple breakpoint-style elements to your code that can be tripped with developer tools in your browser.

1. To start with the debugger statements, add the debugger; statement anywhere within your TypeScript code, for example, as soon as you enter the render() function:

public render(): void {
debugger;
$(function(){
alert('hi');
});

2. Run gulp serve to bundle the solution and wait for SharePoint Workbench to load.
3. Add the web part on the canvas like you normally would.
4. Press Ctrl + Shift + I in Chrome to run Developer Tools.
5. Reload the page to trip over the debugger...