原文:http://www.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable

本文只是简单翻译,部分不重要部分略去,请原谅。

通过console.log()打印数组

试想一下,假如你创建了一个编程语言以及其文件后缀名列表:

var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
]; console.log(languages);

console.log()会显示如下信息:

该树视图对于调试是非常有用的,但我们不得不手动打开每个折叠的对象来查看,比较麻烦。我们可以使用console.table()得到更好的体验。

通过console.table()打印数组

现在我们使用console.table()进行打印。

console.table(languages);

你可以看到如下表格:

整齐漂亮,不是么?

当然表单最适合表单数据呈现。如果每个对象都拥有不同的结构,那么最后会发现有很多单元是undefined。尽管如此,属性值都是整齐排列的,并给你很好的概述。

通过console.table()打印对象

实际上console.table()还可以打印对象:

var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
}; console.table(languages);

过滤显示的属性

如果你想限定每一列是特定的属性,你还可以将他们的键作为一个数组,传给console.table(),作为其第二个参数:

// Multiple property keys
console.table(languages, ["name", "paradigm"]);

如果只是想显示一个属性,则传字符串就足够了:

// A single property key
console.table(languages, "name");

出处:https://www.cnblogs.com/justany/p/3429097.html

Javascript高级调试——console.table()的更多相关文章

  1. 高级Javascript调试——console.table()

    原文:http://www.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable 本文只是简单翻译,部 ...

  2. javascript 调试 & console.table()

    通过console.table()打印数组.对象 一般我们都是通过console.log()打印数组或对象,但console.table()打印数组.对象更直观: console.table(empi ...

  3. 读javascript高级程序设计08-引用类型之Global、Math、String

    一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encod ...

  4. javascript 调试 使用console.table()

    或许你已经习惯了console.log()来调试js,非常使用,但是今天微博看到console.table()调试javascript,和console.log()类似,主要区别在于: 主要用来输出对 ...

  5. JavaScript常见调试方法

    编辑导语:javascript调试方法,常见使用alert和console来定位出错和输出的结果是否是想要的,在chrome中,还可以使用断点来看运行的情况等,本文介绍了比较全面的调试方法,你知道co ...

  6. js调试console.log使用总结图解

    一 实例 打印字符串和对象: 可展开对象查看内部情况: 看一下console对象本身的定义情况: 输出对象情况: utag对象所在文件: 输出对象: 二 Console.log 总结 1   如果你j ...

  7. 【调试】js调试console.log使用总结图解(重要)

    0.介绍 先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息: 今天要给大家介绍的就是是Web前端调试工具中的Console面板,应该说只要是个浏览器就会 ...

  8. 带你重拾JavaScript(2)之console的你所不知道的功能

    JavaScript最常用的调试工具就是console.info()了.console是浏览器中window对象的属性之一,由浏览器对象模型(BOM)提供,作用是访问浏览器控制台,你可以通过conso ...

  9. 读书笔记(02) - 可维护性 - JavaScript高级程序设计

    编写可维护性代码 可维护的代码遵循原则: 可理解性 (方便他人理解) 直观性 (一眼明了) 可适应性 (数据变化无需重写方法) 可扩展性 (应对未来需求扩展,要求较高) 可调试性 (错误处理方便定位) ...

随机推荐

  1. windows消息传送(自定义消息和WM_COPYDATA)

    通过SendMessge实现的进程间通信. 0x01 自定义消息 1,WINDOWS中自定义消息的定义和使用: (1)在WNDOWS中消息分系统消息和自定义消息.系统消息定义从0到0x3FF,使用0x ...

  2. CentOS7调整home盘空间到根目录

    1:解除挂载 umount /home 如报错: [root@zabbix-hk-01 home]# umount /home umount: /home:目标忙. (有些情况下通过 lsof(8) ...

  3. Linux文件系统命令 cat

    命令名:cat 功能:在当前窗口中查看制定位置的文件的内容. eg: renjg@renjg-HP-Compaq-Pro--MT:~/test$ cat /etc/apache2/ports.conf ...

  4. django面试大全

    1.Django请求的生命周期 a. wsgi, 创建socket服务端,用于接收用户请求并对请求进行初次封装. b. 中间件,对所有请求到来之前,响应之前定制一些操作. c. 路由匹配,在url和视 ...

  5. 使用Chrome调试工具抢阿里云免费套餐

    活动地址如下: https://free.aliyun.com/ntms/free/experience/getTrial.html 首先打开地址,需要登录,登陆后看到如下页面: 选择个人免费套餐,这 ...

  6. 常见Web应用程序漏洞

    不完善的身份验证措施 .这类漏洞包括应用程序登录机制中的各种缺陷,可能会使攻击者破解保密性不强的密码.发动蛮力攻击或完全避开登录. 不完善的访问控制措施.这一问题涉及的情况包括:应用程序无法为数据和功 ...

  7. [LeetCode&Python] Problem 696. Count Binary Substrings

    Give a string s, count the number of non-empty (contiguous) substrings that have the same number of ...

  8. Sublime Text 3(中文)在Windows下的配置、安装、运行

    Sublime Text 3(中文)下载.安装.运行! 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 具体 ...

  9. ORB(oriented FAST and rotated BRIEF)特征提取与检测

    ORB采取FAST算法检测特征点,采取BRIEF算法计算特征点描述子. 1.检测特征点 检测候选特征点周围一圈的像素值,若有足够多的像素值与候选特征点的差异都较大,则认为该候选特征点是特征点. 对于上 ...

  10. HDU 1260:Tickets(DP)

    Tickets Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...