Before debugging a CSS error, you need to spot it first. In some cases, you might receive a report from a colleague that there is a bug to be solved. Finding a CSS bug can be hard because there is no direct way to do it. Even for an experienced CSS developer, debugging and ^nding CSS issues can be hard and confusing.

1. What is debugging?

First of all, debugging doesn’t mean staring at your screen and wondering why your computer hates you.

Debugging is a process that involves identifying existing or even potential errors in a program. A program is a set of “instructions” that tell the computer what it needs to do.

For example, when you boot your computer and click on a browser like Google Chrome, it opens up.

A programmer wrote instructions for the computer to follow every time someone clicks on the browser icon.

Why is fixing errors in a program known as “debugging”?

A brief look at history

The term “bug” had been used before to describe mechanical malfunctions. The first person to use it to refer to computing problems was Admiral Grace Murray Hopper in the 1940s.

She worked in the navy, was a computer pioneer, and was working on the Mark II and Mark III computers.

Murray Hopper first used the term when she and her team found a moth inside their computer that was inhibiting its functioning. So, the term has a very literal origin!

Types of errors

There are various types of errors that can result in your program not doing what’s expected or failing to run at all. Let’s learn about them below.

Syntax errors

Syntax refers to the “rules” that define a programming language. Syntax errors, therefore, result from “breaking” programming language “rules.”

Syntax errors include typos or missing a semicolon.

Logical errors

A logical error occurs when your program doesn’t work the way it should. The program is able to execute, though.

Let’s look at an example.

for (var i = 1; i <= 10; i++) {

    if (i % 2 == 0) {

        console.log(i);

    }

}

In the above for loop, we’re trying to generate all the even numbers below 10. The above code runs, giving the following even numbers: 2, 4, 6, 8, and 10.

However, there’s a problem with the results. Even numbers less than ten should include the number zero. Because we set our loop to begin at one instead of zero, we miss out on the first even number, zero.

Runtime errors

A runtime error occurs when you’re executing a program but execution stops. Sometimes, runtime errors can be caused by the environment in which you run your program.

There are many other types of errors that you’ll learn as you keep learning code. Better still, learn how to “catch” them in your code via concepts like “errors and exception handling.”

Phew! That was a lot of new concepts! Now that we’ve answered the question “What is debugging?” let’s learn about the various types.

The History of Debugging CSS

Style Master

You might be surprised to hear that the first CSS debugging tool was released

in 1998 — 22 years ago! Its creators, John Allsopp and Maxine Sherrin, named

it Style Master. As they described it

Style Master is the leading cross-platform CSS development tool. Much more than just a text editor, Style Master supports your workflow — including: creating style sheets based on your HTML; live CSS editing of PHP, ASP.NET, Ruby and other dynamically generated sites; editing CSS via ftp; and much, much more.

The goal of Style Master was to make working with CSS more eacient, more productive, and more enjoyable. As you can see, then, debugging CSS has been a topic of interest to developers for a long time.

Firebug Browser Extension

In 2006, Joe Hewitt released the first version of the Firebug browser extension.

