«   Previous tip Next tip   »

Chrome DevTools: Better JavaScript logging with the Log Management UI

Last updated: 20th July 2020
Better JavaScript logging with the Log Management UI
I'm going to publish a free ModernDevTools.com lesson to YouTube soon. Subscribe to get notified!

The new Log Management UI is an experimental feature in DevTools. Once enabled, you can create console.log functions which have their own context.

Try this snippet of code in the Console Panel to use the Log Management UI:

const thirdPartyLogger = console.context('3rd Party')
const infoLogger =  console.context('Info')
const requestsLogger =  console.context('Requests');

thirdPartyLogger.log('Something about a third party script')
infoLogger.log('An information log')
infoLogger.log('The log management UI helps group this')
infoLogger.log('This is experimental, in Canary! 🆕')

Logs join different categories which you can navigate through. This helps decrease the noise when viewing many logs which are all combined into one section.

«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week