console.log() - The Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects.
![console.log()](/console.log().8e55778e.png)
Using string substitutions - When passing a string to one of the console object's methods that accepts a string (such as log()), you may use %s to substitute a string. Template literals can also be used for interpolation.
![Using string substitutions](/interpolated.eeba49da.png)
Styling console output - You can use the %c directive to apply a CSS style to console output.
![Styling console output](/styled.3c818571.png)
console.warn() - Outputs a warning message to the Web Console.
![console.warn()](/warn.a854685a.png)
console.error() - Outputs an error message to the Web Console.
![console.error()](/error.36b2b4b8.png)
console.info() - Outputs an informational message to the Web Console. In Firefox, a small "i" icon is displayed next to these items in the Web Console's log.
![console.info()](/info.40060ac4.png)
console.assert() - The console.assert() method writes an error message to the console if the assertion is false. If the assertion is true, nothing happens.
![console.assert()](/assert.d6c71901.png)
console.dir() - Displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.
![console.dir()](/dir.b32fbcb7.png)
console.groupCollapsed() / console.groupEnd() - Creates a new inline group in the Web Console. Unlike console.group(), however, the new group is created collapsed. The user will need to use the disclosure button next to it to expand it, revealing the entries created in the group.
![console.groupCollapsed() / console.groupEnd()](/group.8dbe73af.png)
console.count() - Logs the number of times that this particular call to count() has been called.
![console.count()](/count.98556401.png)
console.table() - Displays tabular data as a table.
![console.table()](/table.f3a4c0a6.png)
console.time() / console.timeEnd() - Starts a timer you can use to track how long an operation takes. When you call console.timeEnd() with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started.
![console.time() / console.timeEnd()](/time.5e67d538.png)
console.clear() - Clears the console if the environment allows it.
![console.clear()](/clear.477a8de4.png)