Firebug is a discontinued free and open-source web browser extension for Mozilla Firefox that facilitated the live debugging, editing, and monitoring of any website’s CSS, HTML, DOM, XHR, and JavaScript. — [Wikipedia](https://en.wikipedia.org/wiki/Firebug_(software)

The main features of Firebug were very similar to what we have in the developer tools (DevTools) of today’s browsers

inspecting HTML and CSS,
reviewing the JavaScript console,
testing web performance.

Without the effort of the folks who created these great tools, Style Master and Firebug, we might not have the DevTools we use today. We couldn’t be more thankful to them

What Has Changed Today?

]e scene today is dramatically di`erent. Every browser these days has builtin DevTools that make it easy for a developer to inspect and edit the HTML, CSS, and JavaScript of a web page. In this book, we’re interested in CSS.

Not to mention, when Style Master and Firebug were released so long ago, websites were very simple, and we had only one screen size to test on. Today, a website can be accessed by hundreds of smartwatches, mobile phones, tablets, laptops, and desktop computers. Debugging for all of these types of devices

is not an easy task. You could fix something for mobile and break it unintentionally for the desktop.

It’s not only about screen sizes. The size of web projects has gotten much bigger in the last 10 years. For example, the developers of a large-scale frontend project like Facebook or Twitter need a systematic way to test and debug. All of these changes to the work of web development are clear evidence that debugging must be taken care of from day one and that developers must learn it as a core skill.

2. Types of debugging

Debugging can be largely categorized into two types: reactive and proactive. Let’s dig deeper and learn a little more about them.

Reactive debugging

This is done after the bug has been identified. In the previous section, we looked at different types of errors.

All the types of errors we’ve come across so far are resolved via reactive debugging.

Proactive debugging

In proactive debugging, developers write code (as part of the program) that’s on the “lookout” for errors.

This “extra” code doesn’t affect the functionality of the rest of the program.

Proactive debugging is also referred to as preemptive debugging.

Proactive debugging is a part of both defensive and offensive programming, which are two other types of programming.

A word on remote debugging

It’s important to learn remote debugging as you become a more experienced developer. This is because the way in which we structure software changes a lot.

For example, we have more and more software running in the cloud. This means that we might not be able to debug some of the software locally on our computers.

Remote debugging is when you find bugs in an application that doesn’t run on your local computer. How cool is that?

We’ll delve more deeply into debugging types when we talk about techniques later on.

3. The five steps of debugging

In the quest to really understand what is debugging, there must be a way to make it more manageable and, who knows, maybe even pleasant.

Let’s discuss five simple steps to do this:

Step One: Gather information about the error

As a beginner programmer, you’re highly likely to make syntax errors. As a result, keeping an eye on these should be high on your priority list. Another thing you need to do is read error messages and try to understand them.

If you’re working with any data, for example, user data, check that too. You may have forgotten to perform data validation checks.

Step Two: Isolate the error

In this step, the goal is to try and identify the source of the error. You might need to “recreate” the error so as to know when it happens.

You could also comment out parts of the code and keep checking to see what section of your program could be causing the error.

You can also add print statements within your code (console.log in JavaScript). For example, if you’re able to print the output of a function, then it isn’t likely to be the one causing the error.

Keep doing this after every few lines of code. Eventually, you’ll see the section of your code that’s causing the error.

Step Three: Identify the error

Once you’ve narrowed down the section of the program that’s causing the error, you need to find the error itself. A great place to start is with a hypothesis.

For example, if you find that an error is coming from a field on your form, your hypothesis might be that you’re using the wrong data type.

You might be trying to add strings and integers, for instance.

Step Four: Determine how to fix the error

Once you have your hypothesis, it’s time to test it. For example, you might add data conversion logic to your program and run it to see if the error is gone.

If the error is still there, formulate another hypothesis and keep testing it. Keep doing this until the error is fixed.

Sometimes the solution to an error might not be obvious. You can visit sites like StackOverflow and find out whether anyone has experienced the same error and how they fixed it.

Step Five: Apply and test

You can rerun the code to see if the error is fixed. Testing is a great way to ensure that you don’t end up creating more bugs when fixing the ones you’ve been focusing on

Sometimes, you might not be able to figure out how to fix the error, despite your best efforts and even those of your colleagues.

In these situations, you’ll need to settle for a workaround that can keep the program running while you continue to find ways to completely get rid of the error.

An important thing that you might forget here is to document your solution. Yes, fixing the bug is a great achievement, and you feel elated. But documenting how you solved the error will help someone else in your team who might have encountered the error, or even your future self

Using a debugger

You don’t always have to find all the bugs yourself. You can enlist the help of a debugger (software that helps you find bugs).

Some IDEs (Integrated Development Environments) and text editors have built-in debuggers.

IDEs and text editors are just big words for where you write your code. Some IDEs and text editors include Atom, Visual Studio Code (VS Code), Android Studio, PyCharm, or Arduino IDE.

The IDE or text editor you use depends on the language you’re writing your program in or the platform you’re building for—web, Android, iOS, or even IoT.

VS Code, for example, has a built-in debugger to help you find bugs in your Node.js applications. It also works with JavaScript, TypeScript, and other languages that can be converted to JavaScript.

Using breakpoints

These are points in your code where execution stops—not because there’s a bug, but because you “paused” it.

It’s literally putting a “pause” on your code so that you can find bugs.

You can add breakpoints in your IDE, text editor, or even in your browser’s developer tools (you can access this on Chrome by pressing F12 on Windows and Linux, and Cmd + Opt + I on macOS).

What Does Debugging CSS Mean?

Debugging is the process of finding and resolving bugs (defects or problems that prevent correct operation) within computer programs, software, or systems. — Wikipedia

We can use the same de^nition. Finding and resolving CSS bugs is an essential skill. Regardless of the programming language you are used to working with,

When I refer to a “CSS bug” throughout this book, I mean a bug that was caused by the developer, not a bug implanted by the browser. But we will address both types.

Why Debugging Should Be Taught

The fast development of browser DevTools makes it hard to catch up with all of the techniques and methods of debugging CSS. Not to mention the lack of an organized resource that is easy for a beginner to follow.

The Debugging Mindset

According to Devon H. O’Dell, in his paper “ Debugging Mindset”

Software developers spend 35-50 percent of their time validating and debugging software. ]e cost of debugging, testing, and veri^cation is estimated to account for 50-75 percent of the total budget of software development projects, amounting to more than $100 billion annually.

If you need to fix a bug quickly, you might feel a bit stressed, which could lead you to rush a solution without a clear strategy. at could easily result in confusion and time wasted on things that don’t matter.

Any programming language has logical and illogical errors. Take JavaScript. When there is an error in your JavaScript, you can see by checking the browser’s console. At least you will have evidence that there is an error, with the reason for why it happened.

CSS is completely different. You won’t get any kind of alert when you’ve made an error. at alone can make the simplest CSS bug very hard to fix, if you don’t think clearly and follow a sensible strategy. A CSS bug could be caused either by the developer, as when a CSS property is improperly used, or by inconsistencies between web browsers.

Moreover, you might be the one responsible for testing a website and uncovering the bugs. So, we’re dealing not only with fixing bugs, but with finding them as well.

Explaining a Bug to Someone

Have you ever spent hours trying to solve a CSS issue, only to explain it to a friend or colleague and gotten that spark of an idea of how to fix it? That is the effect of explaining a bug to a friend. You got stuck because you didn’t take enough time to think deeply about the problem.

When you find yourself going in circles like that, take a break and come back to it later. Fixing issues needs intense focus. If you’re working on a solution while your mind is exhausted, you might unintentionally break something else. Avoid that with a break.