资讯专栏INFORMATION COLUMN

如何使用JavaScript控制台改进工作流程

张金宝 / 3103人阅读

摘要:使用命令与网页交互。在检查代码逻辑和流程时我们可能会使用很多的来检测,但是你会发现控制台打印出来的非常多。启动后,我们使用调用来停止计时器并将经过的时间打印到控制台。


作为Web开发人员,很有必要了解如何调试代码。后台开发我们经常使用外部库来记录日志,并在某些情况下格式化显示日志,前端我们会使用断点和控制台,但是我们浏览器的控制台比我们想象的要强大得多。

当我们考虑控制台时,首先想到的是console.log,对吧?但是它比我们想像中使用的方法多得多。现在我们来看一下如何充分利用控制台,我将为您提供一些技巧,使这些方法更具可读性

什么是控制台?

JavaScript控制台是现代浏览器中的内置功能,它在类似shell的界面中带有开箱即用的开发工具。它允许开发人员:

查看网页上发生的错误和警告的日志。

使用JavaScript命令与网页交互。

调试应用程序并直接在浏览器中遍历DOM。

检查和分析网络活动

基本上,它使您能够在浏览器中编写,管理和监控JavaScript。

Console.log,Console.error,Console.warn和Console.info
这些可能是最常用的方法。您可以将多个参数传递给这些方法。每个参数都在由空格分隔的字符串中进行计算和连接,但是对于对象或数组,您可以在它们的属性之间导航。

Console.group

在检查代码逻辑和流程时我们可能会使用很多的console.log()来检测,但是你会发现控制台打印出来的非常多。此方法允许您在可折叠的组下对一系列console.log(以及错误信息等)进行分组。语法非常简单:只需console.log在之前输入我们想要分组的所有内容console.group()(或者console.groupCollapsed()如果我们希望它默认关闭)。然后console.groupEnd()在末尾添加一个关闭组。

Console.table

自从我发现console.table我的生活都发生了改变。在一个内部显示JSON或非常大的JSON数组console.log是一种不好的体验。这console.table允许我们在一个漂亮的表中可视化这些结构,我们可以在其中命名列并将它们作为参数传递。

非常好,在调试中非常有用:

Console.count,Console.time和Console.timeEnd
对于需要调试的每个开发人员来说,这三种方法都是瑞士军刀。该console.count计数和输出是的次数count()已被调用在同一行,并用相同的标签。该console.time开始用指定为输入参数的名称定时器,可以运行多达10,000个特定网页上同时定时器。启动后,我们使用调用来console.timeEnd停止计时器并将经过的时间打印到控制台。

输出将如下所示:

Console.trace和Console.assert

这些方法只是从调用它的代码位置,打印堆栈跟踪。想象一下,您正在创建一个JS库,并希望通知用户生成错误的位置。在这种情况下,这些方法非常有用。该console.assert是喜欢console.trace,但是只打印条件不符合的。

正如我们所看到的,输出正是React(或任何其他库)在生成异常时向我们展示的内容。

删除所有控制台

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96117.html

相关文章

  • 如何使用JavaScript制台改进工作流程

    摘要:使用命令与网页交互。在检查代码逻辑和流程时我们可能会使用很多的来检测,但是你会发现控制台打印出来的非常多。启动后,我们使用调用来停止计时器并将经过的时间打印到控制台。 showImg(https://segmentfault.com/img/bVbdK6t?w=1000&h=500);作为Web开发人员,很有必要了解如何调试代码。后台开发我们经常使用外部库来记录日志,并在某些情况下格式...

    SnaiLiu 评论0 收藏0
  • 如何使用JavaScript制台改进工作流程

    摘要:使用命令与网页交互。在检查代码逻辑和流程时我们可能会使用很多的来检测,但是你会发现控制台打印出来的非常多。启动后,我们使用调用来停止计时器并将经过的时间打印到控制台。 showImg(https://segmentfault.com/img/bVbdK6t?w=1000&h=500);作为Web开发人员,很有必要了解如何调试代码。后台开发我们经常使用外部库来记录日志,并在某些情况下格式...

    Simon_Zhou 评论0 收藏0
  • 如何正确合理使用 JavaScript async/await !

    摘要:想阅读更多优质文章请猛戳博客一年百来篇优质文章等着你引入的在的异步编程中是一个极好的改进。可能会产生误导一些文章将与进行了比较,并声称它是下一代异步编程风格,对此作者深表异议。结论引入的关键字无疑是对异步编程的改进。 showImg(https://segmentfault.com/img/bVbjFP0?w=800&h=450); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇...

    trigkit4 评论0 收藏0
  • 前端学习路线

    摘要:具体来说,包管理器就是可以通过命令行,帮助你把外部库和插件放到你的项目里面并在之后进行版本升级,这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上: 学习HTML基础,了解如何编写语义HTML 理解如何把网页分...

    FullStackDeveloper 评论0 收藏0
  • 前端学习路线

    摘要:具体来说,包管理器就是可以通过命令行,帮助你把外部库和插件放到你的项目里面并在之后进行版本升级,这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上: 学习HTML基础,了解如何编写语义HTML 理解如何把网页分...

    20171112 评论0 收藏0

发表评论

0条评论

张金宝

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<