Scribd
Upload
12 views4 pages

07 Performance Task 1

The document outlines a performance task involving the creation of an HTML file and a JavaScript file, with specific instructions for running the HTML file in Google Chrome. It includes steps for using the debugger in the JavaScript console, explaining how the debugger pauses execution and how to interact with it. Additionally, it discusses the effects of using the 'Step Over' and 'Step Into' buttons in the debugging process.

Uploaded by

Franco Estavillo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views4 pages

07 Performance Task 1

The document outlines a performance task involving the creation of an HTML file and a JavaScript file, with specific instructions for running the HTML file in Google Chrome. It includes steps for using the debugger in the JavaScript console, explaining how the debugger pauses execution and how to interact with it. Additionally, it discusses the effects of using the 'Step Over' and 'Step Into' buttons in the debugging process.

Uploaded by

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

07 Performance Task 1 - ARG

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.

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.

EXPLANATION:The script is starting to execute from top to bottom, so it logs “before outer() call”
to the console. After that, the debugger statement is encountered but the debugger is not executing
any code yet, instead it pauses the execution and waits to interact with debugging environment. Once
I continue the execution in the debugger the next line of code is executed, which is the call to the
‘outer()’ function.

8. On the browser, click the Resume button (the blue triangle icon rotated to the right).
9. EXPLANATION: The debugger is stopped before the outer() that’s why the displayed is just
“before outer() call”.
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

17. EXPLANATION: When the "Step Over" button is pressed in the JavaScript debugger of
Developer Tools, the debugger executes the current line of code and then moves to the next line in
the script without stepping into any function calls, advancing the script's execution.

18. EXPLANATION: The debugger will continue to execute the next line of code in the script each
time, without stepping into any function calls on those lines. This means that if there are no
breakpoints or debugger statements encountered, the script will proceed to execute each line
sequentially, and there won't be any immediate impact on the console output. However, if there are
function calls or other statements that produce output to the console on those lines, that output will
be displayed in the console accordingly as each line is executed.

19. 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