你可能还不知道的 console.log 替代品

news2024/10/5 14:19:58

通过使用 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.000s

console.assert

此方法用于检查条件是否为真。如果不是,它将引发错误。

console.assert(/** Condition **/, /** Error message **/);
console.assert(1 === 1, "1 is equal to 1"); // No error
console.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");

这会暂停代码的执行,您可以看到如下内容:

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

好啦,这就是console的众多用法了,大家平时是不是只会用console.log()呢

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

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

相关文章

vue插槽 Slots

一、插槽是什么&#xff1f; 插槽就是子组件中的提供给父组件使用的一个占位符&#xff0c;用<slot></slot> 表示, 父组件可以在这个占位符中填充任何模板代码&#xff0c;如 HTML、组件等&#xff0c;填充的内容会替换子组件的<slot></slot>标签。 简…

OpenSergo Spring Cloud Alibaba 带来的服务治理能力

作者&#xff1a;十眠、牧思 Spring Cloud 应用为何需要服务治理 随着微服务技术的发展&#xff0c;微服务(MicroServices) 的概念早已深入人心&#xff0c;越来越多的公司开始使用微服务架构来开发业务应用。 如果采用得当&#xff0c;微服务架构可以带来非常大的优势。微服…

IDEA与eclipse桌面配置基础(笔记)

在eclipse中配置jdk Window–>Preferences–>java–>installed JREs–>add–>Standard VM–>选择jdk安装路径就好了 设置字符集编码为utf-8&#xff0c;防止中文乱码 设置字符集编码为UTF-8&#xff1a;Window–>Preferences–>General–>Workspace…

第四次工业革命新十年:看跨越智能化鸿沟的联想范式

十年前&#xff0c;GE推出全球第一个工业互联网平台Predix&#xff1b;同年&#xff0c;在2013汉诺威工业博览会上&#xff0c;德国正式推出工业4.0概念。由此&#xff0c;全球开启了以工业4.0和工业互联网为核心的第四次工业革命浪潮&#xff0c;智能技术成为了第四次工业革命…

4N25光耦合器:简单的应用电路

4N25光耦合器&#xff1a;简单的应用电路 介绍 4N25是一款6引脚光电晶体管耦合器。本文根据其传动特性介绍了 4N25 的非线性和线性应用。 4N25概述 光电耦合器4N25的内部电路结构如图1所示。 图1.4N25内部电路结构 该芯片为双列直插式器件&#xff0c;外引线为6根&#xff0…

Dart语法学习-基础-类

Classes Using constructors 使用构造函数创建对象。 构造函数名称可以是 ClassName 或 ClassName.identifier。 例如&#xff0c;以下代码使用 Point() 和 Point.fromJson() 构造函数创建 Point 对象&#xff1a; class Point {var x;var y;Point(int this.x, int this.y);…

Java --- Integer.parseInt()

parseInt() 方法是java.lang 包下Integer 类的一个方法。 Java Integer parseInt() 方法共有三种不同类型&#xff0c;可以根据其参数进行区分。 用法: 以下是 parseInt() 方法的声明&#xff1a; public static int parseInt (String s) public static int parseInt (Strin…

捐赠物品管理系统-php mysql

目 录 第一章 引言 1 1.1研究背景 1 1.2研究现状 1 1.3 系统相关技术与环境简介 1 1.3.1 PHP 1 1.3.2 Apache 2 1.3.3 MySQL数据库 2 1.3.4 运行环境 Windows 3 1.3.5 appserv 3 1.3.6 Dreamweave8 3 1.3.7 EditPlus 4 第二章 需求分析…

前端必备开发编译器详解

一、前言 前端开发编译器有很多&#xff0c;例如&#xff1a;WebStorm、VS Code、HBuilder X、Sublime Text等等。在这里就不一一介绍了&#xff0c;这里主要讲解VS Code和HBuilder X 编译器。 二、VS Code Visual Studio Code (简称 VS Code) 是一款免费开源的现代化轻量级…

论文阅读:Tube Convolutional Neural Network (T-CNN) for Action Detection in Videos

