Skip to content

Instantly share code, notes, and snippets.

@rommmka
Created October 29, 2018 15:46
Show Gist options
  • Save rommmka/4bf1d77073663696acb09213ba89ea95 to your computer and use it in GitHub Desktop.
Save rommmka/4bf1d77073663696acb09213ba89ea95 to your computer and use it in GitHub Desktop.
#### 1. `console.group(‘name’)` and `console.groupEnd(‘name’)`
As the name suggests it will group multiple logs in one single expandable group, you can even nest them if you’d like to further group them. `console.group(‘groupName’)` starts the group and `console.groupEnd(‘groupName’)` closes a group. There is a third function `console.groupCollapsed` which creates the group in collapsed mode.
#### 2. `console.trace()`
When you need to find the whole call stack of a function, console.trace is super useful, I use this mostly to find from where callback is passed, it will print the whole stack-trace. Let’s take an example:
```js
function foo() {
function bar() {
console.trace();
}
bar();
}
foo();
```
#### 3. `console.count(“counter: ”)`
I use this so much, mostly to find how many times a component is rendered in react. As you can guess this will log the total count of the number of times it was executed. Remember if you change the string which is logged, it will start a new counter for that string, we also have a handy function to reset the `counter: console.countReset(‘Counter’)`, the name should match though.
#### 4. `console.time()` and `console.timeEnd()`
`console.time()` will start a timer and will end it once `timeEnd()` is called, they are mostly used when you need to do performance check. You can also pass a string to time and timeEnd and it will start another timer of that name.
#### 5. `console.assert()`
So let’s say you need to check if some expression/value ever becomes false, and when it does you want it to be logged, now you would normally wrap this is an if-else, but no need to do that console.assert does the job for you, you need to pass the condition first and message/object as 2nd param. Let’s check the following example
```js
function greaterThan(a,b) {
console.assert(a > b, {"message":"a is not greater than b","a":a,"b":b});
}
greaterThan(2,1);
```
#### 6. `console.profile([label])`
How many times have you wished if you could start profiling when it is needed instead of keeping it on from start and then manually finding the point which you needed to profile. Well, `console.profile()` comes to rescue. when you are done profiling just call `console.profileEnd()`, let’s take an example:
```js
function thisNeedsToBeProfiled() {
console.profile("thisNeedsToBeProfiled()");
// later, after doing some stuff
console.profileEnd();
}
```
this will log and add in profiles panel.
#### 7. `console.timeStamp([label])`
Adds an event to the Timeline during a recording session. I use this to mark places where the API call returned and when was the data processed, there are many use cases for this though.
```js
console.timeStamp('custom timestamp!');
```
#### 8. `console.clear()`
This is pretty clear(pun intended), it clears the console, nothing much here.
#### 9. `console.memory`
This is not a function, but a property which stores your HeapSize, when perf is tricky and graphs are hard to read, simply logging the memory might help.
#### 10. `console.table(array)`
This is my fav. and best trick, it prints a slick table, with which you can interact, you need to pass an array of object to it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment