Debugging and Troubleshooting

2

Debugging JavaScript

From Bing.com

3

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

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

4

5

Alerts & Logging

Let's get the program to tell usWe can use (at least) two strategies: alert boxes & loggingCall 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

6

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

7

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 8

Alerts are quick, easy, work on all browsers since forever, and are great for small, focused debuggingGreat 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 intrusiveLogging 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) 9

Look at debugging_01.htmlStuff to watch for: Alert vs. logNotice that num1AsString is undefinedNotice 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!"

10

12

13

Semi-Independent Debugging Investigation

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

14

http://www.webmonkey.com/2010/02/javascript_debugging_for_beginners/

• Lots of good advice (keep the console open for errors, etc, etc)

• Assertions

• Alert

• Alert vs. logging• 'self-narrating' code

15

http://www.w3schools.com/js/js_debugging.asp

• Debugger window (F12 key)

• Console.log

• Debugger keywork

• Not actually all that great

http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code

16