Download as pdf or txt
Download as pdf or txt
You are on page 1of 7

TAMAYO, Krystin Marga G.

BSIT – 601

Web Systems and Technologies

07 TP 01

1. Simple html file with the file name, PThtml

2. Create a JS file with the following code


3. Run the HTML file

4. Open the browser’s developer tools


5. Screenshot the message on the console

6. Write the debugger statement in the console.log block. Place it before calling the function outer.
7. Refresh the browser and screenshot the console. Explain how the console displayed such output.

I put the debugger statement before the console log block that is why it did not display any of the
statements from line 13 onwards.
8. Click resume on the browser
9. Look at the console and explain why the console displayed such output

I clicked resume so the codes were run and this is why the outer function has been displayed on
the console and why Performance Task has been displayed once again.
10. Click line 15. It is how a breakpoint is set. Refresh the page.

11. With the breakpoint on line 15, click the resume button again. It will display the following:
12. Clicking the resume button again will display the rest of the output.

13. Re-click the 15th line to remove the breakpoint.


14. Remove the debugger statement on the JS file. Save it and reload the browser.
15. Set the 12th line as the new breakpoint. Reload.
16. Press the step over button.

17. What happens to the JavaScript code in the developer tools when the button is pressed?
The “console.log(outer());” is highlighted and in the console tab, it displays “before outer() call”
18. What happens to the console if the step over button is pressed two additional times?
The console displayed the whole console log block and displayed the function again.

19. Reload the page and click the step over button once.
20. Now, click the step into button and list the highlighted words each time the button is clicked.
The highlighted words are “let name = “outer”;”
21. Repeat the instruction above, but this time, click the step into button six times and provide the
screenshot of the developer tools.

You might also like