1. Due Next Monday Assignment 1 Start early
There are several pieces that you need to figure out on your own
You are allowed to work in pairs
The same work from 3+ people will be treated as plagiarism / academic misconduct

2. BIT116: Scripting Lecture 06
Debugging and Troubleshooting

3. Today
Quiz
JavaScript: Debugging and trouble-shooting

4. Debugging JavaScript
From Bing.com

5. Chrome's Developer Tools
How to open this?
F12, or Control+Shift+I
Quick, Easy
Cryptic
Right-click, select "Inspect Element"
Easier to remember
Puts you into the 'inspect HTML element' panel, which isn't what we want for JS
Menu button  More tools  Developer tools
Cross-platform (same for Windows, Mac, Linux)
Easy to remember
It reminds you about Control+Shift+I

6. WARNING: Opening Developer Tools stops Live Preview
There's a bug in Brackets somewhere
Opening the Developer Tools will stop the Live Preview in that browser window
You can just close the browser, and click the Live Preview lightning bolt again

7. Alerts & Logging

8. How do you know what your program is actually doing?
Let's get the program to tell us
We can use (at least) two strategies: alert boxes & logging
Call the alert function
This will stop the program, pop up a dialog box that displays our message, and wait for us to click 'ok'.
It can get annoying very quickly
Call a logging function to print our message to the console

9. Alert boxes Let's look at alert_01.html
Type something in & click the button
Notice how the alert boxes keep popping up, telling you where the program has reached, and what you typed in
Try leaving the input box blank & clicking the button
Notice that we've chosen a message that makes it clear that the string is empty

10. Logging Let's look at logging_01.html
The only difference between this & alert_01.html is that we've replaced alert() with console.log()
Type something in & click the button
Notice that you don't see any dialog boxes
Or anything else 
Bring up the Developer Tools panel
Then click on the Console tab (red rectangle)
And you'll see your messages! (blue rectangle)
And which file & line logged them! (green rectangle) (Click on these to show the line)
Try it again, with an empty input box

11. Alerts vs. Logging
Alerts are quick, easy, work on all browsers since forever, and are great for small, focused debugging
Great for stuff like "Am I even calling this function correctly? Because I don't see any syntax errors listed in the Console but it never seems to run??!?!?!!?"
Logging is better for bigger problems because it's less intrusive
Logging can be left in the code just in case something goes wrong
You can then disable logging when you deploy it onto your production web server (i.e., the server that the customers will use)
See conveniently-disable-all-console-log-statements-in-my-code for suggestions on how to disable logging
Even if you leave the logging in by accident your customers won't (normally) see the messages (unless they open up their Developer Tools panel)

12. Using alerts/logging to debug a program: Adding two numbers
Look at debugging_01.html
Stuff to watch for:
Alert vs. log
Notice that num1AsString is undefined
Notice that the numbers are concatenated (glued together) instead of added up
Notice that we we're using this operator even though we haven't covered it in class yet. While we will cover it some later your first response here should be "Gee, I guess I need to know more about that so I guess I'll start searching the web for JavaScript addition doesn't add and then go from there!"

13. Do Exercises #1 - 4

14. Semi-Independent Debugging Investigation

15. Looking for more debugging tips
Debugging is an open-ended activity
It's very hard to teach as a predictable, reliable, step-by-step process
Each problem could be unique.
Each problem could be a duplicate of something you've seen before
Each problem could be somewhere in between
Let's look through several pages together to get a feel for what people suggest and how to read technical stuff that you find online

16. Looking for more debugging tips
2010/02/javascript_debuggin g_for_beginners/
Lots of good advice (keep the console open for errors, etc, etc)
Assertions
Alert
Alert vs. logging
'self-narrating' code
stions/988363/how-can-i- debug-my-javascript-code
js_debugging.asp
Debugger window (F12 key)
Console.log
Debugger keywork
Not actually all that great 

17. Do Exercise #5