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

BIT116: Scripting Lecture 06 Debugging and Troubleshooting

Today Quiz JavaScript: Debugging and trouble-shooting

Debugging JavaScript From Bing.com

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

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

Alerts & Logging

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

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

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

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 http://stackoverflow.com/questions/1215392/how-to-quickly-and- 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)

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!"

Do Exercises #1 - 4

Semi-Independent Debugging Investigation

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

Looking for more debugging tips http://www.webmonkey.com/ 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 http://stackoverflow.com/que stions/988363/how-can-i- debug-my-javascript-code http://www.w3schools.com/js/ js_debugging.asp Debugger window (F12 key) Console.log Debugger keywork Not actually all that great 

Do Exercise #5