JavaScript 隐秘者 | Console.xxx竟然如此好用

news2025/1/11 1:17:39

JavaScript 灵活使用Console.png

JavaScript 隐秘者 | Console.xxx竟然如此好用

文章目录

一、控制台调试

console对象本质上就是浏览器提供的控制台调试接口，在不同的浏览器上可能工作方式不一样，但用法都是一样的。
相信用的最多的是 console.log方法，但console还存在着许多其他的方法，灵活运用这些调试接口，相信能够让你在开发过程中如虎添翼。

二、对象方法 🍖

展示一些常用或则说能够用得上的方法，希望能够在你的项目中派上用场。

1)、.assert() 条件断言

如果断言为 false，则将一个消息写入到控制台。如果断言是 true，没有任何反应。可以将此方法理解成 IF + console.log，在.log()的基础上加了条件判断。
参数：

  • **assertion：**断言条件。
  • *args：输出的内容，与console.log用法一致。

样例：

-> console.assert(false, 'the word is %s', 'foo');
-> Assertion failed: the word is foo

输出结果以错误级别展示。

2)、.clear() 清空控制台

与大多数控制台指令一样，可以清空控制台内容，在Edge浏览器中可以省去console前缀使用。

3)、.count() 计算调用数 ⭕

这个方法比较实用，能够输出.count()被调用的次数，在进行代码块调试的时候可以用上此方法。
参数：

  • label：计数标签，若指定标签则相同标签累积计数，默认值为"default"。

样例：

function func() {
    console.count()
}
{
    console.count()
}
{
    console.count()
}
{
    console.count()
}
func()
func()
console.count()

default: 1
default: 2
default: 3
default: 4
default: 5
default: 6

若不指定label，则默认会有一个default默认值，在不同作用域中只要label相同，都会进行累积。

4)、.countReset() 重置计数器

此方法与上面 3)、.count() 方法配合使用，重置与label关联的计数器，若无label则重置默认的计数器。
参数：
label：计数标签，默认值为"default"。

console.count("点击")
console.count("点击")
console.count("点击")
console.countReset("点击")
console.count("点击")

点击: 1
点击: 2
点击: 3
点击: 1
5)、.debug() 调试消息

将调试级别的信息输出到控制台。
参数：

  • *args：输出的内容，与console.log()用法一致。

输出结果以调试、详细级别展示。

6)、.dir() 查阅对象属性

显示指定对象的属性，并通过树样式的交互列表显示，这将对使用console.log查看dom元素时查看不了对象属性有帮助。
参数：

  • *args：输出的内容，在此方法中一般是个对象，与console.log()用法一致。

样例：

<p id="foo">牢牢把住粮食安全主动权！</p>
<script>
  const ele = document.getElementById("foo");
  console.log("使用log方法获取无法查看对象属性", ele);
  console.log("使用dir方法查看对象属性");
  console.dir(ele)
</script>

image.png

7)、.dirxml()

如果是dom元素则输出元素交互效果，如果是对象则显示对象属性，和console.log()的效果差不多，基本上用不上。

8)、.error() 错误消息

向控制台输出错误信息，与使用throw抛出异常不同的是，.error()只是作用于控制台，方便程序调试，并不会影响程序往下执行。
参数：

  • *args：输出的内容，与console.log()用法一致。

样例：

console.error("123");
console.log("error 可以持续下去");

throw Error("抛出异常");
console.log("throw 可以持续下去");

image.png

9)、.group() 合理分组
在控制台创建一个分组，接下来调用的任何控制台输出都会被添加一个缩进，如.log()、.debug()、.error()，分组之间允许嵌套行为。
需要注意的是，在调用.groupEnd()结束分组之前，再次调用分组.group()则会将新分组与已有分组进行嵌套。
参数：

  • *args：输出的内容，与console.log()用法一致。

样例：

console.group("轮询器代码块调试", { msg: "debug" });
console.log("1", "成功");
console.assert(1 === 2, "发生错误");
console.debug("321123");
console.error("执行失败");
console.group("重新计时");
console.log("123");

image.png

10)、.groupCollapsed() 折叠分组
和.group()方法的不同点是，该方法新建的分组默认是折叠的。用户必须点击一个按钮才能将折叠的内容打开，这对于需要精简控制台输出的场景来说比较适用。
参数：

  • *args：输出的内容，与console.log()用法一致。

样例：

console.group("默认展开状态");
console.log("内容");
console.groupEnd();

console.groupCollapsed("默认折叠状态");
console.log("内容");
console.groupEnd();

image.png

