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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 recieved."); 
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:
Before:

output

Output1


After clicking the button:
output

output2

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output
Before:

output

output1


After Clicking the button:
output

output2



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.