写点什么

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

  • 2019-11-06
  • 本文字数:2204 字

    阅读完需:约 7 分钟

巧用控制台,提升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:512080
用户头像
王文婧 InfoQ编辑

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

关注

评论

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

SaaS应用:企业数字化转型性价比最高的方式

小炮

Hoo研究院|区块链简报 20220523期

区块链前沿News

#区块链# Hoo 热点

十、云原生网络架构

穿过生命散发芬芳

网络架构 5月月更

热烈庆祝“海泰密码技术融合创新中心&数据中心重启安全工程”双中心智能重启用

电子信息发烧客

网络安全 科技 科技企业

我们为什么选择使用分布式持续交付新星 Zadig ?

Zadig

DevOps 云原生 CI/CD 软件交付

人人皆为开发者?不可错过的低代码发展新趋势

云智慧AIOps社区

大前端 低代码 数据可视化

10分钟,将微信小程序转换成App

Speedoooo

微信小程序 移动开发 小程序容器 小程序转app

Markdown语法简介

工程师日月

markdown语法 5月月更

满满干货!手把手教你实现基于eTS的HarmonyOS分布式计算器

HarmonyOS开发者

HarmonyOS ETS

多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单

蒋川

Vue Element 组件 表单设计 Ant Design

IET 试水SiFL中文项目 为中国工程师“走出去”创造宝贵机遇

E科讯

Apache SeaTunnel(Incubating)与计算引擎的解耦之道,重构API我们做了些什么

Apache SeaTunnel

Apache 大数据 开源 DolphinScheduler workflow

创业、女性、数字化:后COVID-19世界的复苏“铁三角”

脑极体

谈谈技术能力

阿里巴巴中间件

阿里云 程序员 中间件 技术思考

干货复盘 | 易观分析“出海非洲战略”专题分享

易观分析

非洲战略

英伟达周锡健:设计到数字营销的最后一公里

阿里云弹性计算

vr XR 视觉计算

使用postMessage对iframe进行跨域数据传输

空城机

iframe postMessage 5月月更

【刷题第16天】数组中出现次数超过一半的数字

白日梦

5月月更

微擎同步粉丝不显示头像和昵称?

智伍应用

微擎 php开源

直播预告丨Hello HarmonyOS进阶课程第四课——ArkUI动画开发

HarmonyOS开发者

HarmonyOS arkui

在星云科技,我们使用 Zadig 实现多环境并行发布,上千次周部署

Zadig

DevOps 云原生 CI/CD 软件交付

“双碳”大局中再看业务合同电子化

鲸品堂

节能 提效降本 双碳

企业引流和留存,“App+小程序”是较优技术策略

Speedoooo

微信小程序 APP开发 小程序容器 小程序转app

为什么校招面试中“线程与进程的区别”老是被问到?我该如何回答?

宇宙之一粟

线程 进程 5月月更

使用 Provider 实现 Flutter 不相关页面状态数据共享

岛上码农

flutter ios 安卓开发 跨平台开发 5月月更

混合办公首选轻薄本,华为MateBook的“三重变身”改变了什么?

脑极体

成本节省 50%,10 人团队使用函数计算开发 wolai 在线文档应用

阿里巴巴中间件

阿里云 中间件 函数计算

Apache ShenYu 网关正式支持 Dubbo3 服务代理

阿里巴巴中间件

阿里云 开源 微服务 云原生 dubbo

前端食堂技术周刊第 38 期:Remix v1.5.0、Babel v7.18.0、前端部署十五章、Tree Shaking 问题排查指南、一文搞懂前端技术发展

童欧巴

前端 Remix 前端部署

做了5年开源项目,我总结了以下提PR经验!

OpenHarmony开发者

OpenHarmony 开源生态

小程序和App同时拥有?两者兼得的一种技术方案

Speedoooo

微信小程序 APP开发 小程序容器 小程序转app

巧用控制台,提升JavaScript调试性能_大前端_Indrek Lasn_InfoQ精选文章