几个有趣的Console对象方法



朋友们,美好的一天!

在本简短说明中,我想与您分享有关Console对象可以与console.log()一起使用的一些方法的信息。

方法的完整列表可以在这里找到。

从言语到行动。 是的,将使用Chrome。

Console.debug()和console.info()


Console.debug()和console.info()用于向控制台输出参考消息,实际上,它们是console.log()的类似物。 console.debug()的功能之一是,仅当控制台配置为显示调试级别消息时才显示此方法显示的消息(对于Chrome,“详细信息”的“级别”选项卡中有一个选中标记)。

让我们创建一些对象:
const harry = { name: 'Harry', age: 28, married: false, job: 'developer', salary: 300, }, alice = { name: 'Alice', age: 23, married: false, job: 'manager', salary: 100, }, bob = { name: 'Bob', age: 32, married: true, job: 'tester', salary: 200 } 

使用console.log(harry,alice,bob)在控制台中列出它们:


现在,使用console.debug()提供其他信息(“ \ n”是换行符的控制字符,开头的空格用于对齐):
 console.debug( ' The first employee is', harry.name, '\n The second employee is', alice.name, '\n The third employee is', bob.name ) 

我们得到以下内容:


最后,使用console.info(),使用通配符(“%s”是字符串,“%d”是数字,“%s”是应用样式的指令):
 console.info(' This is %c%s%c. \n He\'s %d years old. \n He\'s %s. \n He works as %s. \n His salary is %d.', 'font-size: 1.2em; font-weight: 600; color: deepskyblue; text-decoration: underline;', harry.name, '', harry.age, harry.married ? 'married' : 'not married', harry.job, harry.salary) 

结果(请注意我们用%c包裹的“ Harry”):


Console.count()


Console.count()显示带有特定标签的方法调用的数量(在method参数中传递)。 要使用给定值重置计数器,请使用console.countReset()。

使用MDN进行了稍微修改的示例:
 let user = '' function greet() { console.count(user) return 'hi ' + user } user = 'bob' greet() user = 'alice' greet() greet() console.count('alice') 

我们看到以下内容:


就我个人而言,我无法使用这种方法,但是机会似乎很有趣。

Console.group()


Console.group()用于对消息进行分组(向右移动一级)。 可以给组命名。 要关闭组,请使用console.groupEnd()。 Console.groupCollapsed()与console.group()的功能相同,但是输出位于最小化的组中(我们使用之前创建的对象):
 console.groupCollapsed('harry') console.log(harry.name) console.log(harry.age) console.log(harry.married) console.log(harry.job) console.log(harry.salary) console.groupEnd() console.groupCollapsed('alice') console.log(alice.name) console.log(alice.age) console.log(alice.married) console.log(alice.job) console.log(alice.salary) console.groupEnd() console.groupCollapsed('bob') console.log(bob.name) console.log(bob.age) console.log(bob.married) console.log(bob.job) console.log(bob.salary) console.groupEnd() 

我们得到:


Console.table()


Console.table()在表中显示数据。

创建一个对象数组:
 let staff = [{ name: 'Harry', age: 29, married: false, job: 'developer', salary: 'many', }, { name: 'Alice', age: 23, married: false, job: 'manager', salary: 'few' }, { name: 'Bob', age: 32, married: true, job: 'tester', salary: 'medium' } ] 

使用console.log(东西)派生它:


不太清楚,同意。

现在使用console.table(东西):


完全不同。

Console.time()


Console.time()使用传递的参数中的名称启动计时器。 使用console.timeEnd()停止计时器。 要固定中间值,请使用console.timeLog():
 console.time('time') //    function fact(n) { return n ? n * fact(n - 1) : 1 } console.log(fact(12)) console.timeLog('time') //    function fib(n) { return n <= 1 ? n : fib(n - 1) + fib(n - 2) } console.log((fib(34))) // :      console.timeEnd('time') 

结果:


Console.trace()


Console.trace()打印堆栈跟踪。 它可以用来确定函数调用的顺序。

使用MDN进行了稍微修改的示例:
 foo() function foo() { //  bar() } function bar() { //   baz() } function baz() { //    console.trace('stack traces:') } 

结果:


自己从未使用过,但记下了笔记。

这就是我的全部。 一切顺利。

Source: https://habr.com/ru/post/zh-CN484544/


All Articles