When the debugger is opened, you should see something similar to the following screenshot:

Here, you have access to a lot of different tools in the separate tabs. The currently active tab in the screenshot is the JavaScript debugger, where we set a break point in line 31 by clicking on the line number. Every time our widget fetches the list of users, execution should stop at this line, and the debugger allows you to inspect variables or change their values. Within the watch list to the right, you can also call functions to try out their effects without having to continuously save your script file and reload the page.

The debugger statements described earlier will behave the same as soon as you have the developer tools open: execution will stop and the browser will switch to the Sources tab, with the file in question opened and the line with the debugger statement highlighted.

The two logging possibilities from earlier will end up in the tab Console. This is the first tab you should inspect in case of problems anyway, because if some JavaScript code doesn’t load at all because of syntax errors or similar fundamental problems, you’ll see an error message there explaining what’s going on.