An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
Unknown console API in JS
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
,warn
anderror
.
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.
Original Link: https://dev.to/romaintrotard/unknown-console-api-in-js-2mek
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To