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

news2024/9/25 13:19:46

一、理解 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 对象 | 菜鸟教程

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

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

相关文章

opencv 进阶13-Fisherfaces 人脸识别-函数cv2.face.FisherFaceRecognizer_create()

Fisherfaces 人脸识别 PCA 方法是 EigenFaces 方法的核心&#xff0c;它找到了最大化数据总方差特征的线性组合。不可否认&#xff0c;EigenFaces 是一种非常有效的方法&#xff0c;但是它的缺点在于在操作过程中会损失许多特征信息。 因此&#xff0c;在一些情况下&#xff0c…

外贸网站怎么做推广优化

外贸网站的推广和优化是关键&#xff0c;因为它可以帮助您扩展国际市场并吸引更多的客户。以下是e6zz seo多年经验总结出一些有效的方法&#xff0c;可以帮助您推广和优化外贸网站&#xff1a; 优化网站内容&#xff1a; 确保您的网站内容对国际客户有吸引力&#xff0c;包括产…

lab4 traps

在开始做lab之前务必弄清楚 所谓的系统调用&#xff0c;本质上就是内核态和用户态之间的切换内核态和用户态的区别本质上就是一些关键属性的区别&#xff0c;比如页表 而他们的运行方式都一样&#xff0c;就是取指执行&#xff0c;没有魔法 只不过内核态和用户态的执行不在一个…

自动化客户服务必备神器——salesmartly

自动化客户服务必备神器——salesmartly 您是否正在寻找节省时间和简化客户服务流程的方法&#xff1f;客户服务自动化就是答案&#xff01;自动化使企业能够提供更快、更高效的客户服务&#xff0c;尤其是在电子商务领域。在本文中&#xff0c;我们将讨论自动化客户服务流程的…

没有高学历就没有高薪工作?

大家好&#xff0c;我是郑州软件测试4期的小路同学&#xff0c;是一个只有普通高中学历的河南人。由于自己上学的时候对学习不感兴趣&#xff0c;于是很早就辍学了。干过服务员&#xff0c;也卖过房子&#xff0c;但是干啥工作都没有挺过半年的&#xff0c;因为薪资很低&#x…

go_并发编程

go并发编程 一、 并发介绍1&#xff0c;进程和线程2&#xff0c;并发和并行3&#xff0c;协程和线程4&#xff0c;goroutine 二、 Goroutine1&#xff0c;使用goroutine1&#xff09;启动单个goroutine2&#xff09;启动多个goroutine 2&#xff0c;goroutine与线程3&#xff0…

docker compose的用法

目录 一、Docker-Compose介绍 1.1 Docker-Compose的概述 1.2 Docker-Compose 用来实现Docker容器快速编排 1.3 Docker-compose模板文件简介 二、YAML简介 2.1 YAML的概述 2.2 YAML的基本语法规则 2.3 YAML支持的数据架构 三、配置内部常用字段 四、Docker-compose 常…

常见的软件测试用例设计方法有哪些?

常见的软件测试用例设计方法&#xff0c;个人认为主要是下面这6种&#xff1a; 1)流程图法&#xff08;也叫场景法&#xff09; 2)等价类划分法 3)边界值分析 4)判定表 5)正交法 6)错误推测法 这6种常见方法中&#xff0c;我分别按照定义、应用场景、使用步骤、案例讲解这4个部…

Vue-13.创建完整的Vue项目(vue+vue-cli+js)-1

前言 之前写了命令创建Vue项目&#xff0c;但是事实上我们可以直接用编译器直接创建项目&#xff0c;这里我使用webstorm&#xff08;因为我是前后端兼修的所以我习惯使用Idea家族的编译器&#xff09; 只写前端的推荐用VsCode前后端都写的推荐用webstorm 新建项目 项目初始…

记录node 版本对应的 node-sass 版本号

当我们在项目中使用 node-sass 时&#xff0c;电脑的 node版本号一定要与 node-sass 版本号对应&#xff0c;不对应时下载就会报错 一、官方文档地址 https://www.npmjs.com/package/node-sass 二、对应版本表格

一张图看懂 USDT三种类型地址 Omni、ERC20、TRC20的区别

USDT是当前实用最广泛&#xff0c;市值最高的稳定币&#xff0c;它是中心化的公司Tether发行的。在今年的4月17日之前&#xff0c;市场上存在着2种不同类型的USDT。4月17日又多了一种波场TRC20协议发行的USDT&#xff0c;它们各自有什么区别呢?哪个转账最快到账&#xff1f;哪…

Android kotlin 跳转手机热点开关页面和判断热点是否打开

Android kotlin 跳转手机热点开关页面和判断热点是否打开 判断热点是否打开跳转手机热点开关页面顺带介绍一些其他常用的设置页面跳转 其他热点的一些相关知识Local-only hotspot 参考 判断热点是否打开 网上方法比较多&#xff0c;我这边使用了通过WifiManager 拿反射的getWi…

【C#学习笔记】委托和事件

文章目录 委托委托的定义委托实例化委托的调用多播委托 为什么使用委托&#xff1f;官方委托泛型方法和泛型委托 事件为什么要有事件&#xff1f;事件和委托的区别&#xff1a; 题外话——委托与观察者模式 委托 在 .NET 中委托提供后期绑定机制。 后期绑定意味着调用方在你所…

问题解决:Failed to start sshd.service: Unit is masked.

centos7.6 ssh突然不能用了 也启动不了 错误如下&#xff1a; 解决方式&#xff1a; systemctl unmask sshd systemctl start sshd

day 34 | ● 62.不同路径 ● 63. 不同路径 II

62.不同路径 递归公式为上 左 func uniquePaths(m int, n int) int {dp : make([][]int, m)for i : 0; i < m; i{tmp : make([]int, n)dp[i] tmpdp[i][0] 1}for i : 0; i < n; i{dp[0][i] 1}for i : 1; i < m; i{for j : 1; j < n; j{dp[i][j] dp[i - 1][j] …

倒计时动效

1. 效果 2. html <div class"count"><span>3</span><span>2</span><span>1</span> </div>3. css body {width: 100vw;height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: cente…

数据存储效率对决:Redis String vs. Hash性能大比拼,哪个更适合你?

一、Redis的数据类型 1、常规类型 1&#xff09;String&#xff08;字符串&#xff09;&#xff1a;最基本的数据结构&#xff0c;可以存储任何类型的字符串、数字或二进制数据。 2&#xff09;Hash&#xff08;哈希表&#xff09;&#xff1a;类似于关联数组或字典&#xff…

售后服务管理软件怎么选择?售后服务管理系统有什么用?

随着企业信息化发展&#xff0c;越来越多的企业纷纷选择售后服务管理软件来服务客户和进行内部人员管理。借助这款软件&#xff0c;企业能够高效地满足客户提出的需求&#xff0c;并提高客户对售后服务的满意度。售后服务通常涉及客户、客服、维修师傅和服务管理人员等各种角色…

[JavaWeb]【八】web后端开发-Mybatis

目录 一 介绍 二 Mybatis的入门 2.1 快速入门 2.1.1 准备SpringBoot工程 2.1.2 创建数据库mybatis以及对应库表user 2.1.3 创建User实体类 2.1.4 配置application.properties数据库连接信息 2.1.5 编写sql语句&#xff08;注解方式&#xff09; 2.1.6 测试运行 2.1.7 配…