代码区项目交易流程

JavaScript Console Tips & Tricks


javascript, and the tools around it, have advanced a lot during the last couple of years. So, below you will see few tips and tricks that I find useful in my day-to-day development workflow, in regards to console logging.

01. Custom Css Styling in your console log statements

You can add custom styling to your log statements using the %c attribute.

E.g. you can separate the values of a and b using a Green and Orange text:

var a = { id: 1, name: 'Paris' }; var b = { id: 2, name: 'Bill' }; console.log('%c Section 1', 'color: green; font-weight: bold'); console.log(a); console.log('%c Section 2', 'color: orange; font-weight: bold'); console.log(b);
JavaScript Console Tips & Tricks
02. Log results in table format

Sometimes, it’s much easier to log results in a table structuring using console.table() .

Let’s assume you have the following values:

var a = { id: 1, name: 'Paris' }; var b = { id: 2, name: 'Bill' };

You can log them as object:


JavaScript Console Tips & Tricks

or as an array:


JavaScript Console Tips & Tricks
03. Measure how long it takes for an operation to complete

If you have a function or a piece of code that you want to measure how long it takes to complete, you can use console.time and console.timeEnd .

E.g. to measure how long it takes to sum 1000 values and with the following code:

console.time('Sum'); let sum = 0; for ( let i = 0; i < 1000; i++ ) { sum += i; } console.timeEnd('Sum');

the output will look like this:


JavaScript Console Tips &amp; Tricks
04. Log values with Property Names

If you have multiple values that you want to log, sometimes it’s easier to have also the property name next to the object values:

var a = { id: 1, name: 'Paris' }; var b = { id: 2, name: 'Bill' }; // instead of this console.log(a, b); // do this console.log({a, b});

and the output will look like this:

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

点击收藏

LAST different div transition/show when hovering over left or right side Is it possible to apply basic authentication / middleware in on routes with a wh ... NEXT