/dev tips

🎊   The Modern DevTools course has now started! Visit ModernDevTools.com to find out more   🎊

(152) Accessibility Tree 150 animated tips on Chrome DevTools (154)

Chrome DevTools: Better JavaScript logging with the Log Management UI

15th August 2017
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 Canary 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! 🆕')
fetch(location.href).then(requestsLogger.log)

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.

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