Developing applications involves writing a great deal of code that may not often work the first time. And that is why the concept of debugging exists. It is the process of finding and fixing bugs in your application.
There are multiple ways you can perform debugging. These code editors are equipped with a powerful debugger tool that you can use to add breakpoints to your code. There are also various other functions you can perform using it.
One of the most common and widely used approaches is logging data on your console. For this, the browser provides us with a web API. Let’s look at it and how you can use it properly.
console interface. It is accessible via the global
window object. You can use this API to view object/variable values on runtime or log messages on your console.
This API provides a single interface that contains all the functions. You can use it to access the browser’s debugging console. The debugging console is present in the developer tools of the modern web browser.
This interface provides several console methods. Let’s look at how to properly use these methods with the Console API.
We will do it in a bunch of steps, so it is easy to follow along.
We need to set up a project. For this, create a folder on your computer and open it in your preferred code editor.
Once you are done, create
index.html in your project directory and write down the basic HTML boilerplate code inside it. I have also provided the code below if you quickly want to copy-paste it.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Console API</title></head><body><script></script></body></html>
As mentioned earlier, the
console interface contains several functions.
One of the most widely used is the
log function that logs a message, variable value, objects, and arrays on the browser console.
<script>const num = [1, 2, 3, 4, 5];console.log(num);</script>
Here I have created an array and logged it on the console. Here is another quick demo of this
clear method of the
console interface clears out the console for you. You can use it to clear the console when a button is pressed.
This method is used to display the data in a hierarchical form such that it adds a black disclosure triangle where a child object exists with some content. When you click on it, it discloses the data.
This method displays an interactive tree of the descendent elements of the specified XML/HTML element. Like the
dir method, the output is present in the hierarchical form with the black disclosure triangles.
This method is used to display the data in a table. The data can be anything from a variable to an object to even an array.
These are some of the many functions that are provided to us by the Console API.
The Console API is supported across all major web browsers, including Chrome, Firefox, Safari, Opera, Edge.