不要在JavaScript中使用 Console.log,试试这个

开发 后端
调试JavaScript代码最佳方法之一是Console.log()。除此之外还有更好的办法。这就是本文的重点讲述与控制台交互的方法。在复杂的Ide中输入Consol可以提供自动完成提示功能。

调试,程序员极力避免的事情,因为这样只会在代码中产生更多的错误。

即使是最优秀的程序员,也会发现自己没有办法写,没有错误的代码。这就是为什么你应该总是需要调试代码。

调试JavaScript代码最佳方法之一是console.log()。除此之外还有更好的办法。

这就是本文的重点讲述与控制台交互的方法。在复杂的ide中输入consol可以提供自动完成提示功能。

除了console.log(),这里还有其他更好的选择。使用这些选项可以让调试过程变得更加容易和更快。

console.warn()和console.error()

当存在可以停止应用程序工作的错误时,使用console.log来调试它是行不通的。

这会是你的控制台消息变得异常混乱,让你找不到你想要找的消息。

使用console.warn() 和 console.error() 是克服这个问题的好方法。

console.warn("This is a warning");

console.error("This is an error")

时间operations

想看看这段代码运行需要多长时间?

使用console.time()

首先,创建一个计时器并为其指定一个唯一的名称。

console.time("Loop timer")


然后,运行该代码段。

for(i = 0; i < 10000; i++){
    // Some code here
}

然后调用 timeEnd().

console.timeEnd("Loop timer")

这是所有的代码。

console.time("Loop timer")
for(i = 0; i < 10000; i++){
    // Some code here
}
console.timeEnd("Loop timer")


这对于需要一些时间密集型应用程序非常有用,例如神经网络或 HTML Canvas 读取。

最终代码的运行

想看看函数是如何被调用的吗?

function trace(){
    console.trace()
}
function randomFunction(){
    trace();
}

在这里,有一个名为randomFunction 调用trace,它又调用console.trace()。

所以当你调用randomFunction, 你会得到类似如下的输出。

上图显示的那个匿名的方法调用了 randomFunction, 然后调用 trace().

控制台消息分组

对控制台消息进行分组,可以使控制台更易于阅读。

console.log("Test1!");

console.group("My message group");

console.log("Test2!");
console.log("Test2!");
console.log("Test2!");

console.groupEnd()

所有的 Test2 归于 ‘My message group’组之下.

清除控制台消息

如果你遵循本教程,那么你的控制台将会非常满。让我们把它清除掉。

console.clear();

下面就是结果。

没有什么特别的,我只是又清除了一遍,让我们继续。

表格

让我们添加表格,以更好的可视化数据,想象一下我们有两个对象。

var person1 = {name: "Weirdo", age : "-23", hobby: "singing"}
var person2 = {name: "SomeName", age : "Infinity", hobby: "programming"}

简单的使用console.log 只会让数据看起来很混乱。

使用表格就会更好一点。

console.table({person1, person2})


从未见过JavaScript控制台可以如此的干净,对吧?

在控制台中使用CSS ?

是的,你没看错,你可以将css添加到控制台。

console.log("%c I love JavaScript!", 
  "color: red; background-color: lightblue; border: solid");

注意这个%c 标识. 这就是发挥魔法的地方。.

责任编辑:姜华 来源: 今日头条
相关推荐

2024-03-18 07:56:49

CSSJS代码调试

2021-03-17 08:53:21

JavaScript开发代码

2018-01-26 10:42:44

前端JavascriptConsole对象

2021-03-29 08:05:15

User项目安全

2023-02-24 08:00:00

2023-09-27 10:19:37

类型video函数

2019-04-15 14:05:56

MySQLUTF-8数据库

2024-04-15 00:00:00

console语法树AST

2022-08-10 14:36:05

Python循环函数

2022-08-22 08:32:17

招聘函数string

2020-01-09 08:26:16

代码JS开发

2018-07-16 16:29:26

编程函数代码

2017-09-12 15:11:12

Chrome

2020-03-25 08:26:44

console.log前端

2018-06-25 14:29:45

MySQLbug数据库

2021-10-18 10:53:26

Go 代码技术

2020-06-04 08:10:30

Python字符串开发

2020-03-29 20:16:09

JavaScript前端技术

2020-06-23 14:52:04

Python无用分号语言

2023-11-30 09:00:00

TypeScript开发
点赞
收藏

51CTO技术栈公众号