We work with her every day, and yet we rarely take the time to really get to know her?
In this article, we'll go over a short list of advanced browser console features, going beyond the simple log function.
NB: just to save you going back and forth between this page and the excellent MDN documentation, I will use function typing with style notation Typescript.
<
h4>group, groupCollapsed, groupEnd
<
h4>
The console API (non-standardized, but respected by at least Chrome)
console.group(name:string) allows you to group the following logs in a foldable/unfoldable group as desired. Depending on whether we use console.groupCollapsed(name:string) or just group, the group will be folded/unfolded respectively. To close the group, use console.groupEnd().

function groupLogDemo() {
	console.group('demo');
	console.log('i am in the group');
	console.log('me too');
	console.groupEnd();
}

groupCollapsed appears closed by default.
This allows to have structured logs, like it should be. In this regard, to go further, I advise you to study the custom Formatters, a Chrome API that allows you to do wonders, which will probably be the subject of a more detailed article on my part. It went a little under the radar, but some articles talk about it.

For the moment, it's a non-standard API, but let's not hide it: the development consoles of Firefox, Edge, IE pale in comparison to the juggernaut of webkit.

<
h4>table
<
h4>
About formatting, when you want to log an array of objects that have more or less the same shape (understand: the same properties), it is desirable to use for this purpose the function console.table(array:any, columns?:string[]). Judge by yourself :

function tableDemo() {
    console.table([{a: 1, b: 2, c: 3}, {a: 'foo', b: false, c: undefined}]);
    console.table([[1, 2, 3], [2, 3, 4]]);
}

Question : that's all well and good, but wouldn't there be more practical features, like… Being able to write with burning letters in the console?
The answer is a big "yes!" », thanks to the… (drum roll)… formatting !

These few lines of code...

function logFireDemo() {
     // notez le %c au début du premier argument
     console.log('%cUuuuuh yeah !', `text-shadow:0 0 20px rgb(254,252,201),
        10px -10px 30px rgb(254,236,133),
        -20px -20px 40px rgb(255,174,52),
        20px -40px 50px rgb(236,118,12),
        -20px -60px 60px rgb(205,70,6),
        0 -80px 70px rgb(151,55,22),
        10px -90px 80px rgb(69,27,14);font-size:90px;color:white`);
}

…should fill your deepest desires :

<
h4>Drive your colleagues crazy
<
h4>
If you want to encourage your colleagues to use some of the console methods detailed in this article instead of console.log, maybe you could monkey-patch the log function to write invisible (or other April Fool's) text and drive them crazy. #machiavel #nudge
Note however that having blinking text is unfortunately not possible, since you need animations for that… Even if it looks like the fire blink will one day return to Chrome with the property text decoration

Various tips and tricks for Chromium devTools

$0 references the last element selected in the elements panel. $1 is a reference to the penultimate, and so on. Moreover, the last result of an expression executed from the console is accessible with $_, the equivalent of ANS on our old calculators (doesn't that make me feel any younger?).
In Devtools, you can inspect a function or DOM element with the command inspection.

inspect($3);

will inspect the antepenultimate item in our history of explored nodes in the items devTools panel.
Besides, this $… It would be so nice if it could allow to make requests in the DOM of the page… Well, ladies and gentlemen, devTools allows to do it without having JQuery in our global object!
$(selector: string):HTMLelement will return you the same as document.querySelector(selector:string)
"But if we want to make a document.querySelectorAll(…) ? you will ask me. Don't panic, there's a shortcut for that too: $$(selector:string):HTMLElement[]
But wait! There's more… If you want to do XPath queries, you can use $x(path:string)

// retourne la liste de tous les paragraphes qui contiennent
// au moins un lien
$x('//p[a]');

Your console is all cracra and you want to do a spring cleaning?

clear () is here to serve you. But if you prefer shortcuts, you can do CTRL+L (windows, linux, macOS), it's even faster.
The console can also make your life easier to measure the execution time of your functions with console.time(label?:string)

function timeDemo() {
    console.time('testTime');
    setTimeout(() => {
      console.timeEnd('testTime');
    }, 0);
}

This time is not precise to the microsecond, but you will have to settle for it before my next post on the fantastic possibilities offered by devTools. Unless curiosity piques you and you are looking for information on your own window.performance.now and the User Timing API...
See you very soon for new adventures in the wonderful world of DevTools™, on the JS-Republic blog, of course 😉

 
 
...
 
 
 
 
Hidden Bonus Tip: console. profile(name: string) / console. profileEnd(name: string) allows you to save the flame chart of the execution of a function, consultable after the fact in devTools – Firefox does not offer this functionality.
Julien, JS-Republican @JSRepublic
[actionbox color=”default” title=”” description=”JS-REPUBLIC is a service company specializing in JavaScript development. We are an approved training center. Find all our technical training on our partner site dedicated to Training” btn_label=”Our training” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]