11)、.groupEnd()
配合 9)、.group() 合理分组 或 10)、.groupCollapsed() 折叠分组 使用，结束一个分组缩进，如果有多个分组则需要调用多次。

12)、.info() 通知信息
向控制台输出通知信息，在火狐浏览器中，控制台输出的消息会在旁边显示一个"i"图表。
image.png

13)、.log() 最频繁
向控制台输出信息。

14)、.tabel() 展示神器
将数据以表格的形式进行展示，展示效果美观直接，很适合用来调试查看一些数据源。
参数：

  • data： 要显示的数据，必须是数组或对象类型。
  • columns：如果展示的为多列数据，应为需要展示列的名称数组。

样例：
如果传入的是一维数组，那么将会一列多行的形势展示数据。

console.table(["apples", "oranges", "bananas"]);

image.png
对于多维数组，则会根据元素的键名进行解析，不同的键名独占一列。

const a = {name: "张三", sex: "男", hobby: "唱、跳、rap"};
const b = {name: "王五", sex: "男", phone: "xxxxxxx", height: "176"};
const c = {name: "小美", sex: "女", job: "销售"};
console.table([a, b, c]);

image.png
试着将数组变成对象，可以发现如果传入的是对象，那么行名将由对象键名进行控制。

const a = {name: "张三", sex: "男", hobby: "唱、跳、rap"};
const b = {name: "王五", sex: "男", phone: "xxxxxxx", height: "176"};
const c = {name: "小美", sex: "女", job: "销售"};
console.table({"first": a, "second": b, "third": c});

在这里插入图片描述

15)、.time() 计时器
如果需要查看一段程序或代码块运行了多久，不妨试试控制台提供的.time()方法，这可比自己手动使用Date对象计算时间方便多了。
每一个计时器必须拥有唯一的名字，页面中最多能同时运行 10,000 个计时器。当以此计时器名字为参数调用 .timeEnd()时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。
参数：

  • timerName：新计时器的名字，用来标记计时器身份。

样例：

/**
 * 异步睡眠辅助函数
 * @param {any} time 睡眠时间 毫秒
 */
function sleep(time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(), time)
    });
}

async function func() {
    console.time("xz_1");
    await sleep(1000);
    console.timeEnd("xz_1");
}

// -> xz_1：1289 毫秒 - 倒计时结束
func();

16)、.timeEnd()
停止一个启动的计时器，并将该计时器经过的时间输出到控制台。
参数：

  • 需要停止的计时器名字。

17)、.timeLog()
在控制台输出计时器经过的时间，于.timeEnd()方法对比的好处是，不用结束计时器也能够获取当前所经过的时间。
参数：

  • 需要输出的计时器名字。

18)、.trace()
向控制台输出调用.trace()时，程序的堆栈跟踪，或则说是执行路径，比如嵌套在什么函数内执行，函数外有多少嵌套。
image.png
参数：

  • *args：输出的内容，与console.log()用法一致。

19)、.warn() 警告信息
除了使用.log()向控制台发送一条信息外，有时候也需要向控制台输出一些警告提示消息，在一些Web框架中经常被使用，也是一个很常用的方法。
image.png

20)、.memory 谷歌浏览器内存占用

这是一个属性，且只有在谷歌浏览器的控制台能够使用，用于查看内存的占用情况。能查看到的信息比较鸡肋，一般来说没什么用。
image.png

三、总结

除了平时用起来比较频繁的 .log()、.warn()、.error()、.dir()方法，不妨可以再试试.count()、.group()、.groupEnd()等，都是很实用方便的控制台接口，浏览器为了能够让开发者开发起来更轻松想了很多办法，合理运用这些接口能够在开发调试过程中如虎添翼。
火狐浏览器对消息等级是分的比较细，如果要对不同的消息类型进行明显区分，不妨试试火狐浏览器。

四、参考资料💘

  • 维基百科中文版：
    • web开发者工具 https://zh.wikipedia.org/wiki/Web%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7
  • 官方手册：
    • MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Console

五、推荐博文🍗

  • CSS 奇技淫巧Box-shadow实现圆环进度条
  • 【精】Vue 使用props为路由组件传参『详解』

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/127615.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

文献翻译 (3)：非支配排序遗传算法 (Non-dominated Sorting Genetic Algorithm, NSGA-II)

文献翻译 (3)：非支配排序遗传算法 (Non-dominated Sorting Genetic Algorithm, NSGA-II)

