Scribd
Upload
6 views

PerformanceTask Debugging

The document provides instructions for debugging JavaScript code using the developer tools in a web browser. It demonstrates how to set breakpoints, step over code, step into code, and view output in the console to debug a simple HTML/JS program that displays a message. Key steps include adding a debugger statement, setting breakpoints on specific lines, stepping over and into functions, and observing how the code is executed and output is displayed line by line.

Uploaded by

ace.subwatan18
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

PerformanceTask Debugging

The document provides instructions for debugging JavaScript code using the developer tools in a web browser. It demonstrates how to set breakpoints, step over code, step into code, and view output in the console to debug a simple HTML/JS program that displays a message. Key steps include adding a debugger statement, setting breakpoints on specific lines, stepping over and into functions, and observing how the code is executed and output is displayed line by line.

Uploaded by

ace.subwatan18
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

“Debugging”

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.

As I entered the “debugger statement” in the VS Code, the “Performance Task” disappeared in
the live server.

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.
As I resumed the debugger, the “Performance Task” appeared. This means that the debugger
function has stopped its activity.

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 orange highlight that was on the line 12 has transferred to the line 13
18.) What happens to the console if the Step Over button is pressed two (2) additional times?

After I clicked the stop over 2 times, I was transferred to another tab called “Grammarly-check.js”

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.

The highlighted words each time I click the Step Into button :
- console.log("after outer() call");
- let name = "outer";
- let str = inner();
- let name = "inner";
- return "Hello Justine Aaron Bemos!";
- return str;
- console.log(outer());
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