高级Javascript调试——console.table()
原文: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()的更多相关文章
- javascript 调试 & console.table()
通过console.table()打印数组.对象 一般我们都是通过console.log()打印数组或对象,但console.table()打印数组.对象更直观: console.table(empi ...
- Javascript高级调试——console.table()
原文:http://www.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable 本文只是简单翻译,部 ...
- javascript调试 console
Console命令详解,让调试js代码变得更简单 Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上手.我曾经翻译过一篇<Firebug入门指南>,介绍了一些 ...
- javascript 调试 使用console.table()
或许你已经习惯了console.log()来调试js,非常使用,但是今天微博看到console.table()调试javascript,和console.log()类似,主要区别在于: 主要用来输出对 ...
- Javascript调试利器console的使用
一.Console API Console.assert() 判断第一个参数是否为真,false的话抛出异常并且在console输出相应信息. Console.count() 以参数为标识记录调用的次 ...
- JavaScript调试技巧之console.log()详解
JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻 ...
- 9 个让 JavaScript 调试更简单的 Console 命令
一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> < ...
- JavaScript 调试小技巧
'debugger;' 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...
- 【转】HTML, CSS和Javascript调试入门
转 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html HTML, CSS和Javascript调试入门 本文介绍一些入 ...
随机推荐
- 彻底弄明白之数据结构中的KMP算法
如何加速朴素查找算法? KMP,当然还有其他算法,后续介绍. Knuth–Morris–Pratt string search algorithm Start at LHS of strin ...
- 《少有人走的路:心智成熟的旅程》--[美]M·斯科特·派克
<少有人走的路>,美国作家M·斯科特·派克所著 下面是我的书摘: * 归根到底,它告诉我们怎样找到真正的自我. * 人可以拒绝任何东西,但绝对不可以决绝成熟.决绝成熟,实际上就是在规避问题 ...
- js 图片处理 Jcrop.js API
引入jquery.Jcrop.min.css和jquery.Jcrop.min.js 参数/接口说明 options 参数说明 名称 默认值 说明 allowSelect true 允许新选框 all ...
- Jquery_jquery中attr和prop的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...
- 再说memcache的multiget hole(无底洞)
关键词:multiget hole,memcache 适用于:java,php 基础知识背景: 1)multiget 是什么: multiget 指的是从 memcache(或其他分布式缓存) ...
- uva 1382 - Distant Galaxy
题目连接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=91208#problem/G 题意: 给出平面上的n个点,找出一个矩形,使得边 ...
- Hadoop.2.x_WordCount本地测试示例
代码如下, 后备参考: package com.bigdata.hadoop.hdfs; import java.io.IOException; import org.apache.hadoop.co ...
- HTML DOM随笔
编程接口 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). 属性是您能够获取或设置的值(比如节点的名称或内容). getElemen ...
- unity3d插件Daikon Forge GUI 中文教程2-基础控件Label的使用
我们先来设置 UI Root 中的如下:屏幕大小为1024*768 2.1 新建一个Label 控件 先来看看Control Properties (基本上是所有控件都共用的)的以后不再介绍,参数: ...
- C++ STL
1.stackstack 模板类的定义在<stack>头文件中.stack 模板类需要两个模板参数,一个是元素类型,一个容器类型,但只有元素类型是必要的,在不指定容器类型时,默认的容器类型 ...