How to Use console.log() Like a Pro: A Brief Guide by@denic
577 reads

How to Use console.log() Like a Pro: A Brief Guide

tldt arrow
Read on Terminal Reader

Too Long; Didn't Read

CNN.com will feature iReporter photos in a weekly Travel Snapshots gallery. Please submit your best shots of our featured destinations for next week. Visit CNN iReport.com/Travel next Wednesday for a new gallery of snapshots. Visit www.dailyimpact.com for a gallery next week for snapshots of places to go next week in the gallery.com. Submit photos of your favorite destinations to see next week's gallery next Wednesday. Submit your gallery next Tuesday for next next week. Submit your next destination.

Company Mentioned

Mention Thumbnail
featured image - How to Use console.log() Like a Pro: A Brief Guide
Marko Denic HackerNoon profile picture

@denic

Marko Denic

Software Engineer.

About @denic
LEARN MORE ABOUT @DENIC'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

Using console.log() for JavaScript debugging is the most common practice among developers. But, there is more...

The console object provides access to the browser’s debugging console. The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.

The most common Console methods:

console.log() – For general output of logging information.

console. info() – Informative logging of information.

console.debug() – Outputs a message to the console with the log level debug.

console.warn() – Outputs a warning message.

console.error() – Outputs an error message.

The most common Console methods

The most common Console methods

Custom CSS styles for a console.log()

The console.log output can be styled in DevTools using the CSS format specifier.

Custom CSS styles for a console.log()

Custom CSS styles for a console.log()

String substitutions

When passing a string to one of the console object’s methods that accept a string (such as log()), you may use these substitution strings:

%sstring

%i or %dinteger

%o or %0object

%ffloat

String substitutions

String substitutions

console.assert()

Log a message and stack trace to console if the first argument is false.

console.assert()

console.assert()

console.clear()

Clear the console.

console.clear()

console.clear()

console.count()

Log the number of times this line has been called with the given label.

console.count()

console.count()

console.dir()

Displays an interactive list of the properties of the specified JavaScript object.

console.dir()

console.dir()

console.group() and console.groupEnd()

Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().

console.group() and console.groupEnd()

console.group() and console.groupEnd()

HTML elements in the console

HTML elements in the console

HTML elements in the console

console.memory

The memory property can be used to check out the heap size status

Note: memory is a property and not a method.

console.memory

console.memory

console.table()

Displays tabular data as a table.

console.table()

console.table()

console.time() and console.timeEnd()

console.time() – Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.console.timeEnd() – Stops the specified timer and logs the elapsed time in seconds since it started.

console.time() and console.timeEnd()

console.time() and console.timeEnd()

console.trace()

Outputs a stack trace.

Alt Text

Alt Text

Happy coding! ❤️

RELATED STORIES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa