JavaScript-console:JavaScript控制台(Console)常用方法

一、理解 console

JavaScript 控制台(console)是一个开发人员在编写 JavaScript 代码时常用的工具。它是浏览器提供的一种界面,让开发人员能够追踪代码执行的状态和结果。JavaScript 控制台可以记录代码输出的信息、警告和错误,并帮助开发人员进行调试和修复问题。

在浏览器中,可以通过按 F12 键打开开发者工具,选择控制台(Console)选项来打开 JavaScript 控制台。在控制台中,可以输入和执行 JavaScript 代码,并查看代码输出的结果。控制台还提供了许多有用的辅助工具,如检查 DOM 元素、监视网络请求、性能分析等。

二、JavaScript控制台常用方法

console
序号用法用法描述DEMO
1

console.assert(condition, message)

断言

// condition:需要验证的条件。
// message:当条件为 false 时输出的错误信息(可选参数)。

如果条件为 true,不会有任何输出。如果条件为 false,将会在控制台输出指定的错误信息。

function multiply(a, b) {
  console.assert(typeof a === "number", "a必须是一个数字");
  console.assert(typeof b === "number", "b必须是一个数字");
  return a * b;
}

console.log(multiply(2, 3)); // 输出 6
console.log(multiply(2, "not a number")); // 不会执行,因为第一个assertion会失败
 

2

console.clear()

清除控制台

清除当前控制台的所有输出,将光标回置到第一行

console.clear()
3

console.count()

记录代码执行的次数

可以使用console.count()方法来记录代码执行的次数。

每次调用函数时,控制台都会输出该函数被调用的次数。

function myFunction() {
  console.count("myFunction被调用的次数:");
  // 函数代码
}

myFunction(); // 控制台输出 myFunction被调用的次数:1
myFunction(); // 控制台输出 myFunction被调用的次数:2
myFunction(); // 控制台输出 myFunction被调用的次数:3
 

4

console.countReset()

计数器重置

console.count('apple');
console.count('banana');
console.count('apple');
console.countReset('apple');
console.count('apple');

第一次调用 console.count('apple') 时,输出 'apple: 1',计数器值为 1。

第二次调用 console.count('banana') 时,输出 'banana: 1',计数器值为 1。

第三次调用 console.count('apple') 时,输出 'apple: 2',计数器值为 2。

接着调用 console.countReset('apple'),将计数器值重置为 0。

最后再次调用 console.count('apple') 时,输出 'apple: 1',计数器值为 1。

5

console.debug

调试

console.debug()方法可以用来输出调试信息,常常用于开发和调试过程中。

使用时候控制台这里需要全部选中

var a = 5;
var b = 7;
console.debug("a的值为:" + a + ",b的值为:" + b);

6

console.dir()

显示对象的属性和方法

使用console.dir()方法来显示对象的属性和方法

console.dir(document.body)
7console.dirxml()console.dirxml() 可以将一个 DOM 节点(或者其他可解析为 DOM 节点的对象)以 XML 格式输出到控制台。该方法常用于调试 HTML、CSS 等前端代码。

const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "orange", color: "orange" }
];

console.dirxml(fruits);

8

console.error()

输出错误

输出信息时,在最前面加一个红色的叉,表示出错,同时会显示错误发生的堆栈console.error('error')
9console.exception()

console.exception()方法是console.error()方法的别名,用来输出错误信息

不推荐
10console.event()

没有这个方法,偶然看到这么个东西,光看名字很迷惑,经过调研,确认没有这个方法。

console.event() 不是 JavaScript 标准库中的方法,也不是浏览器或库定义的方法。

在目前的 JavaScript 标准库中,并不存在 console.event() 方法。

11console.group()用于将显示的信息分组,可以把信息进行折叠和展开

console.group("外层分组"); // 开始外层分组
console.log("外层分组的内容");

console.group("内层分组"); // 开始内层分组
console.log("内层分组的内容");
console.groupEnd(); // 结束内层分组

console.groupEnd(); // 结束外层分组

12console.groupCollapsed()与console.group方法很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。
13console.groupEnd()结束内联分组
14console.info()console.log 别名,输出信息console.info("Hello world!")
15

console.log()

打印消息

使用console.log()方法打印消息到控制台

console.log("Hello world!")
16console.memory()

查看内存

这是一个属性,并不是是函数,此属性是用来查看内存使用情况,如果我们使用过多的console.log()会占用大量的内存,导致浏览器出现卡死情况。

console.memory()
17console.markTimeline()console.markTimeline() 可以帮助我们记录代码执行中的重要事件,并在时间轴上进行标记,便于调试、分析和优化程序性能。
18console.profile()console.profile() 可以很方便地对程序性能进行分析,并提供了丰富的性能数据,便于优化程序性能。

