原文: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. SpringMVC @RequestParam和@RequestBody的区别

    问题:@Requestbody 用的时候遇到400和415错误,因为请求格式不对. @RequestBody @RequestBody能把简单json结构参数转换成实体类,如下代码: @Request ...

  2. 手打struts知识点

    Struts2概论 1.MVC原理 MVC(Model-View-Controller),程序设计理念 视图不用多说,html.jsp等 控制器,中转站,分配各个组件应当做什么,接受参数并跳转其他处理 ...

  3. Problem A 你会定义类吗?

    Description 定义一个类Demo,有构造函数.析构函数和成员函数show(),其中show()根据样例的格式输出具体属性值.该类只有一个int类型的成员. Input 输入只有一个整数,in ...

  4. shell脚本实例-nginx日志分析

    统计2018/8/6 PV量 grep "06/Aug/2018" access.log|wc -l 统计当天8:00 到9:00的PV awk '$4>="[06 ...

  5. php优秀框架codeigniter学习系列——CI_Utf8类

    CI_Utf8类用来对Utf8编码环境提供支持.(Provides support for UTF-8 environments). 从构造函数看,只有当开启了PCRE模式,加载了iconv或者mbs ...

  6. GIL 相关 和进程池

    #GIL (global interpreter Lock) #全局解释器锁 :锁是为了避免资源竞争造成数据错乱 #当一个py启动后 会先执行主线程中的代码#在以上代码中有启动了子线程 子线程的任务还 ...

  7. 微软Power BI 每月功能更新系列——9月Power BI 新功能学习

    Power BI Desktop 9月新功能摘要 Power BI 9月更新如期而至,这一次Power BI 又推出了新功能——聚合预览,它可在内存中无缝地存储汇总值,大大提高报告的性能.另外本月还包 ...

  8. [转]How rival bots battled their way to poker supremacy

    How rival bots battled their way to poker supremacy http://www.nature.com/news/how-rival-bots-battle ...

  9. WEBBASE篇: 第三篇, CSS知识1

    第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...

  10. python 中os的常用方法

    1.更改当前的路径 import os os.chdir( "D:/java") 注意python中表示文件路径,文件夹之间用/或者\\不能使用\