Problem Solving & Debugging Guide

● Try changing your search terms to use different words or add in or take out some keywords.

NOTE: If you’re using a software tutorial or walkthrough (YouTube can be great!), you may be using a different version of the program. If that’s the case, make a note of what looks different and troubleshoot how to accomplish the tasks in your version.

Rubber Duck Debugging

Sometimes the simple act of explaining your problem to someone else can help you figure things out. If a (willing) person isn’t available, you can use a rubber duck, a pet, or even your own hand! Try explaining the problem step-by-step to the person, creature, or object of your choice as if they were an instructor.

Question Your Assumptions

You may need to let go of what you think is the problem and open up your mind to other possibilities. Reel yourself in and examine what your goals are and do research on how others have achieved them. When it comes to design software and coding, there are often 50 ways to do one thing!

Let’s say that you have an HTML page that includes three different sections of code: one called “about”, one called “work”, and one called “contact”. When you look at your page in the browser, you notice that some CSS isn’t showing up in your “work” section. You may assume that it’s a problem with the HTML in your “work” section when, in fact, it may be a problem with the CSS for your “about” or “contact” section.

Step Away

When all else fails, take a break! When your eyes feel like they just “can’t” anymore, that’s a good sign that you need a break! It’s easy to get so stuck on a theory that you can’t see anything outside of that. Your best “aha” moments may come to you in the shower, on a walk, or just as you’re starting to doze off. When you’re designing, a great exercise is to print out your work, hang it on the wall, and just passively let it live there as you go about your day. You’ll randomly walk by it and eventually out of the corner of your eye, inspiration will strike!

Important note: when you do step away - ACTUALLY STEP AWAY. Don’t do other things on your computer. Go for a walk, watch your favorite movie, or read your favorite book. Catch up with a friend you haven’t seen in ages. When you are not “trying” is when you finally start arriving at possible answers for difficult problems.

CODING TECHNIQUES

Look for Typos

Typos are the most common error you’ll run into. They happen to even the most advanced developers. Typos can include things like:

●  Missing semicolons in CSS.

●  A missing or extra quote.

●  A curly quote instead of a regular ‘ol straight quote. This usually happens when you copy and paste code snippets. They can be pretty sneaky sometimes, so here is a close-up view of the difference:

●  A space where there shouldn’t be a space.

●  Extra or missing opening or closing tags in HTML.

●  Extra or missing letters.

HTML and CSS Validators

HTML Validator

CSS Validator

Sometimes, but not always, an HTML or CSS validator can show you where there are extra, missing, or misplaced tags, quotes, or semicolons in your code. It won’t always point out all the problems but it’s a great place to start!

Developer Tools

Most browsers come with developer tools built in. The most popular tools are Chrome and Firefox’s built-in Developer Tools. You can use them to check for any issues with your HTML, CSS, and even JavaScript.

You can generally access developer tools by right-clicking the element you want to look at and selecting the option “Inspect”, “Inspect Element” or something similar. Here is an example of what you’ll see when you right-click on an element:

Use Your Text Editor

You’ll find that your text editor will have standard colors for tags. If the colors look “off”, chances are that there’s an error. Here is an example:

Each text editor has its own set of themes, and some will highlight code in ways that may work better for you and the particular languages that you’re working with. If one theme doesn’t do the trick, try another one!

Fix That Indenting

Proper indenting can be super useful in finding errors. It makes it much easier to see where there’s a missing or extra tag. It’s clear where one thing ends and another begins, as well as what is contained inside another element. Take a look at these two examples and see if it’s easier to spot the issue in one versus the other.

Read Those Error Messages

Many times an error message will lay out the problem for you. An error message will usually include the file that the error is in as well as the specific line. Occasionally, the problem is actually with a different line than the one specified. Let’s look at an error message in Chrome’s Developer Tools. One thing to note: The Console tab in this example only applies to JavaScript, not HTML or CSS errors.

The left side says “ReferenceError: magic8Ball is not defined”.
The right-hand side says that the problem is in my script.js file on line 4. In this case, we can click on the link of script.js:4. If you’re working in the terminal, you won’t be able to click the link and will have to look at the file manually in your text editor.

If we look here, we can see that line 4 is highlighted. Unfortunately, you won’t always have a big red underline essentially screaming “ERROR HERE”. What we’ll do is compare our magic8Ball to where we’re defining it, which happens to be on line 3. Aha! We are using magic8ball on line 3 and magic8Ball on line 4. See how one has a capital B and one has a lowercase b? Since most languages are case-sensitive, these two spellings are considered completely different things. Hence the giant squiggly red line of death.