console.log();对于前端开发人员来说再熟悉不过了,他可以输出很多我们想要的信息,但是在控制台的输出不仅仅是只有 console.log();,下面我要给大家分享的就是,控制台不同类型的输出信息,并举例说明常用几种输出类型。

输出类别 描述
console.log(); 输出打印多类型数据
console.assert(); 断言输出,抛出错误提示
console.clear(); 控制台显示的内容将会被一些信息替换
Console.count() 输出 count() 被调用的次数
console.countReset(); 重置计数器(重置 count() 被调用的次数)
console.dir(); 在控制台中显示指定 JavaScript 对象的属性,并通过类似文件树样式的交互列表显示。
console.dirxml(); 显示一个明确的 XML/HTML 元素的包括所有后代元素的交互树。如果无法作为一个 element 被显示,那么会以 JavaScript 对象的形式作为替代。它的输出是一个继承的扩展的节点列表,可以让你看到子节点的内容。
console.error(); 输出错误提示信息
console.group(); 创建一个新的分组。随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用console.groupEnd()之后,当前分组结束。
console.groupCollapsed(); 创建一个新的分组。随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组和 console.group()方法的不同点是,新建的分组默认是折叠的。用户必须点击一个按钮才能将折叠的内容打开
console.groupEnd(); 在 Web 控制台中退出一格缩进 (结束分组).
console.info() 向 web 控制台输出一个通知信息。仅在 Firefox,web 控制台的日志中的项目旁边会显示一个小的‘I‘图标
console.profile(); 开始记录性能描述信息
console.profileEnd() 结束记录性能描述信息
console.table() 按表格打印数据
console.time() 开启一个计时器
console.timeLog(); 输出所用时间
console.timeEnd() 结束计时器,输出所用时间
console.trace() 输出一个堆栈跟踪。
console.warn() 输出警告信息
console.timeStamp() (在 v8.0.0 中添加)方法是“控制台”模块的内置应用程序编程接口,除非在检查器中使用,否则不会显示任何内容。此方法将带有标签“标签”的事件添加到检查器的时间轴面板。
console.debug() 同 console.log();

console.log();
主要将信息输出到控制台,log()中可以放入任何类型的数据;

          console.log("string");console.log(true, false);console.log({ a: 1, b: 2 });console.log(12345);console.log(null);console.log(undefined);console.log([1, 2, { a: 3, b: 4 }]);


console.error();
此方法将错误提示信息,输出到控制台,默认情况下显示红色。

console.error("An error occurred here");


console.warn();
此方法输出提示警告信息,显示为黄色。

  console.warn("An error warning is generated here");


console.clear();
没有参数,直接调用, 用于清空控制台,清空控制台时,如果基于 Chrome 浏览器,将输出文本 “控制台数据已被清除”如图,而在Firefox中,不会返回任何内容。

console.time(“timerName”);
console.timeLog(“timerName”);
console.timeEnd(“timerName”);

无论何时,如果我们需要知道一段程序,或者一个函数的执行所花费的时间,我们可以调用 console.time(“name”) 开始计时器,需要声明一个参数,计时器名字,然后 调用
console.timeLog(“name”),读取执行到此处所花费时间,读取时的参数名必须和开始计时器的参数名一样。调用 console.timeEnd(“timerName”); 结束计时器,同时也能输出时间。

          console.time("timerName");console.timeLog("timerName");console.timeEnd("timerName");


console.table()
这个方法可以允许在控制台中输出表格,输入数据必须是数组或者显示为表格的对象。

 console.table({ a: 1, b: 2, c: 3 });

Console.count()

此方法调用时,会将输出相同数据的次数返回到控制台

          console.count("label");console.count("label");console.count("label");console.count("label");console.count("label");console.count("label");console.count("label");console.count("label");console.count("label");console.count("label");

