Let's explore browser's console in depth
- Inbuilt console methods
- Coloring text of console.log()
- Advance console styling with CSS
Why the hell we should learn about console's features which are not visible to our end user? No, console is not meant for users. It is majorly used for debugging purpose during the development period and should be removed during production as your application might print some sensitive content that you dont want to be visible for users.
Many a time we come accross hundreds of console.log and we get confused and it takes time to find out what we are loogin for. So knowing some additional features apart from console.log() might make your job easier in debugging.
Already we have bunch of inbuilt methods that we can take advantages of
1. console.log()
//throw anything from number, string, array, object
//console will print it
console.log(1);
console.log('A string');
console.log([1,2,3]);
console.log({name:'Jhon'});
Do you know syntax of C? We can use string substitution in console.log as well.
console.log('My name is %s', 'Jhon');2. Groups
You can group each message into a particular group when you have large set of console logs. You can either use console.group() or console.groupCollapsed() to start a group and to exit a level of groups you can use console.groupEnd()
//start a group
console.group();
//or
console.group('Search groups');
//Start a group and collapse
console.groupCollapsed();
//end the group level
console.groupEnd();
3. Time
Starts a timer using console.time() that be used calculate time taken by an operation. Each timer expects a unique name, and may have up to 10,000 timers running on a given page. When you call console.timeEnd() with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started.
//start a timer
console.time('name');
//stop the timer
console.timeEnd('name')
//outputs
name: 9894.18994140625 ms
4. Errors and warnings
Show a red background and colored text to display error messages using console.error(). Show a yellow coloured warning text in console using console.warn()
//error
console.error("This is a mistake");
//warning
console.warn("This is a warning");We messed up with console lets clear it up using console.clear()
//clears the console
console.clear();Lets color
Console also allows us to play with colors to defined our desired color.
//display a blue colored text
console.log('%c Blue text', 'color:#3176ff');
//different colored text
console.log('%c Green text %c Blue text', 'color:#07d666','color:#3176ff');
Applying background colors
//display blue background text
console.log('%c Blue text', 'background:#3176ff;color:#fff');
//display colored background
console.log('%c Green text %c Blue text', 'background:#07d666;color:#fff','background:#3176ff;color:#fff');Lets dive bit more
Console also allows us to apply various CSS properties, lets try the below codes
//display text with background
console.log('%c This is a title', 'padding:100px;line-height:100px;color:#005;background:url(https://png.pngtree.com/thumb_back/fh260/back_pic/02/66/55/50578b1ecd8c4ae.jpg) no-repeat;');
//create a button like text
console.log('%c This is a title', 'padding:20px;color:#fff;background:#3176ff;border-radius:30px');//Gradient button
console.log('%c This is a title', 'padding:20px;color:#fff;background: linear-gradient(59deg, rgba(47,32,187,1) 0%, rgba(135,253,255,1) 100%)');//Gradient shadow text
var css = "font-size: 40px;line-height:100px;padding-right:100px;text-shadow: -1px -1px hsl(0,100%,50%), 1px 1px hsl(5.4, 100%, 50%), 3px 2px hsl(10.8, 100%, 50%), 5px 3px hsl(16.2, 100%, 50%), 7px 4px hsl(21.6, 100%, 50%), 9px 5px hsl(27, 100%, 50%), 11px 6px hsl(32.4, 100%, 50%), 13px 7px hsl(37.8, 100%, 50%), 14px 8px hsl(43.2, 100%, 50%), 16px 9px hsl(48.6, 100%, 50%), 18px 10px hsl(54, 100%, 50%), 20px 11px hsl(59.4, 100%, 50%), 22px 12px hsl(64.8, 100%, 50%), 23px 13px hsl(70.2, 100%, 50%), 25px 14px hsl(75.6, 100%, 50%), 27px 15px hsl(81, 100%, 50%), 28px 16px hsl(86.4, 100%, 50%), 30px 17px hsl(91.8, 100%, 50%), 32px 18px hsl(97.2, 100%, 50%), 33px 19px hsl(102.6, 100%, 50%), 35px 20px hsl(108, 100%, 50%), 36px 21px hsl(113.4, 100%, 50%), 38px 22px hsl(118.8, 100%, 50%), 39px 23px hsl(124.2, 100%, 50%), 41px 24px hsl(129.6, 100%, 50%);";
console.log("%c Amazing text", css);