How to print debug messages in the Google Chrome JavaScript Console?

Last Updated : 21 Jul, 2024

Printing in the console is pretty easy all we have to know is how to activate the console on the chrome for viewing. The Console is always active all we are doing is making it visible to the front-end. A console is an object which provides access to the browser's debugging console. Console object has many methods which help us to print customized debugging. Here, are the following methods:

assert(): Acts like 'if', prints to console if false.
clear(): Clears the console.
count(): counts whenever it gets called.
error(): prints error if any.
group(): Creates a new inline group in the console.
groupCollapsed(): Creates a new inline collapsed group in the console.
groupEnd(): Exits the inline group in the console.
info(): acts just as log, for priority info.
log(): Outputs a message to the console.
table(): Displays tabular data as a table.
time(): tracks how long the specific task taking place.
timeEnd(): ends the tracker.
trace(): Outputs a stack trace.
warn(): Outputs a warning message.

Click on F12 after running the script and it opens the Developer Tools, navigate to the Console tab, which will be on the top menu.

Example 1:

javascript

<!DOCTYPE html>
<html>

<body>

    <h2>Debugging in Console</h2>

    <p>On Clicking the below button,
      myFunction() invokes and prints in the console.</p>
    <input type="button"
           onclick="myFunction()"
           value="Tony send signal to Quill(console)">
    <!--button-->
    <script>
        function myFunction() {
            //prints in console
            console.log("log:Tony sent a message"); 
          
            //prints in console
            console.info("info:Quill received."); 
        }
    </script>

</body>

</html>

Output: Before:

After clicking the button:

Example 2: Check out the console.table() for better understanding of methods.

javascript

<!DOCTYPE html>
<html>

<body>

    <h2>Debugging in Console</h2>

    <p>On Clicking the below button, 
      myFunction() invokes and prints in the console.</p>
    <input type="button" 
           onclick="myFunction()" 
           value="who are the guardians?">
    <script>
        function myFunction() {
            console.table(["Quill", "Gamora", "Drax",
                           "Groot", "Rocket", "mantis"]);
        }
    </script>

</body>

</html>