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

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

console.time('some_id');
/*... do something here ...;*/
console.timeEnd('some_id')

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
webdevetc

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.



More...


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 get the last character of a string in JS?

How to get the type of a variable in JS?

A list of operators on Eloquent's where() method

How to hide the server signature (hide Apache info) from HTTP headers with .htaccess

How does PHP compare objects?

How to hide directory listing in .htaccess?

How to show a specific view file for certain error codes?

How to check if an object or variable is an array, in JS?

How to block an IP range based on CIDR in Apache with .htaccess

What is the max size, by default, of GET variables?