Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Using debuggers


Foundations of Programming: Fundamentals

with Simon Allardice

Video: Using debuggers

In all programming languages these days, there are tools that will actually help us to debug our code when it's a bit more complex for just a trace or a quick scan of the syntax to work. I'm going to show you a debugger in JavaScript just to show you the kind of things you'd expect from a debugger in any language. JavaScript of course is a language that lives in a web browser and that's really where our debugger needs to live to. What I am going to use is probably the most well-known debugger for JavaScript, which is something called Firebug.
Expand all | Collapse all
  1. 4m 15s
    1. Welcome
      1m 17s
    2. Making the most of this course
      2m 8s
    3. Using the exercise files
  2. 22m 11s
    1. What is programming?
      5m 45s
    2. What is a programming language?
      4m 48s
    3. Writing source code
      5m 34s
    4. Compiled and interpreted languages
      6m 4s
  3. 16m 29s
    1. Why JavaScript?
      4m 45s
    2. Creating your first program in JavaScript
      6m 54s
    3. Requesting input
      4m 50s
  4. 31m 38s
    1. Introduction to variables and data types
      5m 16s
    2. Understanding strong, weak, and duck-typed languages
      3m 51s
    3. Working with numbers
      5m 4s
    4. Using characters and strings
      4m 5s
    5. Working with operators
      4m 47s
    6. Properly using white space
      6m 46s
    7. Adding comments to code for human understanding
      1m 49s
  5. 24m 48s
    1. Building with the if statement
      7m 35s
    2. Working with complex conditions
      4m 9s
    3. Setting comparison operators
      6m 59s
    4. Using the switch statement
      6m 5s
  6. 17m 54s
    1. Breaking your code apart
      4m 1s
    2. Creating and calling functions
      2m 56s
    3. Setting parameters and arguments
      6m 7s
    4. Understanding variable scope
      2m 23s
    5. Splitting code into different files
      2m 27s
  7. 13m 31s
    1. Introduction to iteration
      4m 28s
    2. Writing a while statement
      5m 24s
    3. Creating a for loop
      3m 39s
  8. 19m 28s
    1. Cleaning up with string concatenation
      4m 30s
    2. Finding patterns in strings
      8m 3s
    3. Introduction to regular expressions
      6m 55s
  9. 19m 58s
    1. Working with arrays
      5m 46s
    2. Array behavior
      5m 29s
    3. Iterating through collections
      5m 18s
    4. Collections in other languages
      3m 25s
  10. 10m 50s
    1. Programming style
      5m 55s
    2. Writing pseudocode
      4m 55s
  11. 25m 55s
    1. Input/output and persistence
      3m 6s
    2. Reading and writing from the DOM
      8m 11s
    3. Event driven programming
      7m 47s
    4. Introduction to file I/O
      6m 51s
  12. 24m 25s
    1. Introduction to debugging
      5m 57s
    2. Tracing through a section of code
      7m 5s
    3. Understanding error messages
      3m 21s
    4. Using debuggers
      8m 2s
  13. 14m 16s
    1. Introduction to object-oriented languages
      5m 18s
    2. Using classes and objects
      6m 28s
    3. Reviewing object-oriented languages
      2m 30s
  14. 11m 14s
    1. Memory management across languages
      5m 11s
    2. Introduction to algorithms
      4m 2s
    3. Introduction to multithreading
      2m 1s
  15. 29m 20s
    1. Introduction to languages
      1m 42s
    2. C-based languages
      4m 40s
    3. The Java world
      3m 13s
    4. .NET languages: C# and Visual Basic .NET
      6m 17s
    5. Ruby
      3m 4s
    6. Python
      2m 56s
    7. Objective-C
      4m 3s
    8. Libraries and frameworks
      3m 25s
  16. 1m 2s
    1. Where to go from here
      1m 2s

please wait ...
Watch the Online Video Course Foundations of Programming: Fundamentals
4h 47m Beginner Sep 22, 2011

Viewers: in countries Watching now:

This course provides the core knowledge to begin programming in any language. Simon Allardice uses JavaScript to explore the core syntax of a programming language, and shows how to write and execute your first application and understand what's going on under the hood. The course covers creating small programs to explore conditions, loops, variables, and expressions; working with different kinds of data and seeing how they affect memory; writing modular code; and how to debug, all using different approaches to constructing software applications.