JavaScript ,控制台 console 多种不同类型输出相关推荐

  1. JavaScript 控制台(console)调试技巧

    一.简单理解 Console是用于显示JS和DOM对象信息的单独窗口.在浏览器中按F12调出的调试窗口中有一个控制台选项或console选项. 二.支持console的浏览器 Chrome和FireF ...

  2. HTML控制台输出console,Javascript的console.log()用法

    把下面代码保存为html文件,然后IE8---F12---脚本---控制台里就会出现有趣的东西,如果是Firefox,安装了FireBug后,则F12--控件台--所有 ,同样可以看到. javasc ...

  3. javascript控制台_超越控制台日志3种在javascript中格式化控制台输出的方法

    javascript控制台 As JavaScript developers, we intuitively use console.log() to debug, print out variabl ...

  4. 如何使用JavaScript控制台:超越console.log()

    by Yash Agrawal 由Yash Agrawal 如何使用JavaScript控制台:超越console.log() (How to use the JavaScript console: ...

  5. javascript控制台输出

    javascript控制台输出,按F12,点击console <script type="text/javascript> console.log("my name i ...

  6. 在MFC,Win32程序中向控制台(Console)窗口输出调试信息

    在MFC程序中输出调试信息的方法有两种,一种是使用TRACE宏,可以向Output窗口输出调试信息:另一种是用MessageBox,弹出消息框来输出调试信息,但会影响程序的运行. 其实有一种方法可以更 ...

  7. [转] 初识Firebug(HTML查看和编辑、Javascript控制台、网络状况监视器)

    初识Firebug,转载自:http://www.ooso.net/archives/294 什么是Firebug 从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求.要写出漂亮的H ...

  8. 如何使用JavaScript控制台改进工作流程

    作为Web开发人员,很有必要了解如何调试代码.后台开发我们经常使用外部库来记录日志,并在某些情况下格式化显示日志,前端我们会使用断点和控制台,但是我们浏览器的控制台比我们想象的要强大得多. 当我们考虑 ...

  9. javascript控制台_如何使用JavaScript控制台改善工作流程

    javascript控制台 by Riccardo Canella 里卡多·卡内拉(Riccardo Canella) 如何使用JavaScript控制台改善工作流程 (How you can imp ...

最新文章

  1. 英语发音表及读法_在英语中年月日的读法和写法(附:英美时间表达差异辨析)...
  2. R语言-画edcf图、直方图、正态概率图,计算分位数(任意分位)
  3. 【Python进阶】实战Python图形文件操作基本编程
  4. 《系统集成项目管理工程师》必背100个知识点-28范围管理计划和需求管理计划...
  5. centos7安装docker安装rabbitmq(2021)亲测有效!!!
  6. C#:把dll封入exe中方法
  7. JqGrid常用示例
  8. echarts词云第一次出现不了数据要刷新才能出现_隐秘的角落弹幕分析,制作词云,看看观众们对该剧的评价如何...
  9. 电商系统开发之产品订单分拆设计技术思路
  10. 拉钩网爬取所有python职位信息
  11. Android10手机OTG按钮,我又来了-荣耀10青春版手机OTG功能你会用吗?
  12. 30_Python基础_异常
  13. Android 平台的Python——CLE方案实现(三)
  14. 2020年有寓意的领证日期_2020年领证日期怎么选
  15. 看《梦华录》上头的人都该尝试下这款抖音特效
  16. SpellGCN:将语音学和视觉相似性结合到汉语拼写检查的语言模型
  17. iOS开发适配iPhone X 齐刘海处理,代码适配iPhoneX
  18. 【网络协议】转载:关于TCP与UDP的接收recv和recvfrom
  19. 基于Android的租车app
  20. 机械键盘到底茶轴好还是黑轴好呢?第一次用,需要注意什么?

热门文章

  1. GITLAB JENKINS代码自动部署
  2. 网络编程 -- 基础知识 流(输入流,输出流)
  3. Android设置锁屏/休眠时长
  4. CCF NOI1005. 存款收益 (C++)
  5. 安卓浮动时间v3.0.3 抢购秒杀必备APP
  6. js 延期执行_JS延迟加载(setTimeout) JS最后加载
  7. JavaScript算法之指针思想
  8. man LVCREATE
  9. 【Web3】认识以太坊钱包
  10. 关于虚拟机(centos7)没有ens33 ip地址的解决方法(已解决)