Skip to content

Latest commit

 

History

History

dawn-debugging

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
tic-tac-toe-examples
tic-tac-toe-examples
 
 
README.md
README.md
 
 

README.md

Debugging JavaScript

Objectives
Inspect a variable's state using Chrome's JavaScript Debugger.
Summarize why a debugger is useful while developing software.
Analyze a debugger's watch list to find an out of scope variable.

It's OK if you don't know what all the terms in the objectives mean, you will by the end of this module.

What does bug and debugging mean?

How I feel while programming.

The terms "bug" and "debugging" are popularly attributed to Admiral Grace Hopper in the 1940s. While she was working on a Mark II Computer at Harvard University, her associates discovered a moth stuck in a relay and thereby impeding operation, whereupon she remarked that they were "debugging" the system. Debugging Wikipedia

What is a debugger?

A debugger or debugging tool is a computer program that is used to test and debug other programs. Debugger Wikipedia Entry

It is software to help remove bugs from software. The software comes with many features which are designed to ease your ability to track down bugs and fix them.

Why use a debugger?

Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it. Brian W. Kernighan

Have you written code which doesn't seem to work and it's all the computers fault? You've reached the limit of your patience because the stupid computer won't do what you said. Well, unfortunately it wasn't the computer's fault, it's always your fault.

Using a debugger will reduce the stress caused by your program not doing what you expect. It is a tool you will utilize when something strange is happening and you need to find out why.

The "real" world.

Move Fast and Break Things

Have you ever received a broken product? Maybe a refrigerator which keeps food nice and warm instead of cold? It sucks but does it seem a little better when the refrigerator maker fixes it quickly?

When you deliver software to your boss, a client or your customers they expect it to "work". This often isn't the case, something will be broken and there is an assumption that you will fix it quickly.

Sometimes your software doesn't make it to anyone. It is stuck in an unfinished state where you give up on it. One of the most common reasons I've seen to leave work unfinished was caused by a bug which couldn't be figured out.

Debug my coffee.

Let's work together to figure out why my coffee tastes bad. I usually make a "perfect" cup of coffee.

My perfect cup of coffee includes these things:

  • Super hot water.
  • Super fresh coffee grounds.
  • 2 creamers.
  • 2 sugars.

http://jsfiddle.net/eerwitt/uxazkv8m

Using the Chrome Developer Console

Launching Chrome's JavaScript Debugger

There are a few ways to launch the JavaScript debugger (and Chrome development tools). Each can be useful in different scenarios.

  • Launch the debugger using ⌘ + ⌥ + j.

    • Quick and easy, the default method.

  • Launch the debugger by right clicking on an HTML element, then select "Inspect Element" and click the console tab.

    • Useful when you want to interact with the element using $0.

  • Launch the debugger by using the keyword debugger in a JavaScript script.

    • Useful when you are working on a large script and need to set a breakpoint.
    debugger

Setting a break point in Chrome's JavaScript Debugger

Let's walk over the flow described in detail on the JavaScript debugging page.

Inspecting a variable's state while execution is paused

Open today's Debugging Lab and we'll inspect a variables state.

Continuing execution of a program (after having paused)

Let's walk over more of the tools mentioned on the JavaScript debugging page.

Practice

Resources