【JavaScript】浏览器调试控制台console的功能有了解多少

news2024/9/23 13:16:01

在我们学会JavaScript编程以后,编程调试通常使用console.log() ,那有没有想过,console除了log,还有很多是没有用到的,久而久之,就忘记了怎么用,接下来熟悉一下,温故而知新,将来必有大用。

首先,想一想,还记得多少了,有哪些忘记了,想要寻回,只需这样做,在浏览器控制台输入console.context()打印看一下所有方法,如下图所示

在这里插入图片描述

💡
上图是在谷歌浏览器上控制台打印的,可能别的浏览器控制台不支持某部分方法;
命令console.context()console.log(console)作用是相同的;

文章目录

  • 1. log()
  • 2. error()
  • 3. info()
  • 4. warn()
  • 5. assert()
  • 6. time()
  • 7. timeLog()
  • 8. timeStamp()
  • 9. trace()
  • 10. count()
  • 11. profile()
  • 12. memory()
  • 13. debug()
  • 14. dir()
  • 15. dirxml()
  • 16. group()
  • 17. groupCollapsed()
  • 18. table()
  • 19. clear()

1. log()

用于打印输出变量值,经常用到

console.log('hello world');
let a = { 'key': 1 };
console.log('this is a', a);

打印效果图如下
在这里插入图片描述

2. error()

用于打印输出带红色的错误信息,然后执行中断

console.error('执行出错了');
console.log('执行完了');

打印效果图如下
在这里插入图片描述

3. info()

用于打印输出提示信息,同log()一样,貌似不常用

console.info('hello world');

4. warn()

用于打印输出带橙色的警告信息,貌似不常用

console.warn('⚠警告:道路千万条,安全第一条!');

打印效果图如下
在这里插入图片描述

5. assert()

有判断条件的打印错误信息,第一个参数传入表达式,如a==1,不满足条件时就打印第二个参数以上的信息,然后执行中断

let a = 2;
console.assert(a==1,'不满足a==1条件');
console.log('执行完了');

打印效果图如下
在这里插入图片描述

6. time()

用于测试耗时性能,记录一段代码执行所需的时间,开始计时用time(),结束计时用timeEnd(),括号中可以传一个带标签名的加以区分

const label = "耗时1";
console.time(label);
// 此处省略处理过程...
let sum = Math.pow(2,100);
console.log('求2的100次方是',sum);
console.timeEnd(label);

打印效果图如下:
在这里插入图片描述

7. timeLog()

用于打印每时刻的,不会结束计时,需要配置time()timeEnd()一起使用

let label = '计时1';
console.time(label);
for(let i=0; i<10; i++) {
	let sum = Math.pow(2,i);
	console.log(`计算 2 的${i}次方`,sum);
	console.timeLog(label);
}
console.timeEnd(label);

输出效果图如下
在这里插入图片描述

8. timeStamp()

用于性能调试分析,在性能面板(Performance)会话中记录到一个事件,可传一个参数加文本标签,以便区分

let label = '记录点1';
console.time(label);
for(let i=0; i<10; i++) {
let sum = Math.pow(2,i);
	console.log(`计算 2 的${i}次方`,sum);
	console.timeStamp(label);
}
console.timeEnd(label);

9. trace()

调用此方法可以打印追踪在堆栈中的函数调用轨迹,通常用于打印在调用函数出错的地方,方便查找定位错误

let fun1 = () => {
	console.log('> fun1');
	console.trace('->');
};
let fun2 = (f) => f();
let fun3 = (f) => f();

(()=>fun3(()=>fun2(()=>fun1())))();

打印输出如下图
在这里插入图片描述

10. count()

用于打印累计数,如果要重置计数,就用countReset()

for(let i=0; i<10; i++) console.count('计数');

打印效果图如下
在这里插入图片描述

11. profile()

用于分析函数性能,开始用profile(),结束用profileEnd(),系统会打开一个性能面板(Performance)分析器来观察

let label = '分析埋点1';
console.profile(label);
for(let i=0; i<10; i++) {
let sum = Math.pow(2,i);
	console.log(`计算 2 的${i}次方`,sum);
}
console.profileEnd(label);

输出如下图所示,
在这里插入图片描述
点击图中的Performance打开性能面板,点击record,然后重新执行一遍代码,最后点击stop,就会出现统计图

12. memory()

据说是用于查看当前的运行内存堆大小状态的,不熟悉性能测试问题的是不太会运用,对编写程序来说,不是经常用的

console.memory;

打印效果如下图
在这里插入图片描述

13. debug()

据说是用于将信息打印到别的控制台换行符中的,类似log()方法,貌似没什么用

console.debug('hello world');

14. dir()

