Scribd
Upload
103 views15 pages

07 TP Websysrtem

The document provides instructions on using the Developer Tools in Google Chrome to debug JavaScript code. It demonstrates how to set breakpoints, step through code using various buttons like Step Over and Step Into, and view output in the console at different points of execution.

Uploaded by

fanchasticomms
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
103 views15 pages

07 TP Websysrtem

The document provides instructions on using the Developer Tools in Google Chrome to debug JavaScript code. It demonstrates how to set breakpoints, step through code using various buttons like Step Over and Step Into, and view output in the console at different points of execution.

Uploaded by

fanchasticomms
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/ 15

lOMoARcPSD|41148607

07 TP Websysrtem

BS tourism management (STI College)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university


Downloaded by her cart ([email protected])
lOMoARcPSD|41148607

1. Create a simple HTML 昀椀le with the following syntax. Use PThtml as the 昀椀le name.

2. Then, create a JS 昀椀le with the following code. Use the correct 昀椀le name

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

3. Run the HTML 昀椀le on Google Chrome. If the steps above are done correctly, “Performance Task”
should be displayed.

4. Open the browser’s Developer Tools using CTRL + Shi昀琀 + I or by clicking the Customize and
Control bu琀琀on on the top right of the browser > More tools > Developer tools.
5. Screenshot the message on the console of the page.

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

6. Write the debugger statement in the console.log block in the PTscript.js 昀椀le. Place it before
calling the func琀椀on outer. Save the 昀椀le.

7. Refresh the browser and screenshot the console. Explain how the console displayed such output

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

- The output appears in the console before the outer func琀椀on call because it is part of the
debugger statement, which simply displays output without hal琀椀ng the execu琀椀on. The
debugger statement serves as a breakpoint where the debugging process occurs. When
encountering a debugger statement, code execu琀椀on halts or pauses. As a result, any code
under the debugger statement doesn't execute un琀椀l the debugging process proceeds.
Therefore, the console.log(outer) func琀椀on call displays its output before the outer
func琀椀on call because it is not subject to the debugging process at that moment.

8. On the browser, click the Resume bu琀琀on (the blue triangle icon rotated to the right).

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

9. Look at the console and explain why the console displayed such output.

- After clicking the resume button, the output appears in the sequence
"before outer() call," "Hello Peter Paul Jamandre," and "after outer() call."
This sequence unfolds due to the sequential execution of the code.

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

Initially, "before outer() call" is logged to the console. Subsequently, the


debugger pauses the execution. Following the debugger, the outer
function is invoked, triggering the invocation of the inner function
internally. The inner function returns "Hello Peter Paul Jamandre," which is
then logged to the console. Lastly, "after outer() call" is logged, marking
the conclusion of the execution.
.
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 bu琀琀on again. It will display the following:

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

12. Clicking the Resume bu琀琀on again will display the rest of the output. Try it

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

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

14. Remove the debugger statement on the JS 昀椀le. Save it and reload the browser.

15. Set the 12th line as the new breakpoint on the browser. Reload the browser.

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

16. Press the Step Over bu琀琀on (right next to the Resume bu琀琀on, the arrow arching over the dot)

17. What happens to the JavaScript code in the Developer Tools when the Step Over bu琀琀on is
pressed?

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

- When the Step Over bu琀琀on is pressed in the Developer Tools while debugging JavaScript
code, the debugger executes the current line of code and moves to the next line, but if the
current line contains a func琀椀on call, the debugger does not step into that func琀椀on.
Instead, it treats the func琀椀on call as a single step, allowing the code to execute within the
func琀椀on without pausing at each line. This is par琀椀cularly useful for quickly naviga琀椀ng
through code without diving into the details of each func琀椀on call.

18. What happens to the console if the Step Over bu琀琀on is pressed two (2) addi琀椀onal 琀椀mes?
-
The Step Over button in Developer Tools allows for precise debugging of
JavaScript code. Pressing it executes the current line and moves to the
next, skipping function calls. With subsequent presses, it continues
through the code, treating function calls as single steps. Throughout, the
console displays any outputs. This feature enables developers to
e昀케ciently analyze code execution and resolve issues.

19. Reload the page and click the Step Over bu琀琀on once

20. . Now, click the Step Into bu琀琀on (next to the Step Over bu琀琀on) and list the highlighted words
each 琀椀me the bu琀琀on is clicked.

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

21. Repeat the instruc琀椀on above, but this 琀椀me, click the Step Into bu琀琀on six (6) 琀椀mes and provide
the screenshot of the Developer Tools

Press 1

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

Press 2

Press 3

Press 4

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

Press 5

Press 6

Downloaded by her cart ([email protected])


lOMoARcPSD|41148607

22. . Submit the 昀椀nal version of the HTML and JavaScript 昀椀les in a ZIP 昀椀le.
23.

Downloaded by her cart ([email protected])

You might also like