console.log() 高级用法你知道几个?

console.log() 方法大家都知道是输出是用于在控制台输出信息。

该方法对于开发过程进行代码调试很有帮助,但是该方法除了输出调试信息,还有其他的高级用法吗?

console.log() 高级用法你知道几个?

console缩短重命名

您可以这样做:

const { log } = console;
log("hi");
log("testing");

你可以将log函数更改为您想要的任何其他名称,如下所示:

const { log: myLog } = console;myLog("hi");
myLog("testing");

console.group

曾经想对您的日志进行分组吗?这个方法很适合你!

<script type="text/javascript">
console.group("groupName");
console.log("hi"); 
console.log("testing");
console.groupEnd();
console.group("groupName2"); 
console.log("hi");
console.log("testing"); 
console.groupEnd();
</script>

运行效果如下console.log() 高级用法你知道几个?

console.table

用于打印数组。

<script type="text/javascript">
const arr = [1, 2, 3, 4, 5];
console.table(arr);
</script>

运行效果如下

console.log() 高级用法你知道几个?console.time

此方法用于测量时间。例如,检查完成 x 任务花了多少秒?

<script type="text/javascript">
console.time("test");
setTimeout(() => {
    console.timeEnd("test");
    
}, 1000);
</script>

这将为我们提供以下结果:console.log() 高级用法你知道几个?console.assert

此方法用于检查条件是否为真。如果不是,它将引发错误。

<script type="text/javascript">
//console.assert(/** Condition **/, /** Error message **/);
console.assert(1 === 1, "1 is equal to 1"); // No error
console.assert(0 === [], "0 is equal to []"); // Error in the console
</script>

效果如下:console.log() 高级用法你知道几个?

console.count

计算某件事发生的次数。

<script type="text/javascript">
    console.count("counter 1");
    for (let i = 0; i < 10; i++) 
    { 
        i % 2 == 0 ? console.count("counter 1") : console.count("counter 2");
        
    }
</script>
这给了我们以下结果:

console.log() 高级用法你知道几个?

console.trace

此方法跟踪它被调用的位置。我有一个这样的 HTML 文件:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <script>
        "test"; console.trace(); i = 0;
    </script>
</body>

</html>

现在你可以看到在哪里 console.trace 被调用了。

console.log() 高级用法你知道几个?debugger 关键词

您可能没有听说过该debugger关键字。它是一个用于停止代码执行的关键字。

<script type="text/javascript">
    const buggyCode = () => { 
        debugger;
        console.log("hi");
        
    };// ...
    buggyCode();
    console.log("World");
</script>
这会暂停代码的执行,您可以看到如下内容:console.log() 高级用法你知道几个?

它会告诉您调试器的调用位置。

{{collectdata}}

网友评论0