10 个技巧,让你更专业地使用 console 进行 JS 调试

英文:Yotam Kadishay 译文:elevenbeans

elevenbeans.github.io/2018/03/10/10-Tips-for-JS-Debugging-with-Console/

首先,我必须承认这一点,我将利用这个平台从我的开发环境中清理出骨架(轮廓)。有时候,我所做的“魔法”(有些人称之为“编码”),并不像我的同事在为他们展示这些宏伟结果时候看到的那样完美。 是的,我说过:有时候,我会使用老式的试错法,我们都称之为”调试” : )

在过去的十年中,我热衷的事情之一是前端开发(特别是 JavaScript)。作为一名“工匠”,我喜欢学习市面上的新工具。在这个故事中,我将给你们一些很棒的、更专业的技巧,去使用好用又“古老”的 console。

是的,我们都知道它的基础用法:

console.log(‘Hello World!’); // log a message or an object to console console.info(‘Something happened…’); // same as console log console.warn(‘Something strange happened…’); // same as console log but outputs a warning console.error(‘Something horrible happened…’); // same as console log but outputs an error

所以,我希望现在我可以给你们一些以前不知道的技巧,以及那些可以让你们成为一个更专业的调试人员的玩法。

Tip #1 console.trace()

如果您想获取日志信息的提示位置,可通过使用console.trace()来获取带有记录数据的堆栈跟踪。

Tip #2 console.time() && console.timeEnd()

如果您试图找到一个比较隐匿的性能问题,请使用console.time()开始计算时间,然后使用console.timeEnd()进行打印。

Tip #3 console.memory

如果你的性能问题更加棘手,并且你正在寻找一个隐匿的内存泄漏,你可能想尝试并利用console.memory(是属性,不是函数)来检查你的堆大小状态。

Tip #4 console.profile(‘profileName’) & console.profileEnd(‘profileName’)

这不是标准的方法,但得到了广泛的支持。你可以使用console.profile('profileName'),然后使用console.profileEnd('profileName'),从代码中启动和结束浏览器性能工具 - “performance profile”。 这将帮助您精确地分析您想要的内容,并避免了您单击鼠标,它取决于程序执行时间。

Tip #5 console.count(“STUFF I COUNT”)

在函数或代码反复出现的情况下,您可以使用console.count('?')来计算您的代码被读取的次数。

Tip #6 console.assert(false, “Log me!”)

是的,条件日志记录并没有用if-else包装你的日志 : )

您可以使用console.assert(condition, msg)在condition为假时记录某些内容。

免责声明:在 Node.js中,这将抛出 Assertion Error!

Tip #7 console.group(‘group’) & console.groupEnd(‘group’)

写了这么多的日志之后,你可能想对它们进行组织。一个小而有用的工具是console.group()和console.groupEnd()。使用控制台组,将控制台日志组织在一起,每个分组在层次结构中创建另一个级别。 调用groupEnd()减少一个级别(回到上一个层级)。

Tip #8 String substitutions

记录日志时,可以使用字符串替换合并变量。这些引用是(%s = string,%i = integer,%o = object,%f = float)。

Tip #9 console.clear()

那么,写了这么多的日志,现在是时候清理一下你的控制台了。

Tip #10 console.table()

在我看来,这是一个真正的“瑰宝”! 你可以使用console.table()打印一个非常漂亮的表格!

我真的希望这些技巧能让大家的调试更有效率,甚至更有乐趣!

原文发布于微信公众号 - IT派(transfer_3255716726)

原文发表时间:2018-03-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏华仔的技术笔记

iOS应用架构谈 本地持久化方案及动态部署

嗯,你们要的大招。跟着这篇文章一起也发布了CTPersistance和CTJSBridge这两个库,希望大家在实际使用的时候如果遇到问题,就给我提issue或者...

41570
来自专栏wOw的Android小站

[iOS] 技术文章收藏

现在关注了一些微博,订阅号,博客。每天都能看到不少好文章。现在收藏夹里放了不少文章,我觉得是时候整理一下,把文章分各类,做个目录出来,方便以后查阅。

8710
来自专栏宏伦工作室

基于itchat实现微信群消息同步机器人

49570
来自专栏黑白安全

ASLRay:一个可以绕过ASLR的工具

ASLR(Address Space Layout Randomization,即地址空间格局随机化)是指利用随机方式配置数据地址,一般现代系统中都加设这一机制...

7910
来自专栏数据和云

经典文档:Oracle Database 12.2新特性概览解读下载

在2017 OOW大会上,关于Oracle Database 12.2 数据库的新特性介绍仍然引人瞩目,会后公布了 Oracle VP Swonger的文档,我...

33070
来自专栏携程技术中心

干货 | 分布式架构系统生成全局唯一序列号的一个思路

作者简介 丁宜人,10年java开发经验。携程技术中心基础业务研发部用户中心资深java工程师,负责携程账号的基础服务和相关框架组件研发。之前在惠普公司供职6年...

577100
来自专栏13blog.site

微信公众号问题:{"errcode":40125,"errmsg":"invalid appsecret, view more at http:\/\/t.cn\/LOEdzVq, hints: [

在调试微信公众号授权登录时遇到了这个错误,着实是心烦了半天,公众号相关开发以前是经常做的,很久没有接触了,而且遇到了这么个以前没遇到的问题。 {"errcode...

73460
来自专栏大数据人工智能

ZStack--工作流引擎

在IaaS软件中的任务通常有很长的执行路径,一个错误可能发生在任意一个给定的步骤。为了保持系统的完整性,一个IaaS软件必须提供一套机制用于回滚先前的操作步骤。...

49640
来自专栏野路子程序员

徒手解剖composer,简单了解其实现过程

30760
来自专栏Java进阶架构师

dubbo源码解析-详解directory

由于明天还要加班(心疼自己一秒),之前答应过小伙伴每周更新一篇dubbo的源码解析的,鉴于上次讲到了集群容错的总体架构,这次主要讲讲第一个关键词director...

10150

扫码关注云+社区

领取腾讯云代金券