Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Tracing through a section of code

From: Foundations of Programming: Fundamentals

Video: Tracing through a section of code

So let me show you a simple low-tech way of debugging some JavaScript code and this concept also works in other languages. I am going to open up an example file of JavaScript that I have. There are a few lines here but there's not a lot of complex stuff going on, we've talked about every single piece here. I am defining four functions at the top of my JavaScript. firstFunction, secondFunction, thirdFunction and fourthFunction and they're basically just calling each other in order. The reason that I am doing this is I want to follow a flow.

Tracing through a section of code

So let me show you a simple low-tech way of debugging some JavaScript code and this concept also works in other languages. I am going to open up an example file of JavaScript that I have. There are a few lines here but there's not a lot of complex stuff going on, we've talked about every single piece here. I am defining four functions at the top of my JavaScript. firstFunction, secondFunction, thirdFunction and fourthFunction and they're basically just calling each other in order. The reason that I am doing this is I want to follow a flow.

The final function will actually change the HTML of the headline. So the functions that are defined when the page loads, these won't be executed, but it will know about them. The two lines of code that I will run is this one where I am grabbing that headline element and then I am adding an event handler to it. I am saying when somebody clicks the headline, call firstFunction. firstFunction should call secondFunction, secondFunction should call thirdFunction, thirdFunction should call fourthFunction, and fourthFunction should change the value of that.

Yes, this one is a little convoluted, but that's intentional, because here's the idea. There is a mistake here but let's say I don't know where it is. I am going to run the page. It looks okay. And then I am going to click the headline and expect it to change, and it doesn't. No matter how many times I click it, I have no idea why it's not changing. So how do I fix this? Well, let's go back into the JavaScript. I don't know if the problem is in my event handler. Maybe it's not even calling firstFunction, but maybe my problem is in the firstFunction, or maybe it's in secondFunction or in thirdFunction or in fourthFunction. Maybe I am even grabbing the wrong headline element. I have no idea of what's wrong here.

Perhaps my HTML page is not even pointing to my JavaScript file. So here's the really low-tech way of dealing with that. I do believe that this line should be being called as soon as we load the page, but maybe it isn't. How can I prove it? Well, one way is pop-up an alert message. Save this, go back over, open the page up. Okay, we're getting our alert message. I'm in the file. I know then for sure we are actually pointing to this JavaScript file and the code at least is getting here.

I could leave that in or I could take it out. Well, I still don't know perhaps if this event handler is working. Maybe I've done something wrong here. I am going to add another alert. I could have done it before the call to firstFunction or I could add it after. Save that again, go over, and what I can do here is just refresh the page. Bear in mind, I've reloaded, I am not getting an alert message, but that's okay, because this is my event handler. It shouldn't happen until I click the headline, so let's see what happens. I click it. Nope.

I am not getting anything going on here. But that itself doesn't necessarily prove that the problem is here, because think about what happens. I am trying to call firstFunction, which itself calls secondFunction, then thirdFunction, then fourthFunction, then this one and after each function is called it will return control to the previous one to go back up the stack, back here. What I really want to do here is start to put in another alert message and this is very common, that tells me in this case, just about to call first function.

Now, I am going to save this, refresh this page. Now I click the headline. Okay, so I know I am getting in the event handler. I am just about to call first function. I did then go into this line. Something happens between this alert and this alert, so something is certainly happening in the chain of calls here. Now, this as I mentioned is a very low-tech way of doing it. It's what referred to as tracing. We're actually injecting messages, we are outputting some information saying yes, we got to this point, we got to this point, we got to another point, and it's quite common that what ends up happening is there's a lot of trace messages.

In fact, some languages even have the word trace. We're going very low-tech with JavaScript and I could put in some more messages here. Let's indent this properly just to make it readable. And yes, I am going a little bit overboard here to prove the point, that I am putting in an alert message before just about every single thing that I do. But if I save this, then what I can do here is by refreshing the page, I can follow the flow.

So I click the headline. I'm just about to call first function, looks good, just about to call second function, okay, just about to call third function. We're looking good, we're looking like we're going all the way through, just about to call fourth function. Great! Okay, so what happened was I got this trace, I got this trace, I got this trace, but I didn't get this one. So something happened after this alert message. Say we call fourth function.

And I should have just jumped in here, but as I am looking a bit closer to it I suddenly realize, oh, I have got a typo. The name of the function is fourthFunction with an uppercase F of Function. This one isn't. Here's where the problem is. We never got into the fourth function. So now I am going to save this, jump back over, refresh the page, click the headline, follow the traces, first, second, third, fourth, just about to change the headline, and then we change the headline and then it finally comes back and said yes, now the control had been returned all the way back to our event handler.

Now our code is working and the really tedious thing is I have to go back and take out all these messages, what are typically referred to as trace messages. Yes, we're using an alert to do it but the concept is what's known as a trace. I could also comment them out if I thought that I wanted to leave them there for future use. Following the flow of your program by doing this, by doing trace messages often referred to as logging to the console as well, is a very, very common way of doing this.

And while it can be a little tedious, you often find that you'll actually discover the bugs as you're putting in your trace messages. It is a low-tech technique, but one of the benefits of it is it doesn't require any special tools. It doesn't require special debugger programs or you to do anything other than add a few lines of code into your program. But it wouldn't be something that I'd necessarily want to do in 10,000 lines of code. So for that, we have great programs called debuggers that can help us go through our code line by line as it's running and we'll see those in a moment.

Show transcript

This video is part of

Image for Foundations of Programming: Fundamentals
Foundations of Programming: Fundamentals

61 video lessons · 84412 viewers

Simon Allardice
Author

 
Expand all | Collapse all
  1. 4m 14s
    1. Welcome
      1m 16s
    2. Making the most of this course
      2m 8s
    3. Using the exercise files
      50s
  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 49s
    1. Building with the if statement
      7m 35s
    2. Working with complex conditions
      4m 10s
    3. Setting comparison operators
      6m 59s
    4. Using the switch statement
      6m 5s
  6. 17m 56s
    1. Breaking your code apart
      4m 1s
    2. Creating and calling functions
      2m 57s
    3. Setting parameters and arguments
      6m 7s
    4. Understanding variable scope
      2m 23s
    5. Splitting code into different files
      2m 28s
  7. 13m 32s
    1. Introduction to iteration
      4m 28s
    2. Writing a while statement
      5m 24s
    3. Creating a for loop
      3m 40s
  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 59s
    1. Working with arrays
      5m 47s
    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 26s
    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 3s
  13. 14m 17s
    1. Introduction to object-oriented languages
      5m 18s
    2. Using classes and objects
      6m 29s
    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

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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

Congratulations

You have completed Foundations of Programming: Fundamentals.

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


OK
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?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com 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 lynda.com.

Sign up and receive emails about lynda.com 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.