What are some ways you can log debug messages and data in JS?

JavaScript: What are some ways you can log debug messages and data in JS?

There are a few commonly used functions used for logging debug messages. You can use these to show data and messages in your console. In chrome, press cmd + alt + i to show the inspector and click the console tab.


console.log('something', another_variable, []) - This is the most common one. You can put any variable to this and it will provide some kind of output to the console.

Timing stuff

/*... do something here ...;*/

The code above will tell you the duration between the time and timeEnd calls. You must use the same identifier in both calls.

Show data as a table

console.table({foo:123, bar:456}) - this will generate a nice looking table

Show errors and warnings

console.warn('a warning') - as its name suggests, it will show a warning in the console.

console.error('Uh oh! an error!') - this will show an error in the console. It is useful to do this, especially for debugging in the browser. You can click through to the line/location of the source of the error.

Clearing the console.

And if you have too much in your console, you can do console.clear() to clear things up.

webdevetc profile pic

I am a 29 year old backend web developer from London, mostly focusing on PHP and Laravel lately. This (webdevetc.com) is my blog where I write about some web development topics (PHP, Laravel, Javascript, and some server stuff). contact me here.


Comments and discussion about What are some ways you can log debug messages and data in JS?

Found this interesting? Maybe you want to read some more in this series?

Or see other topics in the JavaScript language

Or see other languages/frameworks:
PHP Laravel Composer Apache CentOS and Linux Stuff WordPress General Webdev and Programming Stuff JavaScript
Or see random questions

How to Extract Query String (from a URL) Into an Associative Array in PHP

What are PHP's PSRs?

What are route patterns in Laravel?

How to get the first row that matches some where queries, or create it if it doesn't exist (in Laravel's Eloquent)?

How to provide a default model object for relationships?

How to autoload helper files with composer?

How to disable file hotlinking in Apache with .htaccess

How to convert between types in JS?

How to set the Expires header in .htaccess

What are some ways you can log debug messages and data in JS?