文章目录1 引入2 多目标优化3 更多的定义3.1 支配3.2 非支配集3.3 全局Pareto最优集4 NSGA-II1 引入 本文主要介绍多目标优化的基本概念以及NSGA-II。 2 多目标优化 多目标优化的优化目标之间存在一定的冲突&#xff0c;例如一个目标增长&#xff0c;导致另一个减少。因此这…
阅读更多...
Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“

Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“

刚刚学vue没多久&#xff0c;经常分不清情况什么时候用什么符号&#xff1a; “:” 是指令 “v-bind”的缩写 “.”是修饰符 “”是指令“v-on”的缩写 &#xff0c;它用于监听 DOM 事件 “#”是v-slot的缩写&#xff1b; "{{}}" 插值语法 "$" &#…
阅读更多...
智慧工厂在线云平台，助力企业降本增效！

智慧工厂在线云平台，助力企业降本增效！

随着传统制造企业规模的扩大&#xff0c;人工管理方法不可避免的产生延时、错误和矛盾&#xff0c;人工管理方法已经无法对生产管理实施有效的控制, 随着设备类型、数量不断增加&#xff0c;人工管理的方式已经无法满足生产过程中人、机、料、法、环、测的有效管理。如何将这些…
阅读更多...
2022年——一个老老老程序员的杭州折腾之旅

2022年——一个老老老程序员的杭州折腾之旅

&#x1f4e2;欢迎点赞 &#xff1a;&#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff0c;赐人玫瑰&#xff0c;手留余香&#xff01;&#x1f4e2;本文作者&#xff1a;由webmote 原创&#x1f4e2;作者格言&#xff1a;无尽的折腾后&#xff0c;终于又回到…
阅读更多...
[Android]视图的控触操作-MotionEvent

[Android]视图的控触操作-MotionEvent

引入 对屏幕的任何操作&#xff0c;系统都会创建一个触摸事件的对象MotionEvent来应对这个操作。当点击手机屏幕的某一个视图时&#xff0c;最先感应到的是屏幕&#xff0c;因为Activity系统是分层的结构&#xff0c;底层是一些驱动&#xff0c;所以驱动就会得到信息并且把信息…
阅读更多...
分布式共识算法——Paxos、ZAB、Raft

分布式共识算法——Paxos、ZAB、Raft

分布式算法 01 分布式基本理论 CAP理论 1998年&#xff0c;加州大学的计算机科学家 Eric Brewer 提出&#xff0c;分布式系统有三个指标。 一致性&#xff08;C&#xff09;&#xff1a;在分布式系统中的所有数据备份&#xff0c;在同一时刻是否同样的值&#xff0c;即写操…
阅读更多...
第008课 - linux安装docker

第008课 - linux安装docker

文章目录 linux安装docker安装docker启动docker检查dockerdocker设置开机自启动linux安装docker 每一种容器都是一个完整的运行环境，容器之间互相隔离的。 windows的ghost工具就是类似docker。 从网上获取镜像，基于镜像，docker可以启动一个容器。 所以，我们以后想要装某种…
阅读更多...
elasticsearch在linux环境安装遇到问题

elasticsearch在linux环境安装遇到问题

es在linux环境安装遇到问题 1、启动失败日志 ERROR: [1] bootstrap checks failed [1]: the default discovery settings are unsuitable for production use; at least one of [discovery.seed_hosts, discovery.seed_providers, cluster.initial_master_nodes] must be con…
阅读更多...
对某颜色站的一次渗透实战

对某颜色站的一次渗透实战

1. 前提 1.1 某颜色cms弱口令原理 去年的时候&#xff0c;在网上看到有些师傅在打击颜色站&#xff0c;当时自己也摸索着试试&#xff0c;利用一个叫做jiuse cms的站来进行批量测试。 这个cms的特点是非常的小&#xff0c;前台除了xss之外&#xff0c;基本上漏洞都在后台&…
阅读更多...
区块链+游戏：未来真的有未来吗？

区块链+游戏：未来真的有未来吗？

今年以来&#xff0c;伴随着元宇宙与P2E的火热浪潮&#xff0c;区块链以其强大的叙事能力势如破竹的切入到传统游戏领域&#xff0c;顶级风投、知名巨企纷纷入局&#xff0c;迸发出极大的经济潜能&#xff0c;引发了社会的广泛关注。 一方面&#xff0c;区块链技术在游戏的运用…
阅读更多...
【漏洞复现】多语言文件包含漏洞分析

【漏洞复现】多语言文件包含漏洞分析

