写点什么

巧用控制台,提升 JavaScript 调试性能

2019 年 11 月 06 日

巧用控制台,提升JavaScript调试性能

调试 JavaScript 代码的最简单途径就是简单地通过 console.log 方法输出结果。虽然它能用,但这并不是最理想的处理方式。如果有更好的方法,何不探索一番呢?



“来自控制台的 Hello”


console 对象提供对浏览器调试控制台的访问。仅当在浏览器上运行 JavaScript 代码(即客户端代码而非服务端代码)时,才可以使用 console 对象。不同浏览器的工作方式各不相同,但是通常都会提供一组常规功能。调试语句最棒的一点是它们兼容所有库和框架,因为它们是在核心语言中编写的。


console.log 的最基本使用场景是显示代码的输出。考虑以下代码:


function sayHello(name) {  console.log(name)}
sayHello('Indrek')
复制代码


它记录传递给 sayHello 函数的名称。



“输出传递给函数的名称”


如果我们想知道必须调用 sayHello 函数多少次,该怎么办?有一个简单的方法,称为 console.count()。


console.count

count()会输出使用该标签调用它的次数。如果没有参数,则 count()的行为就像使用默认标签调用一样。


function sayHello(name) {  console.count()  console.log(name)}
sayHello("Indrek")sayHello("William")sayHello("Kelly")
复制代码


上面的代码记录以下内容:



统计我们调用 sayHello 函数的次数


这样可以统计出调用函数的次数,但如果要统计调用相同名称函数的次数怎么办?一种方法是简单地将 name 参数传递给 count 方法。


function sayHello(name) {  console.count(name)}
sayHello("Indrek")sayHello("William")sayHello("Kelly")sayHello("Indrek")
复制代码


搞定!该函数跟踪我们用每个名称调用这个函数的次数。



统计我们说每个名字的次数


console.warn

以下方法将警告消息输出到控制台,在使用开发人员工具或 API 时非常有用。console.warn 是一种理想选择,用来让用户知道某些事情不对劲,例如省略参数或让开发人员知道 API/软件包版本已过时。


function sayHello(name) {  if(!name) {    console.warn("No name given")  }}
sayHello()
复制代码


上面的代码检查 name 参数是否传递给函数。如果未输入任何名称,则会记录一条警告消息,提示其考虑某些事项。



未传递名称时,向用户显示警告消息。


console.table

如果我们要处理数组或对象,则在显示数据时 console.table 很有用。数组中的每个元素将是表中的一行。以下面的示例为例,其中有一系列水果组成的数组。如果将 fruits 数组传递给 console.table 方法,则应该看到一个打印到控制台的表。


const fruits = ["kiwi", "banana", "strawberry"]
console.table(fruits)
复制代码


而且如果我们看一眼控制台,应该看到一个描述数组的表。



以表格形式显示数组


你可以想象一下,当我们处理具有数百个(甚至数千个)值的更大数组,这种方法会非常有用。这里有一个例子来说明问题,其中数组有更多的值。


const fruits = [  "Apple",  "Watermelon",  "Orange",  "Pear",  "Cherry",  "Strawberry",  "Nectarine",  "Grape",  "Mango",  "Blueberry",  "Pomegranate",  "Carambola",  "Plum",  "Banana",  "Raspberry",  "Mandarin",  "Jackfruit",  "Papaya",  "Kiwi",  "Pineapple",  "Lime",  "Lemon",  "Apricot",  "Grapefruit",  "Melon",  "Coconut",  "Avocado",  "Peach"];
console.table(fruits);
复制代码


而且如果我们用数组调用 console.table,我们应该看到下表。



在表格中显示所有水果


使用数组很简单。如果我们要处理的是对象呢?


const pets = {  name: "Simon",  type: "cat"};
console.table(pets);
复制代码


注意,现在我们有了一个对象而不是一个数组。该对象拥有两个键:宠物的 name 和 type。



该表没有像之前那样注销值,而是显示值以及键和值。如果我们还有一个对象并尝试将其列出,该怎么办?


const pets = {  name: "Simon",  type: "cat"};
const person = { firstName: "Indrek", lastName: "Lasn"}
console.table(pets, person);
复制代码


不出所料,两个单独的对象显示在两个不同的表中。



两个对象


如果我们想将它们配对在一个表中,则将对象包装在数组中。


const pets = {  name: "Simon",  type: "cat"};
const person = { firstName: "Indrek", lastName: "Lasn"}
console.table([pets, person]);
复制代码


现在我们将对象分组到一个表中。



通过将对象包装在数组中进行分组


console.group

在使用集合或链接数据时,请使用嵌套组来直观地关联相关消息,从而让输出井井有条。要创建一个新的嵌套块,请调用 console.group()。