适用于打印DOM元素的对象或数组

console.log(document);

打印效果图如下
在这里插入图片描述

15. dirxml()

适用于打印封装DOMXML元素的对象或数组

console.dirxml(document);

打印效果图如下
在这里插入图片描述

16. group()

如果要输出一段信息,可以先用它括起来,开始用group(),结束用groupEnd(),括号中可以传一个带标签的分组名

const label = "分组1";
console.group(label);
// 此处省略处理过程...
console.log('hello world');
console.groupEnd(label);

打印效果图如下
在这里插入图片描述

17. groupCollapsed()

同上面group()方法用法一样,结束也是用groupEnd(),默认是不展开分组的,适用于打印信息比较多的情况

const label = "分组1";
console.groupCollapsed(label);
// 此处省略处理过程...
console.log('hello world');
console.groupEnd(label);

18. table()

用于打印对象,或复杂数组,以表格来展示所有属性

let table1 = [1,2,3,4];
let table2 = { a: 'b', c: 'd' };
console.table(table1);
console.table(table2);

打印效果如下图
在这里插入图片描述

19. clear()

清除之前的打印日志信息

console.clear();
//...清除了,接下来重新开始

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

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

相关文章

网页大作业代码自取

&#x1f468;‍&#x1f393;静态网站的编写主要是用HTML DIVCSS JS等来完成页面的排版设计&#x1f469;‍&#x1f393;,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等&#xff0c;用的最多的还是DW&#xff0c;当然不同软件写出的…

Red Eye Camera开发日记之API 移植I2C 和关键接口函数

API 说明文件里面有官方的移植指导&#xff0c;但我觉得可以把重点放在与 MLX90640 具体操作有关的几个函数上&#xff0c;而与标准 I2C 相关的函数和文件结构还是按照自己习惯的套路实现。这样更符合我们开发人员的可控性的习惯。步骤如下&#xff1a; 建立标准 I2C 文件 IIC…

第P9周:YOLOv5-Backbone模块实现

● &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客 ● &#x1f366; 参考文章&#xff1a;Pytorch实战 | 第P9周&#xff1a;YOLOv5-Backbone模块实现(训练营内部成员可读) ● &#x1f356; 原作者&#xff1a;K同学啊|接辅导、项目定制 说明&…

电脑技巧:推荐4个冷门且功能非常强大的效率工具

目录 1、Seafile 企业云盘神器 2、PPSSPP PSP模拟器神器 3、按键精灵 键盘鼠标模拟神器 4、BenVista PhotoZoom Pro 图片无损放大神器 今天给大家推荐4个冷门且功能非常强大的效率工具&#xff0c;一起来看看吧&#xff01; 1、Seafile 企业云盘神器 Seafile 是一个开源的网…

middlebury立体匹配评估使用方法总结(二)——python版离线教程

系列文章目录 middlebury立体匹配评估使用方法总结&#xff08;一&#xff09;——网站说明 middlebury立体匹配评估使用方法总结&#xff08;二&#xff09;——python版离线教程 文章目录系列文章目录前言1.下载内容2.配置环境3.elas编译4. 运行评估总结前言 最近想使用midd…

vim配置systemverilog环境

参考文章: vim中systemverilog的高亮显示 - 乔_木 - 博客园vim中systemverilog的高亮显示https://www.cnblogs.com/OneFri/p/6087847.html 一、.vimrc配置文件中添加 filetype on "打开文件类型检测 二、创建运行目录 mkdir -p ~/.vim/ftdetect mkdir -p ~/.vim/synta…

Python基础知识入门(一)

Python基础知识入门&#xff08;二&#xff09; 一、发展历程 Python的创始人为荷兰人吉多范罗苏姆&#xff08;Guido van Rossum&#xff09;。1989年圣诞节期间&#xff0c;在阿姆斯特丹&#xff0c;Guido为了打发圣诞节的无趣&#xff0c;决心开发一个新的脚本解释程序&…

第五章《类的继承》第2节:子类对象的构建过程

5.1小节讲解了类的继承机制。通过学习5.1小节的内容可知:子类能够继承父类的属性和方法,在此基础上,子类常常会扩展出属于自身特有的属性和方法,因此子类对象中的属性和方法可以分为两部分:从父类中继承而来的部分和自身所定义的部分。图5-3展示了Person和Student父子两个…

C++中的继承(上)

&#x1f9f8;&#x1f9f8;&#x1f9f8;各位大佬大家好&#xff0c;我是猪皮兄弟&#x1f9f8;&#x1f9f8;&#x1f9f8; 文章目录一、继承概述二、继承方式与访问限定符三、继承中的作用域四、基类和派生类对象赋值兼容转换五、继承当中默认成员函数的问题1.构造函数2.拷…

