TypeScript 之 console的使用

news2024/11/28 10:56:05

语言: TypeScript

在线工具: PlayGround


console


console 对象是一个非常强大的控制台日志显示工具, 可以帮助我们在浏览器中调试代码。

注: console不属于TypeScript的语法,而是由JavaScript封装的内置对象。

简单的示例:

let array = [1, 2, 3, 4, 5];
console.log(array.toString());      // "1,2,3,4,5" 
console.log("hello", "TypeScript"); // "hello",  "TypeScript" 

提供的接口有:

接口说明
assert()断言,如果断言为false,则将信息写入控制台
clear()清空控制台,并输出 Console was cleared
count()以参数为标识记录调用的次数,调用时在控制台打印标识以及调用次数
countReset()重置指定标签的计数器值
debug()在控制台打印一条 debug 级别的消息
dir()显示一个由特定的 Javascript 对象列表组成的可交互列表
dirxml()打印 XML/HTML 元素表示的指定对象,否则显示 JavaScript 对象视图
error()打印一条错误信息
group()创建一个新的内联分组, 后续所有打印内容将会以子层级的形式展示
groupCollapsed()创建一个新的内联分组,同group类似,但它打印出来的内容默认是折叠的
groupEnd()关闭内联分组,与groupgroupCollapsed配合使用
info()打印资讯类说明信息
log()打印内容的通用方法
table()将列表型的数据打印成表格
time()启动一个以入参作为特定名称的定时器
timeEnd()结束特定的定时器并以毫秒打印其从开始到结束所用的时间
timeLog()打印特定定时器所运行的时间
timeStamp()添加一个标记到浏览器的 Timeline 或 Waterfall 工具
trace()输出堆栈信息
warn()输出警告消息到控制台

注: 更多内容可参考: Console API


示例


在项目中为标明不同类型信息的重要程度,主要调用的几个接口:

  • info()/log() 输出日志,灰色或黑色显示,用于表示正在进行的操作
  • debug() 测试日志,黑色显示,用于表示做的测试操作
  • warn() 警告日志,黄色显示,表示开发者最好处理,但不处理也不会影响运行
  • error() 错误日志,红色显示,表示开发者必须解决该问题

文字不同颜色的显示,主要得益于console 对象支持使用%c为内容定义样式,示例:

console.info("%cThis is info message", "color:gray;");
console.log("%cThis is log message", "color:block;");
console.debug("%cThis is debug message", "color:green;");
console.warn("%cThis is warn message", "color:yellow;");
console.error("%cThis is error message", "color:red;");

请添加图片描述

其他的一些示例如下:

  • assert 断言,如果条件为false, 则输出日志
let obj = null;
console.assert(obj, "Error: obj is null");
// Error: obj is null
  • count()/countReset() 输出调用的次数或重置
function log() {
    console.count("count");
}
log();
log();
console.countReset("count");
log();

// count: 1
// count: 2
// count: 1
  • dir() 用于输出JavaScript对象表
    请添加图片描述

  • **time()/timeLog()/timeEnd()**记录某一个操作的运行毫秒

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");
  • table() 将数据以表格的形式显示

请添加图片描述

待定…

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

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

相关文章

Ubuntu下安装SDL

源码下载地址(SDL version 2.0.14):https://www.libsdl.org/release/SDL2-2.0.14.tar.gz 将源码包拷贝到系统里 使用命令解压 tar -zxvf SDL2-2.0.14.tar.gz 解压得到文件夹 SDL2-2.0.14 进入文件夹 执行命令 ./configure 执行命令 make…

原来JMeter 结果处理常见问题这么简单,可惜没早点看到!

1. 前言 工作中用 jmeter 请求一个接口对谈得上会 jmeter 的人似乎都是可以做出来的,但是实际难点是参数化,结果的断言,结果的汇总等。本文将针对结果过滤有效性的情况展开分析。 示例场景:一个接口需要对入参1000多个数据做测试…

【亲测有效】支持横竖屏 微信小程序video禁止进度条拖动,微信小程序遮罩进度条,

背景&#xff1a;部分课程禁止客户拖动视频进度条直至播放结束 红色是遮罩区域遮罩区域 实际遮罩效果&#xff08;有一个很浅的阴影区域&#xff09; 实现代码 .wxml文件 <video enable-progress-gesture"false" ><cover-view class"cover">…

FPGA设计时序约束十一、others类约束之Set_Maximum_Time_Borrow

目录 一、序言 二、Set Maximum Time Borrow 2.1 基本概念 2.2 设置界面 2.3 命令语法 2.4 命令示例 三、参考资料 一、序言 在Vivado的时序约束窗口中&#xff0c;存在一类特殊的约束&#xff0c;划分在others目录下&#xff0c;可用于设置忽略或修改默认的时序路径分析…

TwoNav导航网站源码 开源的书签(导航)管理程序

源码介绍 TwoNav是一款开源的书签&#xff08;导航&#xff09;管理程序&#xff0c;拥有简洁的界面、简单的安装和便利的使用体验。其基础功能免费&#xff0c;能够有效帮助用户集中管理浏览器书签&#xff0c;并解决了跨设备、跨平台和跨浏览器之间同步和访问困难的问题&…

Photoshop Circular Text

