How I Debug my Code As a Front end Dev.

Debugging is one of the skills you must have as a developer. Because coding is 80% debugging and 20% writing the code. Debugging in layman's terms is fixing the errors (bugs) you created while writing the code.

I am a frontend developer I spent most of my time debugging CSS and JavaScript code.

Debugging CSS code is trickier than debugging JavaScript code. Because CSS never shows any error or warning. But in JavaScript, if you made some mistake in syntax or called a wrong function you get an error instantly. Except for the logic error, when you have a logic error you don’t get any warning or error, just the code doesn’t work.

So, Today I’ll show you how I debug the CSS and JS bugs I create.

Let’s get started.

Debugging CSS

CSS bugs are clever and it’s not easy to catch them. I use two approaches to debug CSS code.

1. Run backward

2. add: border 2px pink

1. Run backward:

This one is the easiest.

So, when you see something is not working as you wanted. And you don’t have any clue why it’s not working.

Try commenting out the code one line at a time, until you get to the point where the design was fine. After that un-comment those lines like before and check what’s causing the problem. When you find that, change the code as long as you don’t get the result you wanted.

2. Add: Border 2px pink

This one I use most of the time. When I see something is not looking as I wanted it to look I just add 2px of border to see what’s going on.

This one is handy when working with layout, or placing elements with positioning. These are the ways I use to debug CSS.

Now let’s move on to JavaScript.

Debugging JavaScript

I don’t use any type of debugger to debug my JS code. (I should use them!)

I use console.log to debug JS code.

It doesn’t have any tricks or anything. All you have to do is console.log the variable or function value or whatever you’ve expected but didn’t get.

Just console.log it and see what you are getting and fix the bug until you get what you wanted.

This is it, These are the method I use to debug.

Conclusion:

Hope you enjoyed reading my debugging tricks.

How do you debug CSS and JS code?

Share them in the comment below would love to read and learn.

Happy Debugging.