我做整车疲劳耐久分析9年积累的22条建模经验

作者&#xff1a;孙老师 对于承受交变应力的设备&#xff0c;疲劳分析在有限元分析占有重要地位。在进行疲劳分析时&#xff0c;有限元模型的正确搭建又至关重要。我们都知道&#xff0c;模型的质量直接影响分析的精度&#xff0c;所以好的建模方式是疲劳分析的第一步&#xf…

OpenGL原理与实践——核心模式(一):VBO、VAO等原理解析及项目初始设置

目录 序言——OpenGL在是什么&#xff1f;为什么&#xff1f;做什么? OpenGL实现了什么 OpenGL内模型数据的本质——顶点数据 我们需要研究什么——三角形&#xff0c;一个图形基元 MVP变换 OpenGL渲染流程的关键——摄像机变换 OpenGL渲染管线概览 准备——项目配置…

dpdk结合sriov测试vpp ipsec性能

目的 测试vpp ipsec转发性能&#xff0c;想当作openstack VPNaas的一种driver&#xff0c;提高ipsec网关的转发能力。 环境 测试资源很有限&#xff0c;没有测试仪&#xff0c;物理机之外的交换机不受控制。 只有两台物理机&#xff0c;各有一张测试网卡&#xff0c;网卡有…

分布式存储之 etcd 的集群管理

在分布式文件存储中&#xff0c;我们通常会面临集群选主&#xff0c;配置共享和节点状态监控的问题。通过 etcd&#xff08;基于 Raft 协议)&#xff09;可以实现超大规模集群的管理&#xff0c;以及多节点的服务可靠性。今天&#xff0c;我们就聊聊 etcd 在分布式存储中的具体…

作业-11.24

1、多线程并发服务器 #include <stdio.h> #include <sys/types.h> #include <sys/socket.h> #include <netinet/in.h> #include <netinet/ip.h> #include <string.h> #include <pthread.h> #include <stdlib.h> #include <…

MCE | 间歇性禁食增强抗癌疗效

越来越多的研究表明&#xff0c;“禁食”不仅与免疫系统调控 、血糖调节有关&#xff0c;还对多种疾病的治疗有改善效果&#xff0c;如心血管疾病和癌症等。这里的“禁食”与节食不同&#xff0c;一般指的是间歇性禁食&#xff0c;包括多种方案&#xff0c;例如 FMD (Fasting-m…

LeetCode135. 分发糖果(贪心算法)

1 题目描述 n 个孩子站成一排。给你一个整数数组 ratings 表示每个孩子的评分。 你需要按照以下要求&#xff0c;给这些孩子分发糖果&#xff1a; 每个孩子至少分配到 1 个糖果。相邻两个孩子评分更高的孩子会获得更多的糖果。 请你给每个孩子分发糖果&#xff0c;计算并返回…

pyinstaller打包教程(pycharm)

PyInstaller简介 PyInstaller是一个跨平台的Python应用打包工具&#xff0c;支持 Windows/Linux/MacOS三大主流平台&#xff0c;能够把 Python 脚本及其所在的 Python 解释器打包成可执行文件&#xff0c;从而允许最终用户在无需安装 Python 的情况下执行应用程序。 PyInstalle…

IOS安全测试学习-DVIA-v2

前言 为学习IOS知识并加深理解&#xff0c;故通过IOS漏洞靶场来直接体现IOS环境中的常见漏洞。 环境准备 iPhone X ios 13.4.1 已越狱 MacOS Big Sur 11.0 Bate 虚拟机 DVIA-v2 IOS 漏洞靶场app grapefruit、objection #pip3 install frida、pip3 install frida-tools、sudo …

【App自动化测试】(五)移动端自动化常用的元素定位工具——Uiautomatorviewer、 ATX WEditor、Appium Inspector

目录1. uiautomatorviewer1.1 uiautomatorviewer 的安装1.2 uiautomatorviewer 工具功能介绍1.3 uiautomatorviewer 的使用方法2. ATX WEditor2.1 ATX WEditor的安装2.2 ATX WEditor 功能介绍2.3 ATX WEditor 的使用3. Appium Inspector3.1 Appium Inspector安装与运行3.2 Appi…

【AWS系列】第八讲:AWS Serverless之S3

目录 序言 1.基础介绍 1.1 概念介绍 1.2 原理介绍 1.3 应用场景 1.3.1 构建数据湖 1.3.2 备份和还原关键数据 1.3.3 以最低成本存档数据 1.3.4 运行云原生应用程序 1.4 S3 的功能 1.4.1 存储类 1.4.2 存储管理 1.4.3 访问管理 2 使用方法 2.1 创建存储桶 ​2.2…