Ctrl N 新增 现学现卖

2023-12-09 LeetCode每日一题(下一个更大的数值平衡数)

2023-12-09每日一题 一、题目编号 2048. 下一个更大的数值平衡数二、题目链接 点击跳转到题目位置 三、题目描述 如果整数 x 满足&#xff1a;对于每个数位 d &#xff0c;这个数位 恰好 在 x 中出现 d 次。那么整数 x 就是一个 数值平衡数 。 给你一个整数 n &#xff0…

设计模式再探——装饰模式

目录 一、背景介绍二、思路&方案三、过程1.装饰模式简介2.装饰模式的类图3.装饰模式代码4.装饰模式&#xff0c;职责父类拆分的奥义5.装饰模式&#xff0c;部件抽象类的无中生有 四、总结五、升华 一、背景介绍 最近公司在做架构模型的时候&#xff0c;涉及到装饰模式的研…

JVM虚拟机:命令行查看JVM垃圾回收器的执行信息

在eclipse中打开命令行窗口 window->show view->Terminal 这样就打开了Terminal窗口&#xff0c;效果如下所示&#xff1a; java -XX:PrintCommandLineFlags -version 这个命令可以查看一些配置信息&#xff0c;其中最重要的配置信息就是&#xff0c;当前使用的G1回收器…

【动态规划】斐波那契数列模型_解码方法_C++(medium)

题目链接&#xff1a;leetcode解码方法 目录 题目解析&#xff1a; 算法原理 1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 5.返回值 编写代码 题目解析&#xff1a; 题目让我们求解码 方法的 总数 由题可得&#xff1a; 0和有前导0&#xff08;比如06、08、04&am…

玄子Share-CSS3 弹性布局知识手册

玄子Share-CSS3 弹性布局知识手册 Flexbox Layout&#xff08;弹性盒布局&#xff09;是一种在 CSS 中用于设计复杂布局结构的模型。它提供了更加高效、简便的方式来对容器内的子元素进行排列、对齐和分布 主轴和交叉轴 使用弹性布局&#xff0c;最重要的一个概念就是主轴与…

JMS(Java Message Service)使用指南

介绍 JMS即Java消息服务&#xff08;Java Message Service&#xff09;应用程序接口&#xff0c;是一个Java平台中关于面向消息中间件&#xff08;MOM&#xff09;的API&#xff0c;用于在两个应用程序之间&#xff0c;或分布式系统中发送消息&#xff0c;进行异步通信。它是一…

Linux6-配置网络、源码包的编译和安装

配置 linux 网络 配置主机名 修改/etc/hostname 配置文件&#xff0c;永久配置主机名 [rootlocalhost ~]# vim /etc/hostname svr7.tedu.cn [rootlocalhost ~]# cat /etc/hostname svr7.tedu.cn [rootlocalhost ~]# reboot #重启生效命令行永久修改主机名 [rootlocalhost ~…

四. 基于环视Camera的BEV感知算法-DETR3D

目录 前言0. 简述1. 算法动机&开创性思路2. 主体结构3. 损失函数4. 性能对比总结下载链接参考 前言 自动驾驶之心推出的《国内首个BVE感知全栈系列学习教程》&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考 本次课程我们来学习下课程第四章——基于环视Cam…

MySQL- in(集合) 和 not in(...) 的使用和练习

1. 基础用法 mysql中in常用于where表达式中&#xff0c;其作用是查询某个范围内的数据。 select * from where field in (value1,value2,value3,…) 当 IN 前面加上 NOT 运算符时&#xff0c;表示与 IN 相反的意思&#xff0c;即不在这些列表项内选择 select * from where …

dlib是什么?

dlib C Libraryhttp://dlib.net/ dlib是什么&#xff1f; Dlib is a modern C toolkit containing machine learning algorithms and tools for creating complex software in C to solve real world problems. It is used in both industry and academia in a wide range of…

若依vue-新建目录及菜单

前面我们把标题和logo换成了自己系统的标题和logo了 接下来就是要建立自己需要的菜单和页面 新建目录解析 在拉下来的代码跑起来后 有一个系统菜单--菜单管理(如图) 在这个菜单的这个页面内有对应的操作功能 修改功能 这个功能可以修改写好了的菜单数据 例如:名称/排序/路由…

Leetcode—337.打家劫舍III【中等】

2023每日刷题&#xff08;五十二&#xff09; Leetcode—337.打家劫舍III 算法思想 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(null…

【Qt开发流程】之容器类2:使用STL风格迭代器进行遍历

概述 对于每个容器类&#xff0c;都有两种stl风格的迭代器类型:一种提供只读访问&#xff0c;另一种提供读写访问。应该尽可能使用只读迭代器&#xff0c;因为它们比读写迭代器快。 STL迭代器的API以数组中的指针为模型。例如&#xff0c;操作符将迭代器推进到下一项&#xf…

Leetcode刷题笔记题解(C++):25. K 个一组翻转链表

思路&#xff1a;利用栈的特性&#xff0c;K个节点压入栈中依次弹出组成新的链表&#xff0c;不够K个节点则保持不变 /*** struct ListNode {* int val;* struct ListNode *next;* ListNode(int x) : val(x), next(nullptr) {}* };*/ #include <stack> class Solution { …