在浏览器中使用JavaScript控制台

今天,我们发布了有关在著名的console.log()命令之外的浏览器中使用JavaScript控制台的功能的注释。 实际上,此命令是调试程序的最简单工具,它允许您将某些内容输出到控制台。 但是,了解此工具的某些功能将使使用它的人提高工作效率。



Console.log()命令和变量名


例如, console.log()最简单的用例是输出一些字符串或对象。 例如,将行打印到控制台:

 console.log('Is this working?'); 

现在,假设您需要将多个对象输出到控制台。 例如-这样:

 const foo = { id: 1, verified: true, color: 'green' }; const bar = { id: 2, verified: false, color: 'red' }; 

最好使用console.log(variable)形式的几个命令来解决此问题。 尽管数据到达控制台,但是在输出数据时一个问题变得很明显。

查看控制台中显示的内容。


控制台中没有变量名

如您所见,变量名foobar不在此处。 使用线条左侧的箭头图标可以扩展对象,但是即使查看对象的内部结构,也很难理解控制台中将显示哪个对象。 在解决此问题时,计算对象属性名称将对我们有所帮助。 即,对象文字的此功能(出现在ES6中)使您可以使用以下形式的便捷设计:

 console.log({ foo, bar }); 

通过这种方法,对象将进入控制台,其属性名称将是需要显示的变量对象的名称。 另外,这使您可以摆脱对console.log()的某些调用,该调用以前用于单独显示对象。

命令console.table()


通过格式化表中对象的内容,可以进一步改善程序在控制台中显示的外观。 这将对信息的可读性产生良好的影响。 即,我们正在谈论这样一个事实:如果在控制台中显示具有相同属性名称的对象或相似对象的数组,则可以使用console.table()命令。 这是执行console.table({ foo, bar })格式的命令的结果。


Console.table()命令的作用

Console.group()命令


如果您需要对某些相关数据进行分组并从嵌套组创建结构以提高使用此类数据的可用性,则可以使用此命令。
此外,在某些功能执行了将某些内容输出到控制台的命令的情况下,可以使用这种方法,并且有必要一眼就能清楚地将这些命令的结果与其他命令分开。

假设我们在控制台中显示有关某些用户的信息:

 console.group('User Details'); console.log('name: John Doe'); console.log('job: Software Developer'); //   console.group('Address'); console.log('Street: 123 Townsend Street'); console.log('City: San Francisco'); console.log('State: CA'); console.groupEnd(); console.groupEnd(); 

这就是这段代码的结果。


将数据输出命令的结果分组到控制台

使用console.group()命令时,默认情况下,组以展开形式显示。 为了使它们最小化,可以使用console.groupCollapsed()命令而不是此命令。 为了查看此类组的内容,您需要使用组名左侧的图标将其展开。

Console.warn()和console.error()


根据情况, console.warn()console.error()命令可能有助于强调控制台上显示的某些消息的重要性。 它们分别用于显示警告和错误。


警告和错误

也许用来显示参考消息的console.info()命令对您也很有用。

在自定义控制台中显示的消息的外观时,您可以通过自己设置样式来进一步扩展。 您可以使用%c伪指令设置控制台中显示的文本的样式。 例如,这对于组织来自用于访问某些API的子系统的信息与负责处理用户生成的事件的子系统的信息的可视分离很有用。 这里最主要的是制定一些样式化规则并遵守它们。 这是定制输出到控制台的数据外观的示例:

 console.log('%c Auth ',           'color: white; background-color: #2274A5',           'Login page rendered'); console.log('%c GraphQL ',           'color: white; background-color: #95B46A',           'Get user details'); console.log('%c Error ',           'color: white; background-color: #D33F49',           'Error getting user details'); 

您还可以配置文本的其他CSS属性,例如font-sizefont-style


样式化数据输出到控制台

Console.trace()命令


console.trace()命令将堆栈跟踪的结果打印到控制台,并允许您判断在程序执行过程中特定点发生了什么。 例如,有些方法在某些情况下只需要调用一次,例如-从数据库中删除信息的方法。 可以检查console.trace()真的仅对此方法执行一次调用。 此命令使您可以在控制台中显示信息,以帮助验证程序内部机制的正确操作。

命令console.time()


前端开发人员面临的重要任务之一是提供高速代码。 console.time()命令允许您测量操作的执行时间,并显示您设法在控制台中找到的内容。 例如,使用此命令,我们检查了几个周期:

 let i = 0; console.time("While loop"); while (i < 1000000) { i++; } console.timeEnd("While loop"); console.time("For loop"); for (i = 0; i < 1000000; i++) { //   } console.timeEnd("For loop"); 

看一下执行此代码后进入控制台的内容。


使用console.time的结果()

总结


在本文中,我们研究了有关浏览器控制台中数据输出的一些有用的小知识。 如果您以前不了解这些功能,我们希望现在您有了新的有用的JavaScript工具。

亲爱的读者们! 如果您正在开发大型JavaScript项目,那么请您告诉我们有关解决其中的日志记录问题的方法。

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


All Articles