原文: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");

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

  1. javascript 调试 & console.table()

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

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

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

  3. javascript调试 console

    Console命令详解,让调试js代码变得更简单   Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上手.我曾经翻译过一篇<Firebug入门指南>,介绍了一些 ...

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

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

  5. Javascript调试利器console的使用

    一.Console API Console.assert() 判断第一个参数是否为真,false的话抛出异常并且在console输出相应信息. Console.count() 以参数为标识记录调用的次 ...

  6. JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻 ...

  7. 9 个让 JavaScript 调试更简单的 Console 命令

    一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> < ...

  8. JavaScript 调试小技巧

    'debugger;' 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...

  9. 【转】HTML, CSS和Javascript调试入门

    转 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html HTML, CSS和Javascript调试入门 本文介绍一些入 ...

随机推荐

  1. PHP面向对象学习一

    1. 抽象性 ,  2. 封装性 ,3.共享性 ,4. 强调对象结构而不是程序结构 面向对象的三大特点(封装,继承,多态)缺一不可 class MyPc{ ———创建一个名为 MyPc的类,class ...

  2. [LintCode] Coins in a Line 一条线上的硬币

    There are n coins in a line. Two players take turns to take one or two coins from right side until t ...

  3. [CareerCup] 18.11 Maximum Subsquare 最大子方形

    18.11 Imagine you have a square matrix, where each cell (pixel) is either black or white. Design an ...

  4. 常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)

      来自:http://www.xueit.com/js/show-6015-1.aspx 本文列出jquery一些应用小技巧,比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器. ...

  5. 安装redis,执行make test时遇到You need tcl 8.5 or newer in order to run the Redis test

    安装他yum install tcl

  6. centos6 搭建ELK

    mark一下时间:2016年2月19日10:17:09 记录使用 Logstash: Logstash服务的组件,用于处理传入的日志. Elasticsearch: 存储所有日志 Kibana 4: ...

  7. LaTex 文本排版

    一.对齐段落 \\ or \newline 另起一行,而不是另起一段 \\* 在强制断行后,还禁止分页 \newpage 另起一页 \linebreak[n] \nolinebreak[n] \pag ...

  8. 新功能WBS

    项目名:连连看 组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git. ...

  9. Linux 安装pip

    参考:为Linux 系统安装pip pip: "A tool for installing and managing Python packages.",也就是说pip是pytho ...

  10. 关于怎样解决eclipse打开时出现的Failed to load the JNIshared library亲测有效

    之前一直可以正常使用eclipse但是当我装了Oracle后打开后就出现了Failed to load the JNIshared library(下面还出现了一个jvm.dll的文件路径),当时就蒙 ...