DEV Community

Arif Iqbal
Arif Iqbal

Posted on • Updated on

Debugging JavaScript code - Day 20 of 100

This post is a part of the Week X of 100DaysOfCode JavaScript Challenge series.

What is debugging?

Debugging is the process of going through your code, finding any issues, and fixing them.

Types of Errors

Issues in code can come in three forms:

  1. Syntax errors come when your code is written against the language rules. These errors will prevent your code from running.

  2. Runtime errors are those when your code behaves unexpectedly when you run it. These errors may stop the program execution.

  3. Logical errors are those when you get a result from your code that was not supposed to be.

In this module we will learn how to use JavaScript console to debug JavaScript code.

  • Use the JavaScript Console to Check the Value of a Variable:

The console.log() method will write the result of whatever is in the parenthesis to the browser console. Both Chrome and FireFox have very powerful browser consoles, also called DevTools. Both Chrome and FireFox, you can press the F12 key to open the DevTools then go the console tab. console.log("Hello World!") will write Hello World! to the browser console.

You can put this method in your code to see the output of a variable while debugging your program.

  • Understanding the Differences between the freeCodeCamp and Browser Console:

Friends who follow along with me know that I am following the FreeCodeCamp JavaScript course for this 100DaysOfCode challenge. FreeCodeCamp provides an online code editor that also shows the console window for some JavaScript lessons. This console window works slightly differently than a browser console window.

Browser console windows will output all JavaScript log methods like log(), warn(), and clear() etc. while the FreeCodeCamp console supports only the log() method. FreeCodeCamp editor logs to the console in real-time as you change the code. Also, FreeCodeCamp console is cleared every time your code runs.

  • Use typeof to Check the Type of a Variable:

This could be useful in debugging, particularly when you work with different data types. It returns the datastructure or type of the following variable.

console.log(typeof 7); // number
console.log(typeof "3"); // ntring
console.log(typeof ""); // ntring
console.log(typeof {}); // object
console.log(typeof []); // object
Enter fullscreen mode Exit fullscreen mode

JavaScript recognizes six immutable types (Boolean, String, Number, Undefined, Null, and Symbol(added in ES6) ) and one mutable type (Object). In JavaScript arrays are considered to be a type of Object.

Discussion (0)