当前位置:网站首页>你不知道的 console.log 替代品
你不知道的 console.log 替代品
2022-08-11 03:17:00 【幸福的达哥】
你不知道的 console.log 替代品
现在,假设您正在编写一些JS代码,但它无法正常工作。你做的第一件事是什么?你是Console.log 它!因此,我将告诉您 Console.log 的一些替代方案。
使用解构
通过使用 javascript 对象的破坏能力,您可以这样做:
const { log } = console;log("hi");log("testing");你可以将log函数更改为您想要的任何其他名称,如下所示:
const { log: myLog } = console;myLog("hi");myLog("testing");console.group
曾经想对您的日志进行分组吗?这个方法很适合你!
console.group("groupName");console.log("hi");console.log("testing");console.groupEnd();console.group("groupName2");console.log("hi");console.log("testing");console.groupEnd();
不错吧?
console.table
用于打印数组。
const arr = [1, 2, 3, 4, 5];console.table(arr);
console.time
此方法用于测量时间。例如,检查完成 x 任务花了多少秒?
console.time("test");setTimeout(() => { console.timeEnd("test");}, 1000);这将为我们提供以下结果:
test: 1.000sconsole.assert
此方法用于检查条件是否为真。如果不是,它将引发错误。
console.assert(/** Condition **/, /** Error message **/);console.assert(1 === 1, "1 is equal to 1"); // No errorconsole.assert(0 === [], "0 is equal to []"); // Error in the console
console.count
计算某件事发生的次数。
console.count("counter 1");for (let i = 0; i < 10; i++) { i % 2 == 0 ? console.count("counter 1") : console.count("counter 2");}这给了我们以下结果:

console.trace
此方法跟踪它被调用的位置。我有一个这样的 HTML 文件:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script> "test"; console.trace(); i = 0; </script> </body></html>现在你可以看到在哪里 console.trace 被调用了。

debugger 关键词
您可能没有听说过该debugger关键字。它是一个用于停止代码执行的关键字。
const buggyCode = () => { debugger; console.log("hi");};// ...buggyCode();console.log("World");这会暂停代码的执行,您可以看到如下内容:

它会告诉您调试器的调用位置。

谢谢阅读!
感谢你阅读本教程。希望您已经学到了一些新东西并准备好开始使用它。
边栏推荐
- Typescript study notes | Byte Youth Training Notes
- 解决vim与外界的复制粘贴(不用安装插件)
- DOM树的遍历-----修改样式,选择元素,创建和删除节点
- Detailed explanation of new features of ES advanced function syntax
- Realization of vending machine function based on FPGA state machine
- Idea (preferred) cherry-pick operation
- Add user error useradd: cannot open /etc/passwd
- 成都纸质发票再见!开住宿费电子发票即将全面取代酒店餐饮加油站发票
- 聊聊对RPC的理解
- [BX] and loop
猜你喜欢

Some work experience after joining the digital ic design

Logstash日志数据写入异常排查问题总结

JS-DOM元素对象

BUU刷题记录

Unity2D animation (1) introduction to Unity scheme - animation system composition and the function of use

常用认证机制
![[idea error] Invalid target distribution: 17 solution reference](/img/39/cec5d854b1d941e866c7166b75aa22.png)
[idea error] Invalid target distribution: 17 solution reference

浮点数在内存中的存储方式

"How to kick a bad habit to read notes?

ES进阶 数组功能语法新特性详解
随机推荐
BUU brushing record
The practice of alibaba data synchronization component canal
SQL 开发的十个高级概念
Goodbye Guangzhou paper invoices!The issuance of electronic invoices for accommodation fees will completely replace the invoices of hotels, restaurants and gas stations
Vim and copy and paste from the outside (don't need to install the plugin)
rac备库双节点查询到的表最后更新时间不一致
Add support for Textbundle
添加用户报错useradd: cannot open /etc/passwd
"Life Is Like First Seen" is ill-fated, full of characters, and the contrast of Zhu Yawen's characters is too surprising
[DB operation management/development solution] Shanghai Daoning provides you with an integrated development tool to improve the convenience of work - Orange
Typescript study notes | Byte Youth Training Notes
Ninjutsu_v3_08_2020 - safety penetrating system installation
①CAS SSO单点登录框架源码深度分析
调试技巧总结
浮点数在内存中的存储方式
元素的BFC属性
增加对 Textbundle 的支持
ES6进阶 字符串处理新特性
获取链表长度
Salesforce disbands the Chinese team, which CRM product is more suitable for the Chinese