How to Debug Your Website: A Beginner's Guide
Learning to code can be full of ups and downs. Sometimes your website will just stop working, and you'll be tempted to smash the keyboard and quit.
No matter where you are in your coding journey – whether you're a newbie or the most knowledgeable programmer there ever was – things will inevitably break. One of the toughest challenges in this journey is learning to keep going, despite the frustration and doubts that arise when things don't go your way.
So when you do encounter an issue with your code, what do you do when the solution refuses to reveal itself? Unfortunately, there's no one perfect answer, but there are lots of options at your disposal. In this guide, we're going to talk about a few methods and tools that you can use to help you illuminate what's broken in your code.
First step: find the root of the bug!
The first step to solving any problem is to articulate what's wrong in the first place, and coding is no exception. Generally, we deal with two types of bugs: syntax and logic errors.
Syntax errors are any type of spelling or formatting mistakes that prevent the browser from interpreting your code properly. Here are a few common syntax errors to watch out for:
Spelling errors or capitalization errors
Lonely and unpaired parentheses, curly brackets, or quotation marks
Unclosed HTML tags
CSS properties that are missing a colon, a semi-colon, or a unit value
These types of errors are generally easy to fix, as long as you're familiar with the language's syntax. However, they can be hard to spot when they're inconspicuously hidden among the rest of your code, or when you're still learning the language. Thankfully, there are tools that can help you proofread:
You can run your HTML and CSS through code checkers – such as CSS Lint, or W3C's HTML Validator and CSS Validator – to check for invalid or incorrect lines of code due to syntax errors, and to also check whether your code matches up to global web accessibility standards.
If you're handy with the command line, you can install PostCSS. This allows you to install a bunch of useful automated plugins that can alert you to syntax errors and reformat your code so it's more readable and compatible with modern browsers. If you're curious to learn more about how to use PostCSS, check out our Command Line for Creatives course.
Logic errors happen when the code runs incorrectly due the underlying logic of the way you've written it, even though the syntax is correct. You might think that everything you've written makes perfect sense, but code is inherently logical. If something isn't working, then it's probably because you wrote something that doesn't quite work like you expected.
Below, we'll break down some general debugging strategies for when you do encounter a tricky logic error.
Making the invisible visible
When fixing wonky layout issues in your CSS, a handy trick is to highlight any troublesome tags with bright colors, such as with red borders or yellow background colors. This helps make the size of the content, margins, and padding visible, so you can see exactly where a tag starts and ends.
You can try this in your CSS by adding border: 1px solid red !important; or background-color: yellow !important; on tags to see if they display in the page layout as expected.
Simplify your code
Prevention is key. It helps to write straightforward code in the first place because logic errors can be tough to fix if your code is overly complicated.
While you're in the process of writing code, include comments along the way to explain what you're doing in normal human language. Not only does it force you to articulate and organize your logic in the moment, but it's also a gift to future you. Next time you come back to read your code again, it'll be a lot easier to understand what's going on because you already took the time to explain it to yourself.
Format your code so it's clean and readable. Add whitespace and indentation to structure your code so your eyes can easily skim through it.
Check the Console for error messages
If you have any Javascript code, the first place to go when there's a bug is to check your browser's Console. Any messages related to Javascript will show up here, such as error messages that describe the issue and their location in your code.
Sometimes an error message's description is written with technical jargon which might not make much sense, so it helps to google it to find out what it means and what to do about it.
You can also print messages to the Console with console.log() in your Javascript code. This is useful for keeping track of the value of any buggy variables, or investigating when and how certain functions run.
If you'd like to learn more about how to navigate your browser's Console, keep on reading – we'll explain how to use this tool further below in the Developer Tools section.
Trap and isolate the bug
If you're really struggling to figure out what's going wrong, it may help to isolate the problematic code and see if you can narrow things down.
Try copying only the minimum relevant code into a CodePen or a blank project in your favorite code editor, and gradually add in more code. This process of re-building the code piece by piece could illuminate where the bug lies — and also where it doesn't!
Google it!
Chances are, someone else has encountered a similar bug to you and the solution to your problem already lies somewhere on the internet. You might find the answers to your questions on developer community forums like Stack Overflow, or web documentation sites like MDN Web Docs, although it may be confusing to understand all of the technical jargon. For other code resources that use more beginner-friendly language, check out CSS Tricks for answers to your CSS-related questions, Javascript.info as an in-depth Javascript reference, and SuperHi's general purpose Learn to Code Now book.
How to use Chrome Developer Tools
Every modern web browser has a built-in set of tools that are made specifically for debugging and testing code. They're called Developer Tools, or DevTools for short, and they're like a website X-ray of sorts: they allow you to examine any website's code and instantly edit its appearance live in the browser. For the sake of simplicity, I'm going to focus on Google Chrome's DevTools for this guide, but other browsers will have the same debugging features that we'll cover here.
How to inspect an element with DevTools
First, right-click on the Inspect me! box below, and then select Inspect:
Inspect me!You'll see the Elements panel of DevTools open up, which contains all of the HTML that is rendered by your browser to create the current webpage.
For example, this is what the Elements tab looks like on the Furneaux's website, which is a project from SuperHi's Foundation HTML, CSS + Javascript course:
The Inspect me! element's HTML code will be highlighted in the Elements panel. If you hover your cursor over it, you'll see that the Inspect me! element on the page will also get highlighted in 4 colors related to that element's spacing, also known as the CSS box model:
The outer orange shows the margins
The middle yellow shows the border
The middle green shows the padding
The inner blue shows the content
You can also hover over any other chunk of HTML in the Elements tab, and the corresponding element on the page will be highlighted in those 4 colors.
To inspect another element, you can also use a keyboard shortcut: press Command + Option + C on a Mac computer, or Control + Shift + C on a Windows computer, and then click on anything on the page.
Changing the CSS in the Styles panel
In addition to the Elements panel, you'll also find the Styles Panel inside the DevTools window. This contains all of the CSS properties for the currently selected HTML element. You can quickly edit any of the current site's CSS here and see your changes take shape on the page immediately.
Try inspecting the following red-colored text:
Change my text color from red to blue!
If you look at its highlighted HTML in the Elements panel, you'll see that it's inside another <div> tag. Then, look over at the Styles panel and you'll see all of the CSS rules that apply to that element.
See if you can locate the color: red; CSS property in the Styles panel. Double click on it to edit the code, and then change its color to blue. As a result, the text color in the <div> should change to blue.
When you hover your cursor over the CSS properties in the Styles panel, notice how checkboxes appear next to each CSS property. You can toggle CSS properties on and off by clicking on these checkboxes. You'll know that a CSS property is toggled off if its text gets crossed out.
Try it yourself: see if you can toggle off some CSS properties, and then add a new CSS property to the same <div> tag above. Double click on the closing curly bracket of the .div CSS selector in the Styles panel, then type in background-color: orange to change the background color.
You may even see some other CSS properties in the Styles panel that are crossed out. This means that they're either overwritten by other CSS properties, or their code has syntax errors that render them invalid.
All of these edits to the page's CSS are only temporary and local to your browser — if you refresh the page or switch to a different one, all of your edits will disappear. This is a handy way to quickly test or debug your CSS and see how your code renders live in the browser, without yet having to commit to any permanent changes to your code.
Checking for Javascript error messages on the Console
At the top of the DevTools window, there is a navigation bar where you can switch from the Elements panel to the Console. Any error messages will show up here if there's something wrong with your Javascript code. The error messages will include a description of what might be wrong, as well as the location of the error, which will be listed as a line number of a Javascript file.
The exact location of the error might not quite be at the line number listed, although it's usually somewhere around there. And if not, it would still be a good place to start in hunting down the root of the bug.
Tracking how our Javascript runs with console.log() messages
As we mentioned earlier in this guide, logging messages to the Console with console.log() is another handy way to track how your Javascript variables and functions behave live in the browser.
For example, let's say we have a slideshow on our website, which we control with Javascript, and we keep track of its current slide with a variable called currentSlide. We might have an event listener that increases currentSlide every time the user clicks on a button:
button.addEventListener("click", function () {
currentSlide = currentSlide + 1
console.log("Current Slide: " + currentSlide)
);We can put a console.log() in the event listener, so that it also prints the value of currentSlide to the Console every time the user clicks the button. The user won't actually see this Console message, unless they open up the Console themselves. If they do open up the Console, then if they click the button, they'll see a number such as 1, 2, 3, and so on, since these numbers will correspond to the value of currentSlide.
If we tried interacting with the slideshow, and noticed that the slide wasn't updating properly, then we could use console.log() this way to investigate how currentSlide actually changes.
So, the console.log() function is a debugging tool for developers to track and understand how the code is running.
View the website's source code on the Sources panel
Have you ever stumbled upon a cool-looking website and wondered how it was built? Maybe you were even curious about how you could build it yourself? You can start by investigating its source code, such as the Javascript that powers the page's interactivity, or its original HTML and CSS. You can find all of this within the Sources panel by switching to its tab via the top navigation bar of the DevTools window.
On the left-hand side of the Sources panel, you can navigate through the website's file directory and open up different folders to view the code files and image assets. You can also directly edit the page's code there, which will immediately re-render the page.
Wrapping up
By now, you've probably noticed that there are lots of other DevTools features beyond what we've covered so far. Hopefully this guide has given you an idea of how powerful DevTools can be, and that you'll continue to explore its features to help you build better websites.
Last but not least, I'll leave you with one more tip.
Take a deep breath.
Whenever you encounter a bug that you can’t figure out, or whenever you feel the frustration rising within you, step away from the screen and switch your brain to a different mode for a while. It's hard to see what’s right under your nose when you've been anxiously staring at the same code for so long. Later, you can come back with fresh eyes and a fresh mind.
The first times your code ceases to work may be the scariest. But a thorny bug is likely to teach you something you didn’t know before about how computers can break. And, as you encounter more bugs, your technical toolkit and coding intuition will only continue to grow.
Additional learning resources
Code checkers
DevTools support
Arianna Ninh is an Educator at SuperHi, where she supports students in embracing the messy magic of learning something new. She hails from the San Francisco Bay Area and loves hiking outdoors in the SF fog (aka Karl). Outside of SuperHi, you can find her attempting to make food or weird sculptures, or daydreaming in a park somewhere.