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 order a Laravel hasMany relationship?

How to use Anonymous classes in PHP 7?

How to increment a value in the database

What are the main error types in PHP

What is Agile software development?

How to find the intersection (same values) from two arrays?

How to run an artisan command from a controller

How to eager load multiple levels of relationships in Eloquent?

How do you access the php://input stream?

How can you check if a variable is alphanum (alphanumeric, letters and numbers only) in PHP?