console.log("This is the first level");console.group();console.log("Level 2");console.group();console.log("Level 3");console.warn("More of level 3");console.groupEnd();console.log("Back to level 2");console.groupEnd();console.log("Back to the first level");
复制代码


以下代码显示嵌套的块级控制台语句——在处理基于关系的数据时很有用。



console.groupCollapsed()方法也差不多,但是新块是折叠的,需要单击显示按钮才能读取它。


概要

请使用语言自身提供的所有工具,能用就用。简单提一下:由于 debugger 本身就值得单独一篇文章来探讨,因此我们暂时跳过了它的内容。


如果你对 debugger 感到好奇,请参阅这篇文章


如果你刚入门 JavaScript,想要学习这种语言,我建议你先阅读相关书籍,同时结合实际的构建来学习。先看一下“更聪明的JavaScript学习方式”一书,这里还列出了一些用来构建的有趣应用程序


感谢阅读。


原文链接


https://medium.com/better-programming/boost-your-javascript-debugging-skills-with-these-console-tricks-ab984c70298a


2019 年 11 月 06 日 16:511457
用户头像
王文婧 InfoQ编辑

发布了 126 篇内容, 共 61.2 次阅读, 收获喜欢 251 次。

关注

评论

发布
暂无评论
发现更多内容

物化视图如何快速完成数据聚合操作?

VoltDB

数据库 数据分析 sql

区块链技术应用开发、区块链版权应用搭建解决方案

t13823115967

区块链技术应用开发 区块链版权搭建解决方案

淘宝直播技术干货:高清、低延时的实时视频直播技术解密

JackJiang

即时通讯 视频编码 实时音视频 直播技术

很简单却能让你面试头疼得Java容器,这里从源码给你解释清楚

小Q

Java 学习 源码 容器 面试

2020年10月北京BGP机房网络质量评测:流水的其他,铁打的世纪互联?

博睿数据

机房 评测

.net5发布,.NET会就此“支棱起来”吗?

Philips

.net 敏捷开发 .net core

架构师训练营 1 期 - 第十周 - 模块分解

三板斧

极客大学架构师训练营

从微服务应用于技术栈,了解华为云微服务应用

华为云开发者社区

微服务 服务 云技术

私域流量运营03|衡量企业运营视频号的4个关键指标

Linkflow

客户数据平台 客户画像 视频号

26张图带你彻底搞懂volatile关键字的底层实现

autoencoder

volatile 后端 多线程 并发 Java 分布式

从数据仓库双集群系统模式探讨,看GaussDB(DWS)的容灾设计

华为云开发者社区

数据库 数据仓库 数据

第十周 模块分解 总结

三板斧

极客大学架构师训练营

Mybatis日志功能是如何设计的?

Java架构师迁哥

美妆行业:低代码全域客户数据采集,赋能数据化运营

Linkflow

营销数字化 客户数据平台 CDP

中小型企业创业的福音

anyRTC开发者

创业 音视频 WebRTC RTC

京东智能客服品牌焕新:“言犀”亮相2020京东JDD大会

京东科技开发者

大数据 AI 知识图谱

2020年9月北京BGP机房网络质量评测:天地祥云木樨园力压群芳终进前三

博睿数据

机房 评测

阿里内部11月最新出台Spring Cloud架构设计+程序开发+运维部署

Java架构追梦

Java 阿里巴巴 架构 微服务 SpringCloud

五年时间完成业务数字化转型,华为如今做得怎么样了?

华为云开发者社区

效率 提升 数字化

接口测试和功能测试的区别

测试人生路

软件测试

BitArray虽好,但请不要滥用,一次线上内存暴增排查

AI乔治

Java 架构 JVM 内存泄露

使用sonar扫描svn中的代码后,没有作者或责任人信息

lee

svn 代码质量 sonar

跨语言跨平台聚合OpenAPI文档从来没有这么简单过

Trust Me

OpenAPI Knife4j Knife4jAggregation 微服务聚合OpenAPI

区块链医疗、电子票据应用落地开发解决方案

t13823115967

电子票据 区块链医疗

距离 2020 年结束不到2个月,字节跳动员工却在闲鱼卖内推名额登上热搜!

Java架构师迁哥

uml图中各种线的关系

feiyun123

极客大学架构师训练营 UML

最详尽最通俗易懂的c/c++堆栈机制解读

北游学Java

堆栈 C/C++ 堆栈溢出

服务器选择要注意什么?

德胜网络-阳

MySQL-技术专题-LEFT JOIN避坑指南

李浩宇/Alex

数字化时代App们将何去何从?

fino星君

京东集团技术委员会主席周伯文:推进产业数智化发展需要技术和生态两把“桨”

京东科技开发者

区块链 大数据 AI 物联网,

巧用控制台,提升JavaScript调试性能-InfoQ