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

不言

发布时间：2018-07-14 10:52:48

1476人浏览过

来源于php中文网

原创

这篇文章主要介绍了关于使用javascript控制台如何改进工作的流程，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

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

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

什么是控制台？

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

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

立即学习“Java免费学习笔记（深入）”；
使用JavaScript命令与网页交互。
调试应用程序并直接在浏览器中遍历DOM。
检查和分析网络活动

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

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

2401779713-5b4951629b436_articlex[1].png

Console.group

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

3949379758-5b495162653a7_articlex[1].png

好买卖商城

好买卖商城开源商城是基于Opencart网店系统,针对中文用户而改进的本地化分支,是真正的开源PHP中文网店系统，兼容Opencart的插件。该系统具有易于操作的可视化安装界面、完善的前台商品展示和户在线购物车功能、强大的后台管理和维护功能模块简单易用,灵活的插件机制，更易于扩展。另外，好买卖商城开源商城还集成集成了支付宝等支付和物流插件,更适合中文用户使用。好买卖商城2.0开源商城流程进行

下载

Console.table

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

2519782439-5b4951624400f_articlex[1].png

非常好，在调试中非常有用：

566971357-5b495161e5862_articlex[1].png

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

3280010134-5b495161db5f2_articlex[1].png

输出将如下所示：

3818912015-5b495161e8f67_articlex[1].png

Console.trace和Console.assert

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

3814615792-5b495161dcfe3_articlex[1].png

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

3361322073-5b495161b3b8d_articlex[1].png

删除所有控制台

TypeScript: 如何基于参数对象的判别属性精确推导函数返回类型

为什么要学习JavaScript_它在Web开发中扮演什么角色

什么是javascript的装饰器_它们适用于哪些场景

TypeScript 数组原型扩展的正确导入与使用方法

javascript TypeScript是什么_是超集还是新语言

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

557

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

394

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

754

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

478

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

454

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

1051

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

554

2023.09.20