Running and Debugging

Index

Debugging
Debugging Example (in Web Browser)
Student Debugging Examples
Web Browser Flakiness

Debugging is finding and fixing bugs in our code.

A debugger (tool that helps us find bugs) can be as useful as our code editor.

Here is a video that will help you get started debugging:

Introduction to Debugging JavaScript

Steps:

Open up your .html file in a web browser
Then open up "Dev Tools" -- usually shortcut Ctrl-Shift-I, or from the menu
Look on the "console" tab
It will tell you the .js file and line number of the bug and usually provide a link to the bug
Open the .js file in your fav editor
Go to the suggested line number
After figuring out the fix, make the edit/fix, save the file
Back in the browser do a refresh (e.g. F5 in chrome/windows)
Loop back to step #3 above and repeat

Debugging Example (in Web Browser)

Setup

First download this file... and copy the contained files into a new working directory.

You will find these files:

foo-with-bugs.js -- a simple js file with some bugs
quick-run-check-2.html -- a html file that loads the mentioned .js file

Open Browser

Let's open up a web browser on the .html file

We next do the following steps:

Open up "quick-run-check-2.html" in a web browser
In the browser, open up "Dev Tools" -- usually shortcut Ctrl-Shift-I, or from the menu
You will see an error something like Uncaught TypeError: foo.getHello_BIG_TYPO_HERE is not a function
It will indicate the line number e.g. like "at foo-with-bugs.js:27"

Find and Fix Bug

Find Bug

The web browser has helpfully pointed us to the line number of the bug.

We open up the .js file in a plain text editor.

On that line we see a typo.

let foo = new FooWithBugs();
prn(foo.toString());
//prn(foo.getHello_BIG_TYPO_HERE());

Fix Bug

We fix the typo.

And save the file.

let foo = new FooWithBugs();
prn(foo.toString());
//prn(foo.getHello());

Back Into Browser

We re-open or re-activate the browser.

If re-activating, we do the "refresh" action (F5 in some browsers).

And we have the expected output (the code ran).

I am Foo
Hello
Goodbye

What if Multiple Bugs?

It is easy to have several bugs lurking in the code.

The easiest approach, when debugging with a web browser, is usually to fix one bug like in the previous steps, and then repeat the steps. It is relatively fast because you can keep your editors open and just refresh (on the .html side) as needed.

let foo = new FooWithBugs();
prn(foo.toStringXXXX());
prn(foo.toStringYYYY());

Student Debugging Examples

See student examples here:

Bug Find

Web Browser Flakiness

On occasion, web browsers can be fussy (they have gotten better). If the browser is acting odd (e.g. not showing anything on console, etc) try to refresh. Also try "Clear Browsing Data". And then restart it.

JavaScript Guide (Chapter 307 - Debugging)

< Running and Debugging

Search Site Home Back To Top