function heavyCalculation(n) {
  let sum = 0;
  for (let i = 0; i < n ; i++) {
    sum += i;
  }
  return sum;
}

function main() {
  console.profile("Calculation Profile");
  for (let i = 1000000; i <= 10000000; i += 1000000) {
    console.log(heavyCalculation(i));
  }
  console.profileEnd();
}

main();

19console.profileEnd()性能分析结束
20

console.table()

将数据以表格显示

console.table()会将数组中的对象转换为一个表格,并将表头设置为对象的键。这使得我们可以更容易地查看和比较数组中的对象。

const fruits = [
  { name: "apple", color: "red", price: 1 },
  { name: "banana", color: "yellow", price: 0.5 },
  { name: "grape", color: "purple", price: 2 }
];

console.table(fruits);

21console.time()

计时开始

使用console.time()和console.timeEnd()方法来在控制台中执行代码并计算运行时间。

console.clear();
console.time("myTimer");
for (var i = 0; i < 1000000; i++) {
    // do something
}
console.timeEnd("myTimer");
 
22console.timeEnd()

计时结束

使用console.time()和console.timeEnd()方法来在控制台中执行代码并计算运行时间。

23

console.trace()

查看堆栈跟踪

console.trace()用于打印出当前函数调用栈的详细信息。
它会输出当前代码执行过程中的函数调用关系,以及函数名和代码所在的文件和行号。
这对于调试程序中的错误非常有用,因为它可以告诉开发者在哪里出了问题,并提供了更多的上下文信息来帮助解决问题。
console.trace()可以在任何浏览器的控制台中使用,在Node.js中也可以使用。

function funcOne() {
  console.log("Inside funcOne()");
  funcTwo();
}

function funcTwo() {
  console.log("Inside funcTwo()");
  funcThree();
}

function funcThree() {
  console.log("Inside funcThree()");
  console.trace();
}

funcOne();

24

console.warn()

输出警告

输出警告

console.warn('warn')

三、欢迎交流指正

参考链接

JavaScript Console 对象 | 菜鸟教程

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023-08-21 LeetCode每日一题(移动片段得到字符串)

2023-08-21每日一题 一、题目编号 2337. 移动片段得到字符串二、题目链接 点击跳转到题目位置 三、题目描述 给你两个字符串 start 和 target &#xff0c;长度均为 n 。每个字符串 仅 由字符 ‘L’、‘R’ 和 ‘_’ 组成&#xff0c;其中&#xff1a; 字符 ‘L’ 和 ‘R…

ISVE2023展商 | 皮克智能:零售及互联网领域数字化变革开拓者

ISVE2023展商 | 皮克智能&#xff1a;零售及互联网领域数字化变革开拓者 01 公司介绍 Exhibitor Profile 皮克智能是优质的智能硬件产品及系统解决方案提供商&#xff0c;具备自主研发创新、软硬件方案集成及全产业链资源整合的能力。 公司总部位于中国深圳&#xff0c;主要服…

爬虫逆向实战(十九)--某号站登录

一、数据接口分析 主页地址&#xff1a;某号站 1、抓包 通过抓包可以发现登录接口 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现有一个jsondata_rsa的加密参数 请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 无cookie是否…

华为OD机试之报文重排序【Java源码】

题目描述 对报文进行重传和重排序是常用的可靠性机制&#xff0c;重传缓中区内有一定数量的子报文&#xff0c;每个子报文在原始报文中的顺序已知&#xff0c;现在需要恢复出原始报文。 输入描述 输入第一行为N&#xff0c;表示子报文的个数&#xff0c;0 &#xff1c;N ≤ …

Vue3组合式API详解 - 大型应用的高端写法

目录 01-setup方法与script_setup及ref响应式02-事件方法_计算属性_reactive_toRefs03-生命周期_watch_watchEffect04-跨组件通信方案provide_inject05-复用组件功能之use函数06-利用defineProps与defineEmits进行组件通信 01-setup方法与script_setup及ref响应式 在Vue3.1版本…

python 基础篇 day 1 初识变量和数据类型

文章目录 变量变量作用——用于存储和表示数据。变量命名规则命名法大驼峰小驼峰下划体n j i a x 通常作为临时变量使用 建议 变量种类全局变量&#xff08;Global Variables&#xff09;局部变量&#xff08;Local Variables&#xff09;静态变量&#xff08;Static Variables…

CentOS下MySQL的彻底卸载的几种方法

这里我为大家详细讲解下“CentOS下MySQL的彻底卸载的几种方法”的完整攻略。 一、关闭MySQL服务 在开始操作之前&#xff0c;需要先关闭MySQL服务。可以使用以下命令来关闭MySQL服务&#xff1a; systemctl stop mysqld 或者 service mysqld stop 二、使用yum命令卸载MySQL…

