美文网首页
浏览器Console对象部分API使用简述

浏览器Console对象部分API使用简述

作者: PTKGEM | 来源:发表于2017-02-09 17:09 被阅读0次

1.清空控制台

使用console.clear()指令清空你的控制台。

2.控制台输出添加样式

你可以使用%c指令给你的输出指定样式:
console.log('%c Make console greate again!', 'font-size:50px; background:red;')

Paste_Image.png

3.显示表格样式的数据

使用console.table(object),提供一个对象,让它像表格一样显示:

让我们来试试:

persons = [ { name: 'Hien Vuong', city: 'Ho Chi Minh' }, { name: 'Donald Trump', city: 'New York' }]

console.table(persons)
Paste_Image.png

4.分组输出数据

使用console.group(message)和console.groupEnd()指令,用下拉列表的形式分组输出全部日志。

让我们用上面的persons对象试试:
···
persons.forEach(p => {
console.group();
console.log(This is ${p.name});
console.log(He comes from ${p.city});
console.groupEnd();
});
···

Paste_Image.png

相关文章

  • 浏览器Console对象部分API使用简述

    1.清空控制台 使用console.clear()指令清空你的控制台。 2.控制台输出添加样式 你可以使用%c指令...

  • BOM常见的API和造个小轮子

    一. BOM常用的API: BOM:浏览器对象模型, 是操作浏览器的API window.console返回con...

  • chrome console详解

    Console console是浏览器开发者工具自带的API,并不是JavaScript原生对象。 常规 以面板形...

  • 面向对象OOP(Ts)

    操作对象例如 操作浏览器要使用window对象 操作网页要使用document对象 操作控制台要使用console...

  • console

    console Console 对象可以接入浏览器控制台(如:Firefox 的 Web Console)。在不同...

  • console

    原文 Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console )。不同浏览器...

  • 你不知道的浏览器调试技巧(一)

    浏览器调试技巧(一) 1、$0 指代浏览器选中的页面元素节点,配合console.dir 使用可以获取节点对象,具...

  • console 使用详解

    console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console)不同浏览器上它的工作...

  • 基于Zuul实现API Gateway

    本文内容: 简述API Gateway 使用Zuul实现API网关 Zuul的原理 源码及参考资料 简述API G...

  • 5、Selenium -- CSS Selector定位

    一、常用工具 浏览器 Console 查询:$$(' xxxxxx ') javascript 对应 API:fi...

网友评论

      本文标题:浏览器Console对象部分API使用简述

      本文链接:https://www.haomeiwen.com/subject/jxhwittx.html