This content originally appeared on DEV Community and was authored by Romain Trotard
Are you a fan of console.log when you debug (instead of using debugger)? Or you want to make better logging for your scripts / applications?
You are in the right place! In this article, I gonna show you some console methods that you probably don't know that are going to make your logs better :)
Log with style: console.log
Okay, I'm sure you know this one. But did you know you can stylized your text.
You can do this by putting %c and defining the style in the following parameter (inline css format) before the text you want to stylize.
console.log(
"%c This is a stylized text",
"color:red;text-decoration: underline;"
);
Note: You can put multiple different stylized text in a same log:
console.log(
"%c This is a red text %c and a blue text",
"color:red",
"color:blue"
);
Note: You can do it with other logging function like
info,debug,warnanderror.
Make a quick counter: console.count
How many times when doing React you wanted to see how many times a component renders? Yep you can see it with the React Developper Tools but it's not enough quick for me :)
So you can make a counter thanks to console.count:
function MyComponent() {
console.count("Render counter");
return <p>A simple component</p>;
}
Note: The label is optional, by default it will be "default".
Log error with assertion: console.assert
If you want to display an error message when a specific assertion is false you can use console.assert:
const useMyContext = () => {
const myContextValues = useContext(MyContext);
// You probably want to throw an error if it happens
// It's only an example
console.assert(
myContextValue === undefined,
"useMyContext has to be used below MyProvider"
);
return myContextValues;
};
Full description of elements: console.dir
console.dir allows you to show a better description of objects. For example when you console.log a function it will only stringify the function, but with console.dir it will show you all properties:
function myMethod() {}
console.dir(myMethod);
Improve readability: console.group
If you have a lot of logs, it can be difficult to keep track of all these logs. Fortunately, console.group is here for you.
function myMethod() {
console.group("My method optional label");
console.log("Log that will be group");
console.info("With this one");
console.error("And this one too");
console.groupEnd("My method optional label");
}
myMethod();
console.log('Outside log');
Note: It's possible to nest
console.group. The label is totally optional but can really help you for debugging.
Make a nice table: console.table
If you want to display data inside a table, you can do it with console.table. The first parameter is the data to display (an array or object). The second one is the columns to display (optional parameter).
console.table(
[
{
name: "First algo",
duration: "3.2s",
other: "Hello",
},
{
name: "Second algo",
duration: "4.1s",
other: "Guys and girls",
},
],
["name", "duration"]
);
Make timers: console.time
When you want to see how long a method takes to run you can use performance.now() otherwise even easier console.time(), console.timeEnd() and console.timeLog():
function myMethod() {
console.time("A label");
// Do some process
// If you want to log the time during the process
console.timeLog("A label");
// Other process
// Will print how long the method takes to run
console.timeEnd("A label");
}
myMethod();
Note: The label is optional, it will have the "default" label. You cannot start a timer with the same label than already running one.
Display stacktrace: console.trace
If you want to know where is called your function then console.trace is your friend and will display the stack trace:
function children() {
console.trace('Optional message');
}
function parent() {
children();
}
parent();
What is your favorite console command?
Do not hesitate to comment and if you want to see more, you can follow me on Twitter or go to my Website.
This content originally appeared on DEV Community and was authored by Romain Trotard
Romain Trotard | Sciencx (2022-01-12T18:47:09+00:00) Unknown console API in JS. Retrieved from https://www.scien.cx/2022/01/12/unknown-console-api-in-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.