Tube Convolutional Neural Network (T-CNN) for Action Detection in Videos 文章目录Tube Convolutional Neural Network (T-CNN) for Action Detection in Videos摘要及贡献相关工作Generalizing R-CNN from 2D to 3D框架结构Tube Proposal Network&#xff08;TPN&#xff…

leetcode刷题之背包问题(01背包)

01 背包 概念&#xff1a;有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]weight[i]weight[i]&#xff0c;得到的价值是value[i]value[i]value[i]。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 方法1&#xff1a;暴力回溯…

综合办公系统(OA+HR+CRM)

综合办公管理系统是集OA办公系统、HR人力资源管理系统和CRM客户关系管理系统于一体的综合系统。 其架构为&#xff1a; 功能介绍 一、OA办公系统 OA办公系统主要包括个人办公、会议室管理、车辆管理、新闻公告、资产管理和文档管理模块 &#xff08;1&#xff09;个人办公 内部…

6年软件测试经历:成长、迷茫、奋斗

前言 测试工作6年&#xff0c;经历过不同产品、共事过不同专业背景、能力的同事&#xff0c;踩过测试各种坑、遇到过各种bug。测试职场生涯积极努力上进业务和技术能力快速进步过、也有努力付出却一无所得过、有对测试生涯前景充满希望认为一片朝气蓬勃过、也有对中年危机思考不…

【笔记】移动端自动化:adb调试工具+appium+UIAutomatorViewer

学习源&#xff1a; https://www.bilibili.com/video/BV11p4y197HQ https://blog.csdn.net/weixin_47498728/category_11818905.html 一、移动端测试环境搭建 学习目标 1.能够搭建java 环境 2.能够搭建android 环境 &#xff08;一&#xff09;整体思路 我们的目标是Andr…

小红书情人节大赏!热门话题各出奇招,看看哪个品牌打动了你?

情人节热度狂飙&#xff0c;实时热度值破万 以爱之名&#xff0c;传递爱意。每年情人节向来是不容错过的热门话题。我们发现&#xff0c;临近情人节&#xff0c;小红书平台的相关内容热度飙升。据千瓜数据关键词热度查询&#xff0c;2月初“情人节”热搜词热度值就已破万。 截止…

1.ORB-SLAM2中的多线程调度解析

目录 0.先修知识 1.ORB - SLAM2中的线程 2.ORBSLAM2中的互斥锁示例 0.先修知识 需要了解C中开辟多线程的方式&#xff0c;了解C中不同锁的使用方法 学习C&#xff1a;C进阶&#xff08;五&#xff09;多线程编程原理及多线程编程方法https://blog.csdn.net/qq_41694024/artic…

Java 网络编程详解

1、什么是网络编程 在网络通信协议下&#xff0c;不同计算机上运行的程序&#xff0c;可以进行数据传输。 应用场景&#xff1a;     1、即时通信 2、网游对战 3、邮件等等 Java中可以使用java.net包下的技术轻松开发出常见的网络应用程序 2、网络编程三要素 2.1 IP地址 要…

HCNP路由交换学习指南丨学习笔记丨07.BGP

07.BGP1. BGP 的基本概念1.1 BGP 对等体关系类型1.2 IBGP 水平分割原则1. BGP 的基本概念 关于 自治系统&#xff08;Autonomous System&#xff0c;AS&#xff09; 的传统定义&#xff1a;由一个单一的机构或组织所管理的一系列 IP 网络及其设备所构成的集合。 自治系统的简单…

jsp羽毛球场馆管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 jsp 羽毛球场馆管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql&#xff0c;…

通达信MACD面积背离指标公式,思路来自于缠论背驰

MACD面积背离指标公式的思路来自于缠论的MACD面积背驰&#xff0c;但是背驰的定义有一些限制条件&#xff0c;编写指标不一定能满足&#xff0c;这里就不纠结了&#xff0c;编写的指标称为MACD面积背离。另外编写这个指标公式需要对缠论有一些了解&#xff0c;如果没有相关基础…