Finally, the course compares how code is written in several different languages, the libraries and frameworks that have grown around them, and the reasons to choose each one.

Topics include:
  • Writing source code
  • Understanding compiled and interpreted languages
  • Requesting input
  • Working with numbers, characters, strings, and operators
  • Writing conditional code
  • Making the code modular
  • Writing loops
  • Finding patterns in strings
  • Working with arrays and collections
  • Adopting a programming style
  • Reading and writing to various locations
  • Debugging
  • Managing memory usage
  • Learning about other languages
Developer Web
Simon Allardice

Using debuggers

In all programming languages these days, there are tools that will actually help us to debug our code when it's a bit more complex for just a trace or a quick scan of the syntax to work. I'm going to show you a debugger in JavaScript just to show you the kind of things you'd expect from a debugger in any language. JavaScript of course is a language that lives in a web browser and that's really where our debugger needs to live to. What I am going to use is probably the most well-known debugger for JavaScript, which is something called Firebug.

This is a free extension for the Firefox web browser, so it adds extra functionality into the web browser. And after it's been installed, you can turn it on for any page or any website that you are looking at. So I am looking at my page here. I'm going to go up to my Tools menu and turn Firebug on, just open it up. It opens up in the lower part of the screen. Although you can choose to open it in a separate window. You can adjust this and have more or less of your regular page if you want to. This is fine for me.

Now Firebug is a general purpose Web development tool. It's not just a JavaScript debugger, but that's the part that I'm most interested in. So it has several different tabs I can get to. The only two I am interested in here are the Console, which is right now disabled. So I am going to enable it and it tells me to reload it and enabling the JavaScript debugger. I am going to reload, there we go! And also the Script section, which I'm also going to click the button to enable. Now as soon as I do that, what it's doing is showing me the actual script that this page is linking to.

I have added a few more lines there but we will go through that in a moment. Now just for our purposes this font is a little small, so I am going to change some of the settings of Firebug and just zoom into that a bit more. So I can change the text size of what I'm looking at. And this should make it a bit easier to read. Now you might think, "Okay big deal, we can actually look at the code, but so what? I can already look at the code." Yes, but here is the thing. It's meant to diagnose problems. So if we've got the same problem that we had before, which is when I click the headline, it's not doing what I thought it should be doing, which is changing it.

I can use the Firebug extension to help me find out why. And the classic example here is I can set a breakpoint. So if I think that here I should be calling firstFunction, I can set a breakpoint, which will say stop whenever you get to this line. What I do is click on the gray bar to the left of it. Well, then what? Oh, it doesn't look very impressive, but what happens of course is this should only be hit when I click up here, so I am going to click. And as soon as I do, the breakpoint is hit in our code and it says okay, I have paused execution.

Usually what JavaScript would try and do is run through this code as quickly as possible, to call firstFunction and move into the code that's inside that function. But we said no, break, pause before it. So we get this little arrow that's pointing and saying okay, we are paused right before this line of code should be executed. Well, what is this line of code? Well, it's a call to something called firstFunction, which is defined up at the top of our code here. firstFunction is over there. It could be in a completely separate file.

Now back down here what I'm going to do is say okay, let's start going through line by line. That's the power of a debugger: stepping through our code as it's actually running, not just looking at it on paper. So up here what we have is when we are in this break mode, we have got the ability to rerun code, to just hit Continue and just continue on to the next breakpoint. And we go to variety of Step Into, Step Over, and Step Out, which allows us to go into functions or jump out of functions.

The one you typically use most of the time is this one called Step Into. I am going to click that button. And what it's going to do is execute this line of code, which should move us into the function called firstFunction. So I click it once. Jump. We jump into the first line of the function. Notice that we don't jump to line 2 where the actual function name.. It is because that's not really a statement. It doesn't do anything. We're jumping into the first bit of code, the first part of the function that actually does anything.

We are just going to create a variable called a and set it equal to 5. But we are paused before this line is executed. So right now I can actually move over a and it's going to do this little tooltip that says does a have a value. And it says right now it's undefined. And in fact, over here on the right- hand side we have what's called the Watch panel, which says yes, as far as I know, there should be three variables in this function, a, b and c, and they're all undefined. None of them have values. So I'll go back up to my Play controls and I am going to say Step Into, which just goes forward.

