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 check if two strings are anagrams in PHP?

How to force SSL in Apache's .htaccess?

How to make Apache force download of files (in .htaccess)

Is multiple inheritance supported in PHP?

What are the SPL Iterators in PHP?

How to block IP addresses in Apache by using regular expressions (regex) in .htaccess

How do Invokable Controllers work in Laravel?

How to merge/concat two arrays together in JS?

What is the difference between reference and primitive data types types in Javascript?

How to find an item by Primary Key in Eloquent, or throw a ModelNotFoundException exception if it isn't found?