WDD 330: Web Frontend Development II

Testing and Debugging JavaScript

Overview

Ideally a well planned and designed solution to a programming problem is created before actual development and coding begins. Regardless of how well the programming logic and design is organized and seemingly complete, there will be errors. The errors include syntax, run-time, and logic errors and vary in complexity for a given program. Testing and debugging are critical components of any development cycle and there are methods and tools to aid with the process.

Prepare

• Watch: 🎦 Debugging JavaScript - developer.chrome.com
• Reference: 📑 JavaScript debugging reference - developer.chrome.com
• Read: 📃Strict Mode - MDN
• Read: 📃Exception handling statements - MDN

Activity Instructions

1. Complete the debugging workflow tutorial from the developer.chrome.com debugging video.
2. Be sure to bookmark/reference the JavaScript debugging reference from developer.google.com to use the table of Contents on the right side of the page to jump to specific DevTools debugging features.
3. Review the instance cases of "use strict" provided in these Try it Yourself examples on w3schools.com. Remove the "use strict" directive from the last Try it Yourself example on the page. What is returned by the alert message? Why?
   Answer

   The alert will not appear as this keyword refers to the object that called the function. Without 'use strict' that object is the Window object - which is not identified with the alert. 'use strict' helps to identify a problem that can be alerted.