#32 - Various Console Log Methods in JavaScript || Don't use console.log(), use this instead of.

hey guys this is nav here welcome back to navine automation labs and back to our JavaScript Series so this session is uh very interesting today we are going to talk about uh what are the different options with console so console is a global object used in JavaScript with that console you can print the logs warning different messages on the console so whatever we see here on the debug console or on the terminal whatever the output is coming it's coming when we print something thing and uh when we write console.log something then it's coming so for example let's see if I'm writing simple this console do log and I really want to print something for example let's see Hello World then when I run this so you can run it from here let's you go to run run without debugging and uh when you run this you open the debug console here you can see the hello world is coming if you really want to run it with the from the terminal that also you can run it with the node and whatever the file name is there that console do JS we can run it so for example let's see I'm in this directory then I'll go to my uh JS practice then I'm going to write that a node console. js and hello world is also getting printed right so most of the time developers they use console.log just to print it but there are some really good amazing features available in console with the console we can use other methods also so for example let's say if I really want to use console do error I want to print it so error is also another method so let's see here I'm saying that uh let's see some array error whatever right and when you run it again so let's run it and let's open the console and here you will see the array error is getting printed in the red color so it will be easy for me that hello world is a normal log and U array error is coming in the red color so this is a kind of error for me same thing if I really want to print console do warning also we can do that here so console. Warn and let's see here I'm printing some uh warning message that I really want to print then in that case again I'm running it so here you can see that some warning is getting also printed in the red color here like that so log error warning these are the three important states are there there is one more console doino also if I really want to print any specific information on the console that also you can uh print it for example let's see I'm writing some basic information that okay this is my Js code like this so then again I'm running it this is also printed in the normal way just like the log is printing it I'll do one thing let me just comment it out I don't want to print unnecessary things on the console there are some really nice features also that with the help of uh uh console we can do that for example let's say I really want to print an object so first let's create an object here so let's create one object that in JavaScript we know that we can create the object let's see name is equal to John so this is one user object that I have created if I really want to print it on the console generally what we do that console. log let's see I'm printing it and then printing with the user and then I'm running it so see the console output if I'm logging it it's giving me that okay fine in this one single line format like name age and everything but if I really want to print in the tabular format or in the table format what I can do here is simple like see console do a table method I can use it and Supply the object name here now you see the difference when I run it it is actually giving me the format like this this is so nice that name age City and everything right so like this we can do that so tomorrow let's see I have two objects let's see this is the object number one and let's see one more user object that I'm creating let's see user one here and the user one is a different let's see I'm printing Lisa Lisa is 30 and let's see city is LA and the country is USA so I can just print two values also in the table just pass in the curly Braes user comma user one and then closing the curly braces here like that so I can just see that user one user and user one I'm printing together so I don't want to print in the console.log so let me just comment it out and then let's run it and let's see what kind of table it is creating so can you see it's a a very nice table it's creating with the proper uh taba format with the row and columns so it will be easy for me to check the console output that what kind of uh values are there in a specific object as compared to the previous one right so I hope this is clear then um what else we can do here that grouping also we can do that so group feature is also like something I really prefer so for example let's see I'll do one thing um let's write One console dot this method I can use it group method and then I really want to print some logs in a particular group so let's see this is my uh login feature something like this right and then I'm printing some messages over here that console do let's see log that I'm Printing and uh another thing that I'm passing that enter username password so three three things let's see I have return after group so I can create a group here login feature and then after that I can close this particular group I can end this particular group so how we do this console do end group method or group end method sorry you can use it here so you can see group end and what is the group end it means this login feature group that you have created it will be ended here I'll do one thing I don't want to print this particular table and let's run it what is the console output we are getting so you can see that you can just see collapsing feature is available now login feature this login feature having four important logs are there so it will create like like a subl log under the main log so this is like main heading and four subl logs are there so you can do it like this so this is something really good that you can just combine multiple groups together and then print it on the console now I'll show you that specific console. time also let me just comment it out I don't want to print these things so timer or we can say that we really want to measure the time but how much time it is taking to complete a specific task so for example that I can start the timer here that console.time method I can use it and let's see I really want to perform some task here so my task is that print one to n values n number of values that I really want to print so I can use a for Loop or anything whatever the task that you really want to use so let's see I'm just printing something here that one to n number and here I'm writing not that amount let's see I'm writing up to 10,000 right and then I'll do one thing that I just simply write console. log and print the value of I here so this is the task that I'm doing and after that I really want to end this particular task or end the timer so I mean not the task just simple end the time so I'm simple writing Time end method and I'm saying that whatever the task is there that print uh one to n values so let's run it and let's see what happens so run without debugging and uh here you can see on the debug console 1057 millisecond and it's approximately around 1 second it is actually giving me here right so uh it will round off the value and saying that 1.05 8282 so let's increase the number here so let's say I'm writing adding one more zero here it means up to uh something 100,000 values I really want to print from 1 to n or 1 to 100,000 so let's run it again and let's see how much time it will take so see it will keep printing on the console and once we get the the final thing and once everything is done it will tell me that some whatever the exact time taken so now you can see that it took around this amount this amount of milliseconds around 7,743 millisecond around 7.74 okay so this is what you can do it here like this so this is also a nice feature especially for checking the asynchronous task which is taking some time you can just check the time out here or check the how much time it is taken by the specific task okay so once all these things are done so for example there is one more method is there that uh console. clear console do clear see we can clear the console from here also you just simple right click on it and then clear the console the console is clear from here he again cleared the console it's it got cleared from here but if you really programmatically if you really want want to clear let's say you have printed something in your project or something you keep printing it and then after that you really want to clear some unnecessary information or some something you want to clear or previous logs you want to clear if you really want to clear the previous logs that what you can do you can simply write that console dot a clear method you can use it here so for example let's see before that I'm just printing that it will automatically clear so first it will print this and then will clear so it will be very fast although but uh let's see see console was cleared so it is actually printing reset password but actually got cleared right so programmatically also you can clear it then uh couple of other methods Also let's see console. count method also you can use it here so for example I'm writing that console do account let's say I'm printing the reset password and I'm printing this message a couple of times let's see uh one more time three times let's see I have printed then then I'm running it again so console. count it will tell you that logs the number of times that console. count has been called okay with a specific label so it says that okay reset password 1 2 and three you can see it here it will give the counter here like this so if you really want to print with the counter number that also you can do it here okay then there is another method that you can write the assertions also with the console so there is one method they have given assert method and in assert method you can write a condition for example I'm putting a condition that if 10 is equal to equal to 20 so obviously 10 is not equal to 20 then I want to print an error message right so I'm saying this is failed so this error message or this message will be printed only once the assertion is getting failed see I'm running it so here you can see this is failed assertion fi but if I'm making 10 is equal to a 10 then I'm running it again it's not printing this message because assertion got passed here right and I'm liting let's see let flag is equal to True okay and then I'm checking this flag value here directly I'm passing the flag here which is actually true so if it is true then assertion passed no need to print the message see it's not printing it but uh let's see this flag is getting false and and I'm running it again then in that case it says this is failed this is failed like that right so assertion also you can do it then after that tracing is also uh something interesting let's see there is a function you want to trace just like in other programming languages like Java we have print stack Trace so tracing of a specific method also you can check it that from where it got executed and then give me the complete execution stack of the of that particular method so what we can do let's see create a function here let's see I'm creating a function and the function let's see I'm writing the method name is uh test my job function okay and this test my job function I just need to write one thing here that console. Trace method is there that's it I want to trace this particular function and uh after this I'll just call this method now the test my job so see I'm calling from here from line number 39 then it will go to line number 36 and then it will give me the complete tracing information about this particular method so let's run it and let's see so here you can see that console. Trace is giving me Trace from here you can see that from line number 39 you actually reaching at line number 37 that console. race it's coming here right so complete stack race it's giving here like this just like we do give it uh we get it in uh Java and other languages like C also so exactly same thing you can trace it also sometime it's really useful for the debugging point of view you can use that so there is one more thing in the console we can do like we can just print a CSS also like we can use a cses while printing anything like if you really want to print that particular message on the console or any information on the console in the colorful console or something like uh bold color or some background color you really want to set you can do it some special information you really want to emphasize or some welcome message on the console you really want to use it you can use it how to do this see it's pretty simple uh console.log you simply write it here and then here first you start with double code and then start with modulus C or you can say percentage C here this C is saying that this is a CSS selector that we have to apply and whatever the message that you really want to use it here so for example let's see I'm writing that I uh love JavaScript uh coding something like this let's see I really want to print okay like this and then after that you have to give the other information for the CSS selector point of view so let's say I'm writing in the new line that I'm saying that the color should be the red color okay and then put a semicolon here and then I want that background color so this is what a CS is that I'm defining the background uh should be let's see something I'm writing a green color then again semicolon and then what will be let's see the border the border that I'm writing that border should be a solid border so it will be like solid red color border that I really want to use it here okay and then starting bracket and end ending bracket here okay so let's run it and let's see how exactly it works so run without debugging and uh open the console here the debug console can you see it's coming like this I love JavaScript coding right so the background color is green you can see and it's sprinting it so if I change the background color to Red you can change it to the color that you want and then run it again now you can see that it's coming like this actually C l o r we have to write it here and then run it again okay now you can see the color is green and the background is red here okay that was a type of mistake from my side right so let's see if I'm writing any light blue color that also you can write it let's see light blue color and uh the background color and the actual font color will be in the red color so that also we can do it so here I'm writing red color and run it so you can see that the the background is little like light blue and the font is with the red color like anyways like whatever the combination that you want to write H up to you you can write it here same thing let's see if I really run this particular script so let's go to the browser and if I run all the scripts whatever the today we have seen you can run it directly here also in the browser so simple go to the console here and see here I'm using the same script and it's giving me the same thing here right so same thing if I really want to print with the object here also that also we can do it so for example let's see these two objects that I'm defining it and then I'm printing in the form of table here so let's do one thing use this guy and remove the lock from here and uh copy this entire thing here let me just clear the console right so two objects that I have created that I'm printing in the form of table so you will see a table also here nice user and then everything is coming in the form of table so this is a very handy thing with the console logging it will make your console uh really good in terms of uh more readable more uh proper debugging you can do that proper error message you can display so that it'll be easy for you to catch the problems so I hope you liked it and start using these features thank you so much guys

Channel: Naveen AutomationLabs

Views: 1,806

Keywords: Various Console Log Methods in JavaScript, console logs in javascript, logs in javascript, console methods in javascript

Id: sFO5S3cdZ0o

Length: 17min 23sec (1043 seconds)

Published: Thu Oct 05 2023