【C++】STL——set的介绍和使用、set的构造函数、set的迭代器、set的容量和增删查改函数

文章目录 1.set的介绍2.set的使用2.1set的构造函数2.2set的迭代器2.3set的容量函数2.4set的增删查改函数 1.set的介绍 set的介绍 &#xff08;1&#xff09;set是按照一定次序存储元素的容器。 &#xff08;2&#xff09;在set中&#xff0c;元素的value也标识它(value就是key…

最新ChatGPT网站程序源码+AI系统+详细图文搭建教程/支持GPT4.0/AI绘画/H5端/Prompt知识库

一、前言 SparkAi系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。 那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&#xff01…

PDF怎么转Word?8 个最佳 PDF 转 Word 转换器

PDF 转 Word 转换工具只是一个特殊程序&#xff0c;可以将 PDF&#xff08;本机和/或扫描&#xff09;转换为 Microsoft Office Word 格式。将 PDF 导出到 Word 的主要原因之一是满足可编辑文档的需求&#xff0c;尽管还有其他原因。 由于缺少 PDF 阅读器&#xff0c;您可以选…

pytest结合Excel实现接口自动化

前言 我们先来回顾下之前篇章“pytest通过parametrize方法实现数据驱动实战”&#xff0c;主要是通过yaml文件来读取测试用例。而我们用Excel文件存放测试用例又有什么区别呢&#xff1f; 毫无疑问&#xff0c;Pytest自动化测试框架也能读取Excel文件实现数据驱动。 还记得之…

打开软件提示mfc100u.dll缺失是什么意思?要怎么处理?

当你打开某个软件或者运行游戏&#xff0c;系统提示mfc100u.dll丢失&#xff0c;此时这个软件或者游戏根本无法运行。其实&#xff0c;mfc100u.dll是动态库文件&#xff0c;它是VS2010编译的软件所产生的&#xff0c;如果电脑运行程序时提示缺少mfc100u.dll文件&#xff0c;程序…

ClickHouse(二十三):Java Spark读写ClickHouse API

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术&#xff0c;IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &…

【李宏毅机器学习】注意力机制

输出 我们会遇到不同的任务&#xff0c;针对输出的不一样&#xff0c;我们对任务进行划分 给多少输出多少 给一堆向量&#xff0c;输出一个label&#xff0c;比如说情感分析 还有一种任务是由机器决定的要输出多少个label&#xff0c;seq2seq的任务就是这种&#xff0c;翻译也…

如何创建和销售在线健身业务

快速轻松地创建您自己的线上健身网站&#xff01; 越来越多的人在家健身&#xff0c;在线健身业务也随之快速增长。 虽然这个生意很红火&#xff0c;但是真的像看起来那么容易上手吗&#xff1f; 有了MemberPress&#xff0c;确实如此&#xff01; 在这篇文章中&#xff0c…

Java集合利器 Map Set

Map & Set 一、概念二、Map三、Set下期预告 一、概念 Map和Set是一种专门用来进行搜索的数据结构&#xff0c;其搜索的效率与其具体的实例化子类有关。它们分别定义了两种不同的数据结构和特点&#xff1a; Map&#xff08;映射&#xff09; &#xff1a;Map是一种键值对&…

Python爬取斗罗大陆全集

打开网址http://www.luoxu.cc/dmplay/C888H-1-265.html F12打开Fetch/XHR&#xff0c;看到m3u8&#xff0c;ts&#xff0c;一眼顶真&#xff0c;打开index.m3u8 由第一个包含第二个index.m3u8的地址&#xff0c;ctrlf在源代码中一查index&#xff0c;果然有&#xff0c;不过/…

借助Midjourney创作龙九子图

&#xff08;本文阅读时间&#xff1a;5 分钟&#xff09; 《西游记》中有这么一段描写&#xff1a; 龙王道&#xff1a;“舍妹有九个儿子。那八个都是好的。第一个小黄龙&#xff0c;见居淮渎&#xff1b;第二个小骊龙&#xff0c;见住济渎&#xff1b;第三个青背龙&#xff0…

element-ui中二次封装一个带select的form组件

带select的form组件 样式 代码 <template><el-form-item label"是否有" class"append" prop"tag"><el-form-itemprop"isShare"><el-select v-model"query.tag"><el-option v-for"(item, …

【Unity】UI的一些简单知识

Canvas 新建一个Canvas Render Mode Canvas 中有一个Render Mode&#xff08;渲染模式&#xff09;&#xff0c;有三种渲染模式: Screen Space-Overlay &#xff08;屏幕空间&#xff09;Screen Space-Camara 、 World Space 其中&#xff0c;Space- Overlay是默认显示在…