TW1 Debugger Quiz

This quiz is obligatory. You can do this quiz when you got to TW1.2 in the Tutorial.

In order to activate the Developer tools Debugger, you need to add a breakpoint. Add one in notifyObservers()

You can add a  breakpoint in two ways: Try Both!

1. write debugger;  in your source code at the desired point.

this.subscribers.forEach(function(callback){
    debugger;
    // TODO call the callback 
});

2. go to Sources, find the DinnerModel.js file and click on the line number of this.subscribers.forEach(). Note that in this case the developer tools UI offers you a choice between 

• a breakpoint in the body of notifyObservers (at forEach()) 
• or a breakpoint in the body of the anonymous function(callback).

Choose the function(callback) so we will get a breakpoint for each array element (like we do in (1) )

Now write at the Console:

model.setNumberOfGuests(5)  

The execution should pause in notifyObservers() due to the breakpoint, and you can start answering the questions.

A few of the coming questions refer to Scopes. Locate the developer tools Scopes. To understand JavaScript scopes see Slides , Canvas, Google...

Other questions refer to the Call Stack, that is, the function that called the function that called the current function (which is shown on top of the stack). Locate the Developer Tools Call Stack.

Note: The implementation of the Debugger view differs between browsers and languages, so things may show up differently in your browser.

For example in Firefox, the script scope may be missing and instead be called Block scope.
In chromium browsers (Chrome, Edge, Opera among others), the names should match up to what is used here, so if you can use one of them, all the terms should match.

If your debugger is in Swedish, these are some important keywords translated:
call stack: anropsstack
scope: omfattning
block scope: blockera (?)