This is your own fully customizable and styled console.log
All of us front-end developers use the console for debugging every day. And it happens that there are too many logs, and they get lost among themselves, get confused and in the midst of all this confusion it becomes difficult to find specific information, and log.error and log.warn do not really help. I recently released my own package for npm, which significantly improves the visual and functional component of this integral part of development!)
Try it yourself: https://www.npmjs.com/package/@zhigamovsky/styled-console-log
What does the npm styled-console-log package provide?
Templates
A huge number of ready-made templates with completely different color palette for full everyone. For example:
or
Dividers
Useless :) , but at the same time beautiful dividers. Help to divide logs, without any dummy text. I don't use it, but it will may help someone.
Display Images and Gifs
You can display any images and gifs in console. It's pretty simple to use and also customizable dimension and background color.
Overwriting templates
If suddenly you do not like some template, you can easily change its styles and icon and all subsequent calls will be with your own styles + this also affects the dividers.
Create your own templates
Of course, it is possible to add your own template to the existing ones (for example, in an entry-point file). This is done very simply: by the first call, we pass the slug of your teamplate, for example jolly (as you will later call it Log.jolly ('...')), then we pass the unicode icon (or any text / character), and the third we pass the list of css styles that will apply to it. The only thing left to do is to use it. Easy, isn't it?
Environment
Release / Debug environment
Since console.log itself sometimes loads the page, it is possible to hide / show all of logs with one command without having to delete / comment in right in the code.
For example, it's time to drop the build to the customer, or upload a new update of your web application, so you want to hide all console.log with one command, because you don't have time to delete them all manually in the code on all pages, component or files. You just need to write Log.setEnvironmentRelease () once in the entry point file and that's all, really all you need to do. And when you receive feedback from a customer with a list of bugs / improvements, you don't have to manually restore all the necessary logs. Just delete the line you wrote above and everything will return to its place. Conveniently?
Timing environment
Timing environment does not conflict with the previous two in any way, but only complements them. Once enabled, it allows you to see all the dates and times of each log. Sometimes this is important. The display and type of dates and times are completely customizable (read the more detailed README of the package).
Summary
What the package provide:
━ a large number of ready-made templates from the library
━ overwrite styles of any existing template
━ the ability to display images and gifs to the console
━ the possibility creation of an unlimited number of your templates
━ the ability to hide / show all logs with one line code (Debug / Release Environment)
━ the ability to hide / indicate / configure the time and date of each log (Timing environment)
Future
Future features:
━ TypeScript support
━ the ability to set the log level
━ the ability to save / receive / delete the entire log history
━ the ability to use several color templates at the same time in one log
The package has helped me on two React projects, two React Native projects and 3 Ionic + Angular projects already, so feel free to use it. And welcome to GitHub issue and PR!
Give me your feedback about post at LinkedIn or my Telegram: https://t.me/zhigamovsky