Debugging and Troubleshooting
Quiz
Finish the jQuery topic from last lecture
JavaScript: Debugging and trouble-shooting
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
4
 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
5
Alerts & Logging
6
 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
7
 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
8
 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
9
 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-andconveniently-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
10
the messages (unless they open up their Developer Tools panel)
 Look at debugging_01.html
 Stuff to watch for:
 Alert vs. log
 Notice that num1 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!"
11
 Look at debugging_02.html
 I'll give you some help by pointing some stuff out, but also give you a chance to
practice this stuff semi-independently
 Stuff to watch for:
 Read the on-page explanation carefully so it's clear what the program should do
 Try it out and see if the program is actually doing this or not
 Look over the code
 You've see for loops in BIT 115 so you should be familiar with the loop, even if you don't know all the
details.
 Examine the log statements (there are a lot of them)
 Work in groups of 2 or 3 to figure out what the problems are, and how to fix them
 We'll present them
12
13
Semi-Independent Debugging Investigation
14
 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
15
 http://www.webmonkey.com/
2010/02/javascript_debuggin
g_for_beginners/
 http://stackoverflow.com/que
stions/988363/how-can-idebug-my-javascript-code
 http://www.w3schools.com/js/
js_debugging.asp
•
Debugger window (F12 key)
Lots of good advice (keep
the console open for errors,
etc, etc)
•
Console.log
•
Debugger keywork
•
Assertions
•
Not actually all that great 
•
Alert
•
Alert vs. logging
• 'self-narrating' code
•
16
17
 Using the Chrome console: https://developers.google.com/web/tools/chrome-
devtools/debug/console/console-ui?hl=en
 https://developers.google.com/web/tools/chrome-devtools/debug/
 Setting breakpoints: https://developers.google.com/web/tools/chrome-
devtools/debug/breakpoints/add-breakpoints?hl=en  mostly stuff we're not using, but good
to skim over & remember that "there's more features here" in case you need it later
 Stepping through code: https://developers.google.com/web/tools/chromedevtools/debug/breakpoints/step-code?hl=en
18