Difference between console.dir and console.log

console.log() Method: The console.log method simply yield a message to the console that can be used to display some kind of information to the user. That message can be a type of object or a string or an array. It’s like a troubleshooting tool in JavaScript.

Syntax:

console.log( message )

Parameters: This method accepts a single parameter which can be an array, an object or any message.
Return value: This method returns the value of the given parameter.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>console.log() method</title>
      
    <style>
        h1 {
            color:green;
        }
        body {
            text-align:center;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
      
    <h2>console.log() Method</h2>
      
    <h3>
        Open console using F12 or Ctrl+Shift+I
    <h3>
  
    <script>
        var geek = { 
            course : "DSA", 
            price : "5000" 
        };
          
        console.log(geek);
    </script>
</body>
  
</html>

chevron_right


Output:

console.dir() Method: The console.dir() method is used to get the list of object properties of a specified object. These object properties also have child objects, from which you can inspect for further information.

Syntax:

console.dir( object )

Parameters: This method accepts single parameter which holds the object element.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>console.dir() method</title>
      
    <style>
        h1 {
            color:green;
        }
        body {
            text-align:center;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
      
    <h2>console.dir() Method</h2>
      
    <h3>
        Open console using F12 or Ctrl+Shift+I
    <h3>
  
    <script>
        var geek = { 
            course : "DSA", 
            price : "5000" 
        };
          
        console.dir(geek);
    </script>
</body>
  
</html>

chevron_right


Output:

Note: The output of console.log() method is similar to HTML-like result while the output of console.dir() method is similar to JSON-like tree.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>console.dir() method</title>
      
    <style>
        h1 {
            color:green;
        }
        body {
            text-align:center;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
      
    <h2>console.dir() Method</h2>
      
    <h3>
        Open console using F12 or Ctrl+Shift+I
    <h3>
  
    <script>
        console.dir(document.body);
        console.log(document.body);
    </script>
</body>
  
</html>         

chevron_right


Output:



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.