a is now equal to 5. We are waiting to create b. I Step Over. b is now equal to 10. I can see those values either in the Watch panel over here or by mousing over them. Now we are at line 5, which is going to be a call to second function. So what should happen is if I click Step Into, we will jump onto line 9 which is the first line of secondFunction. And indeed that's where we are. Create another variable, set it, make a call to thirdFunction, we jump to line 14, and to line 15.

Now notice that we go from line 15 to line 17, when we have a blank line, there is no meaning there. We don't execute a blank line of code. It's insignificant whitespace. That's why it's also grayed out in the bar here, because it would make no sense to try and set a breakpoint there. Now one of the issues sometimes with stepping into your code and going though it line by line is sometimes it can be kind of tedious. We have got a while loop here. It's going to go around 100 times. Well, it might be a little annoying if all I had to do is just keep clicking and clicking and clicking and clicking and clicking and clicking.

I can actually see my counter, i=16, total is 1600, and I have still got 84 clicks to go, so I really don't want to do that. So I will go ahead and I'll create another breakpoint here outside of the loop before we are calling fourthFunction. And instead of saying Step Into, I am just going to hit Continue. What happens is it zooms around the loop. I can actually go over here to the Watch panel and see that it did go around 100 times and total ended up getting set to 10000.

And then here's our call to fourthFunction in which we do have a slight problem, so I try and execute that. It's not going to work and in fact over here in the Console, we have got these problems here: fourthFunction is not defined. So what JavaScript did is it said "I don't know what to do, so I'm jumping back to where our thirdFunction was called." And now if I click Step Into, we are actually going to go back all the way up from secondFunction to firstFunction and then jump back to where it was called. And if I click Step Into one more time, what happens is we shift out of break mode because our event handler finished running.

We're now back to the normal view. No JavaScript is running now. Now of course the debugger can get a little deeper than this, but if you think of these being the core pieces, allowing you to see your code as it's executing, being able to see the values of the variables as your code is running, being able to set breakpoints to jump into functions, to jump out of functions. That's the power of the debugger. One of the great things it allows you to do is just follow your code. Does it actually work the way you expect it to? These are the core pieces of a debugger and you will find them in every language.

Most of the time, they're built into applications like Integrated Development Environments, things like Xcode or Eclipse or Visual Studio. But whatever language you use, you will find debuggers can be a tremendous help in clearing up problems with your code.

Find answers to the most frequently asked questions about Foundations of Programming: Fundamentals .

Expand all | Collapse all
please wait ...
Q: Using TextEdit with Mac OS 10.9 Mavericks? 
A: If you're using the built-in TextEdit program in Mavericks to write your first examples and your code doesn't seem to be working, here's one reason why: by default, "smart quotes" are now turned on in TextEdit Preferences.
This is where TextEdit will automatically change pairs of double quotes to "smart quotes" - where the opening and closing quote are different, like a 66 and 99.
While this is fine for human eyes, programming languages don't want this - when writing code, they need to be the plain, generic straight-up-and-down quotes.
So make sure that in TextEdit > Preferences, that "Smart quotes" are unchecked.
Important! Whenever you make a change to TextEdit preferences, make sure to then completely quit out of the program (Command-Q or using TextEdit > Quit TextEdit) and then re-open it, as changes won't take effect on documents you already have open.
However, we're not finished - just because you've changed the preferences, it does **not** change any *existing* smart quotes back to "regular" quotes - it just doesn't add new ones - so make sure to go through your files for any time you wrote quotes and TextEdit may have changed them to smart quotes - look in both the JavaScript, and your HTML too, and compare to the downloadable exercise files if necessary.
If that sounds like a bit of a chore, I recommend just downloading a code editor like Sublime Text ( or TextMate ( and using that instead of TextEdit - it's only a matter of time before you'd move away from TextEdit anyway - we only used it in the course because it was built-in and a quick way to get started, but it's now become more of a inconvenience than it was before.
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Foundations of Programming: Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts. provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now

A trusted source for knowledge.


We provide training to more than 4 million people, and our members tell us that helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.