Skip to content

What's wrong?

One of the most important skills to learn

Learning to problem solve and debug your code is probably one of the best skills you can have as a developer. It's an art and a craft that takes time to learn. You won't be an expert after this class, but you can get a good start. Throwing up your hands and declaring "my program doesn't work" won't get you very far. Use the Trouble shooting and getting help guide as a road map for helping to solve problems on your own. And when you can't, then it's time to ask for help.

Developer Tools

Here's how we're going to try to debug our JavaScript programs.

The Issue

JavaScript is not very good about telling us something is wrong. Look at this demo to see what I mean.

Demo

  1. Demo: What's Wrong
    • unit02/demos/demo-devTools.html

Launching Developer Tools

Open Chrome and click on the Customize and control button in the upper right-hand corner.

Dev tools

Select the More tools->Developer tools menu item. You can also press Control+Shift+I or F12.

Dev tools

This will launch the Developers Tools built into the Chrome browser. Most likely, it will look something like this.

Dev tools

That is not a great format for projecting or working with it on small monitors. Let's fix that by putting the Developers tools window at the bottom. Click on the menu in the screenshot and select the Dock to bottom. You could also choose the first icon which will put the tools in a separate window. That might work well on a big monitor or with dual monitors. I'll always use it on the bottom of the window for class.

Dev tools

Here it is with the tools on the bottom.

Dev tools

What is this?

The Developer Tools are a suite of tools built right into Chrome that help developers fix issues and get things work properly. They can help with css, html, networking, security, and debugging JavaScript. Let's take a quick look at it.

⏰...

OK, we're back. Now let's look at the previous demo with the tools launched.

Demo

  1. Demo: What's Wrong
    • unit02/demos/demo-devTools.html

Dev tools

Look at that! Chrome knew what was wrong all along. We weren't listening, and now we are.

Let's zoom in on the error.

Dev tools

There's the bug in bright red for us to see.

  • document.wite is not a function

Then there are some lines underneath that look like links. Click on the top one.

Dev tools

It takes us to the line with the error. Nice.

Now we'll fix the error in Atom and refresh the page.

Dev tools

All fixed!

Now it's your turn to do it. (Or do it again.)

Labs

  1. Developer Tools
    • unit02/labs/lab-01-developerTools.html
  2. More Debugging
    • unit02/labs/lab-02-debugging.html