漏洞描述&#xff1a; ThinkPHP在开启多语言功能的情况下存在文件包含漏洞&#xff0c;攻击者可以通过get、header、cookie等位置传入参数&#xff0c;实现目录穿越文件包含&#xff0c;通过pearcmd文件包含这个trick即可实现RCE。 影响版本&#xff1a; 6.0.1 < ThinkPH…
阅读更多...
【TypeScript】TS交叉类型联合类型（四）

【TypeScript】TS交叉类型联合类型（四）

&#x1f431;个人主页&#xff1a;不叫猫先生 &#x1f64b;‍♂️作者简介&#xff1a;前端领域新星创作者、华为云享专家、阿里云专家博主&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; &#x1f4ab;系列专栏&#xff…
阅读更多...
Mybatis_Plus_@TableName,@TableField

Mybatis_Plus_@TableName,@TableField

思考一个问题:为啥继承BaseMapper< POJO >&#xff0c;能直接找到Mysql的表 默认情况下:mp根据BaseMapper泛型POJO类取数据库底下找与POJO类型一致的表 思考一个问题:如果把表user改成tb_user那么我们需要怎么解决 使用TableName注解 TableField 思考一个问题:我们新增…
阅读更多...
学习.NET MAUI Blazor（五）、修改窗口标题

学习.NET MAUI Blazor（五）、修改窗口标题

由于Blazor属于SPA&#xff08;single-page application&#xff09;&#xff0c;所以页面标题需要使用PageTitle组件来实现。但是在MAUI Blazor中&#xff0c;Blazor所在的位置是WebView&#xff0c;而标题是属于window。所以在MAUI Blazor中&#xff0c;使用PageTitle是无效的…
阅读更多...
vue+bpmn-js 示例/基础入门/动态创建流程节点

vue+bpmn-js 示例/基础入门/动态创建流程节点

先附一个完整的示例&#xff0c;下面做具体介绍 <template><div classcontainers><el-button click"saveXml"></el-button><div class"canvas" ref"canvas"></div><div class"properties" id…
阅读更多...
YOLO系列中Anchor Based和Anchor Free的相爱相杀

YOLO系列中Anchor Based和Anchor Free的相爱相杀

前言 我们都知道按照是否出现RPN可将目标检测算法分为two-stage和one-stage&#xff0c;其中one-stage的一个主要代表便是YOLO系列&#xff0c;而根据是否存在先验锚框的定义我们也可以将其分为Anchor based和Anchor free两类&#xff0c;关于这两种也是各有优劣&#xff0c;但…
阅读更多...
物联网终端的防护体系

物联网终端的防护体系

针对漏洞的恶意行为分析 我们共捕获到 4 种针对 UPnP 漏洞的利用行为 1&#xff0c;如表 4.7 所示。从中可以看出&#xff0c;这些漏洞均为远程 命令执行类漏洞。另外我们也发现&#xff0c;当漏洞出现在特定端口时&#xff0c;攻击者一般不会经过 UPnP 的发现阶段&#xff0c…
阅读更多...
携手用友低代码开发，德鑫物联将RFID融入企业服务大生态

携手用友低代码开发，德鑫物联将RFID融入企业服务大生态

如今&#xff0c;消费者凭借一部手机就可以轻松鉴别名酒的真伪&#xff1a;一些名酒在瓶盖的封膜下已经植入了RFID芯片&#xff0c;消费者用带有NFC功能的手机并安装相应的APP&#xff0c;只需靠近RFID芯片&#xff0c;即可获取产品品名、规格、生产日期等验证信息。 不只是名…
阅读更多...
论文阅读：人机情绪的趋同、循环与溢出——基于 Twitter 涉中议题的数据分析

论文阅读：人机情绪的趋同、循环与溢出——基于 Twitter 涉中议题的数据分析

论文链接&#xff1a;https://shimo.im/files/vVqRVZGEXgcZbRqy/ 《人机情绪的趋同、循环与溢出...tter涉中议题的数据分析_黄阳坤.pdf》&#xff0c;可复制链接后用石墨文档 App 打开 摘要&#xff1a; 在传播研究情感转向的背景下&#xff0c;社交媒体上人机用户间的情绪互动…
阅读更多...
【操作系统】抖动、缺页中断率、页面置换算法

【操作系统】抖动、缺页中断率、页面置换算法

文章目录缺页中断率影响缺页中断率的因素抖动&#xff08;颠簸&#xff09;页面置换算法1、最佳页面淘汰算法&#xff08;OPT&#xff09;2、先进先出页面淘汰算法&#xff08;FIFO&#xff09;3、最近最久未使用页面淘汰算法&#xff08;LRU&#xff09;缺页中断率 对于进程P…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023