Scribd
Upload
43 views5 pages

Gripon, John Adrian G. Bsit-601: Create A Simple HTML File With The Following Syntax. Use PTHTML As The File Name

The document provides instructions for completing a performance task that involves creating HTML and JS files, running them in a browser, and using the browser's developer tools to step through the JS code. Key steps include writing debugger statements, setting breakpoints, and using the step over and step into buttons to control executing the code line by line.

Uploaded by

John Christian Gripon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views5 pages

Gripon, John Adrian G. Bsit-601: Create A Simple HTML File With The Following Syntax. Use PTHTML As The File Name

The document provides instructions for completing a performance task that involves creating HTML and JS files, running them in a browser, and using the browser's developer tools to step through the JS code. Key steps include writing debugger statements, setting breakpoints, and using the step over and step into buttons to control executing the code line by line.

Uploaded by

John Christian Gripon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Gripon, John Adrian G.

BSIT- 601

1. Create a simple HTML file with the following syntax. Use PThtml as the file name.

2. Then, create a JS file with the following code. Use the correct file name.
3. Run the HTML file on Google Chrome. If the steps above are done correctly, “Performance Task”
should be displayed.

4. Open the browser’s Developer Tools using CTRL + Shift + I or by clicking the Customize and Control
button on the top right of the browser > More tools > Developer tools.

5. Screenshot the message on the console of the page

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

- It did not display any of the statements from line 12 onward since I placed the debugger
statement before the console log block.
8. On the browser, click the Resume button (the blue triangle icon rotated to the right).
9. Look at the console and explain why the console displayed such output

- The outer function and Performance Task were once again shown on the console since I hit
resume, causing the codes to be executed.
10. Click line 15, the last line of the code. It is how a breakpoint is set. Refresh the page.

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

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 on the browser. Reload the browser.
16. Press the Step Over button (right next to the Resume button, the arrow arching over the dot)

17. What happens to the JavaScript code in the Developer Tools when the Step Over 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 (2) 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 (next to the Step Over button) and list the highlighted words each
time the button is clicked.

21. Repeat the instruction above, but this time, click the Step Into button six (6) times and
provide the screenshot of the Developer Tools.

You might also like