专业前端 console 大法

news/2024/7/19 14:45:24 标签: java, python, js, javascript, css
js_content">

‍作者:正经程序员

链接:https://juejin.cn/post/7065856171436933156

学习前端开发时,几乎最先学习的就是console.log()

毕竟多数人的第一行代码都是:console.log( Hello World );

console对象提供了对于浏览器调试控制台的访问,可以从任何全局对象中访问到console对象。

灵活运用console对象所提供的方法,可以让开发变得更简单。

最常见的控制台方法:

console.log()– 打印内容的通用方法。
console.info()– 打印资讯类说明信息。
console.debug()– 在控制台打印一条 "debug" 级别的消息。
console.warn()– 打印一个警告信息。
console.error()– 打印一条错误信息。
复制代码
597fd319db0c24e1fdd5991a134b6c16.png

console.log()写css

77b32263e30853172a537327f0b0141e.png

console.log() 使用参数

4ee735787992abe6c1e1568182f931bd.png

console.clear();

用于清除控制台信息。

7ef51c8914daea629bc868a214cbc32b.png

console.count(label);

输出count()被调用的次数,可以使用一个参数label。演示如下:

var user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");
复制代码

输出

62a1bfeb50029cb935a6d8dcdefdbba1.png

console.dir()

使用console.dir()可以打印对象的属性,在控制台中逐级查看对象的详细信息。

8990e144b1698a598770b37578974450.png

console.memory

console.memory是一个属性,而不是方法,使用memory属性用来检查内存信息。

1f0d345cf2a86b0d03e833f7935ecb0e.png

console.time() 和 console.timeEnd()

  • console.time()– 使用输入参数的名称启动计时器。在给定页面上最多可以同时运行 10,000 个计时器。

  • console.timeEnd()– 停止指定的计时器并记录自启动以来经过的时间(以毫秒为单位)。

8e1d781227689b863fc76f64aaad59a2.png

console.assert()

如果断言为假,将错误信息写入控制台,如果为真,无显示。

4974f83104c1fcc82cddd6f46e1d13b1.png

console.trace();

console.trace()方法将堆栈跟踪输出到控制台。

6dd6d5cc266783c3ef245357881351a2.png

console.table();

console中还可以打印表格

dbad51cb909141c3368a67666fe53854.png 4e3ec69064082c7da69d8bf9904a772b.png

打印Html元素

fbae5782415d73aa2ce0b0ccf773cfd4.png

console.group() 和 console.groupEnd()

在控制台上创建一个新的分组,随后输出到控制台上的内容都会被添加到一个锁进,表示该内容属于当前分组,知道调用console.groupEnd()之后,当前分组结束。

d1958e350827d2853321b6b70516b7c0.png

http://www.niftyadmin.cn/n/1250904.html

相关文章

通过几行 JS 就可以读取电脑上的所有数据?

Spectre如果一个漏洞很难构造,就算他能够造成再大的危害,可能也不会引起浏览器这么大的重视,那么我们今天的主角 Spectre ,是又容易构造,而且造成的危害也很大的,利用 Spectre ,你可以&#xf…

Nest.js 用了 Express 但也没完全用

Node.js 提供了 http 模块用于监听端口、处理 http 请求,返回响应,这也是它主要做的事情。但是 http 模块的 api 太过原始,直接基于它来处理请求响应比较麻烦,所以我们会用 express 等库封装一层。这一层做的事情就是给 request 和…

JavaScript 又新增两个原始数据类型

JavaScript即将推出两个新的数据类型:Record 和 Tuple ,这俩是啥呢?其实就是一个只读的 Object 和 Array,其实在其它语言中已经有类似的数据类型了,例如 Python 中也有 Tuple(元祖)这一类型&…

Vuex 更好的替代品 Pinia,真香

作者:凯哥爱吃皮皮虾https://juejin.cn/post/7068113574043844622Piniapinia 目前已经是 vue 官方正式的状态库。适用于 vue2 和 vue3,本文只描述vue3的写法。pinia 的优势相对于以前的 vuex,pinia具有以下优势更简单的写法,代码更…

不要再被误导了,封装 Axios 只看这一篇文章就行了

看很多网上的人的封装 Axios 教程,但或多或少都有不太合适的点,这里为大家推荐我的最佳实践。拦截器不要返回数据,依然返回 AxiosResponse 对象网上的文章都让你用 拦截器 直接返回数据,这种作法其实是非常不妥的,这样…

生产环境要如何 debugger 「技巧」

本文首发于政采云前端团队博客:前端工程师生产环境 debugger 技巧https://www.zoo.team/article/prod-debugger导言开发环境 debug 是每个程序员上岗的必备技能。生产环境呢?虽然生产环境 debug 是一件非常不优雅的行为,但是由于种种原因&…

高级 API 长这个样子,你用到了吗?

MutationObserverIntersectionObservergetComputedStyle()getBoundingClientRectrequestAnimationFrameMutationObserver MutationObserver 是一个可以监听 DOM 结构变化的接口。当 DOM 对象树发生任何变动时,MutationObserver 会得到通知。APIMutationObserver 是一…

为什么说 TypeScript 的火爆是必然?

TypeScript 这些年越来越火,可以说是前端工程师的必备技能了,各大框架都基于它实现。那么,TypeScript 的出现和爆火是偶然发生的吗?其实不是,类似 TypeScript 这种静态类型语言成为主流是必然会发生的。为什么这么说呢…