{"componentChunkName":"component---gatsby-theme-teklog-src-templates-post-tsx","path":"/firefox-and-chrome-developer-tools-how-to-go-beyond-console-log","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.tekmi.nl","author":{"name":"Teklog","avatar":"/img/tekmi-icon.svg"}}},"blogPost":{"frontmatter":{"title":"Firefox and Chrome Developer Tools - how to go beyond console.log","slug":"firefox-and-chrome-developer-tools-how-to-go-beyond-console-log","series":null,"date":"2019-06-28","datePretty":"28 June, 2019","coverImage":{"childImageSharp":{"fixed":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAQX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB18D5bzlB/8QAGxAAAgIDAQAAAAAAAAAAAAAAAAIRFAEDEiH/2gAIAQEAAQUCtliRW8RehtUYk//EABYRAAMAAAAAAAAAAAAAAAAAAAABEf/aAAgBAwEBPwGMjP/EABYRAAMAAAAAAAAAAAAAAAAAAAABEv/aAAgBAgEBPwGkUj//xAAZEAEAAgMAAAAAAAAAAAAAAAAAATEQETL/2gAIAQEABj8Cx2qG1y//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEhQVFxkf/aAAgBAQABPyETVmYDnfcHR5EwJBrMFWIf/9oADAMBAAIAAwAAABAjz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QK//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QI//EABoQAQADAQEBAAAAAAAAAAAAAAEAESGB0TH/2gAIAQEAAT8QvwgKu6uHC0ZqAJTwKCaaqvs+NhrucgxWOeT/2Q==","width":1000,"height":750,"src":"/static/d823b0c9744a6f6172b134188862524e/a7715/cyclingRouteFieldsClouds.jpg","srcSet":"/static/d823b0c9744a6f6172b134188862524e/a7715/cyclingRouteFieldsClouds.jpg 1x"}}},"author":"Adam","authorAvatar":{"childImageSharp":{"fixed":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMFAgT/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAB6t5LRWgqZwrlmiE//8QAHRAAAgIBBQAAAAAAAAAAAAAAAgMAAREEECEiM//aAAgBAQABBQJ77CJIy2cPXS8niHEeQFeP/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHBAAAQQDAQAAAAAAAAAAAAAAAQACEFERIjFx/9oACAEBAAY/AgG9K3xAdSNT6Y//xAAcEAACAwADAQAAAAAAAAAAAAAAAREhQRAxUWH/2gAIAQEAAT8hQxfd4Ku1Y0QWqJYSQnRcE0rT6Gif/9oADAMBAAIAAwAAABCUF0P/xAAYEQEBAAMAAAAAAAAAAAAAAAABABARQf/aAAgBAwEBPxABFxy3f//EABcRAQEBAQAAAAAAAAAAAAAAAAABETH/2gAIAQIBAT8QYnWR/8QAHBABAQEBAAIDAAAAAAAAAAAAAREAITFBUXGR/9oACAEBAAE/EO4YeNBr9KKOP5r017BL2JnAYCW9nrXgB8p849uFlfXDIhqM7v/Z","width":40,"height":40,"src":"/static/6c8382e6e16f3f6564acde1a72bbc51f/0cce2/authorAvatar.jpg","srcSet":"/static/6c8382e6e16f3f6564acde1a72bbc51f/0cce2/authorAvatar.jpg 1x,\n/static/6c8382e6e16f3f6564acde1a72bbc51f/56ed0/authorAvatar.jpg 1.5x,\n/static/6c8382e6e16f3f6564acde1a72bbc51f/2b9ee/authorAvatar.jpg 2x"}}}},"timeToRead":2,"excerpt":"Introduction Both Firefox and Chrome provide some sort of Developer Tools for technical users. Additionally, both browser vendors regularly improve…","html":"

Introduction

\n

Both Firefox and Chrome provide some sort of Developer Tools for technical users. Additionally, both browser vendors regularly improve their tools and surprise us with brand new features.

\n

In today's post, we are going to talk about console logging. It's the most basic debugging tool and an indispensable companion of any Javascript developer.  But did you know that there is actually much more than a simple console.log command?

\n

The good news is that browsers support more methods for logging data, including:

\n\n

Each browser displays them a bit differently, but both provide exactly the same functionality. They even allow to mute or filter them, if console logging becomes too noisy.

\n\n\n\n\n\n\n\n\n\n\n\n\n
Firefox
Chrome
\n \n \n \n \n \n \n \n \n
\n

Additionally, each of the aforementioned methods can be called in two ways:

\n\n
// first param is a string with placeholder\nconsole.warn(\n  'Hi %s, warning %.3d for object %o and float %c%.2f',\n  'Adam', \n  1, \n  { type: 'HUMAN', dob: 1900 }, \n  'color: white;text-decoration: underline', 2.5\n);\n\n// the list of parameters\nconsole.debug('debug1', 'debug2', 'debug3');
\n

Both browsers support all of the placeholders, however, Chrome doesn't format the integers and floats as nicely as Firefox.

\n

Besides console logging, both Chrome and Firefox support messages grouping. It's possible thanks to the following methods:

\n\n

Whichever way you choose, make sure you always call console.groupEnd in order to properly close the given group.

\n

Did you know that you can also nest one group within another?

\n
console.group('Level I');\n console.log('Log I');\n console.info('Info')\n console.group('Level II');\n  console.warn('Warn');\n  console.groupCollapsed('Level III');\n   console.error('Error');\n  console.groupEnd();\n console.groupEnd();\n console.debug('Debug');\nconsole.groupEnd();
\n

Summary

\n

So far, we have only scratched the surface of Firefox and Chrome Developer Tools. There is much more to discover and new updates come pretty regularly.

\n

Therefore don't wait for too long and simply start exploring this huge collection of Browser's features yourself.

"}},"pageContext":{"postId":"f9d8b19c-a8d3-5ee3-98c1-4748e63670c4","slug":"firefox-and-chrome-developer-tools-how-to-go-beyond-console-log"}}}