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)

0 Comment

Related Articles

0 Comment

Related Articles