Web Development

Accessing JavaScript Console

Meghana

Aug 24, 2023 • 5 min read

As we already know and saw in the previous article it is evident that JavaScript can be easily manipulated and interacted, using the console in Web Browser. We can here see and understand how it can be accessed and used.

Accessing and using JavaScript Console (Basic Example):

HTML document with JavaScript: To interact with JavaScript using console and manipulate it, we need a .html document which contains JavaScript code with console commands, or some of the console commands can be used in the web browser which will be shown in the following steps.

Open the webpage: Once the .html document has been created, open it with Chrome browser and right click and open inspect.

Here is the basic Webpage created using html.

Right-click and choose the Inspect Element Option.

Once you select Inspect Element, you will be able to navigate to Console where you can see all the set of operations that have been performed in the Script.

Interacting and manipulating with JavaScript through Console:

You can directly use and manipulate code by testing various codes on Console. As we already read that Console can be used by Developers to test new codes on the Web Pages dynamically without making any changes to the original code.

Here is an example of manipulating JavaScript Code through console:

Adding a button to webpage through console which has been created using html, locally.

Code to be used on the console to add a button to this webpage. Here we are adding Perform Addition as a new button.

This is the updated page after creating a new button using the console.

Similarly, like adding the button to the page, there are various other uses of the console which can be used to manipulate and interact with JavaScript.

Different types of JavaScript commands that can be used to interact and manipulate JavaScript Code:

console.log(): This is the command which is mostly used by developers to print or display content on the console for information or debugging purposes.

Example: console.log("Hey, Girlll!"); this will display Hey, Girlll! on the console.

console.error(): This command is popularly used to log or store an error message in the console. It is used to report and handle various errors which could be faced in the code.

Example: console.error("An error has occurred!") this will display an error message in the console with text highlighted in “RED” color.

console.warn(): This command is used to log or store a warning message in the console. This is used to show or indicate potential issues or problems in the code which can be changed, this will display the message as a “Yellow” highlighted text.

Example: console.warn("This is a warning message!") this will display a warning message in the console.

This is the block of code for log, error and warning.

This is the output of log, warn and error on the console.

console.table(): This command is used to display the tabular data in script in a table form in the console. An array or an object must be given to it as an argument.

Example: console.table([{name: "Dinesh Sai Kumar Pilla", age: 21}, {name: "Eesha Smitha Ravella", age: 20}]); this will display the content as a table in the console.

Here is the block of code for creating, table using an array as an input.

This is the output in the form of a table displayed on the Console.

console.time() and console.timeEnd(): These two commands are used to measure the amount of time / execution time of a certain block of code. Here console.time() marks the starting point of the code and console.timeEnd() marks the end point of the code.

And finally, the time which it took to complete the execution will be displayed in the console.

This is the block of code which measures the execution time for the above.

This shows the execution time to print the numbers, **myTimer** is the time taken.

6. console.clear(): This command is used to clear the console clean and it removes all the previous messages, logs, and output. This provides a clean slate which can be used for further manipulation, interaction and debugging.

This is the console slate after using all the above codes.

This is the console after using console.clear(), it removes all the previous data.

Conclusion:

Here we can clearly see how to open and use different console commands and interact with the code. There are many functions and console commands which can be used and be interacted with, explore them and happy coding.

References:

Do Checkout :

To know more about such interesting topics, visit this link.

Do visit our website to know more about our product.

Article By, Dinesh Sai Kumar Pilla

Reviewed By, Meghana Prabhandham