高级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调试入门 本文介绍一些入 ...
随机推荐
- BZOJ 1012 题解
1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec Memory Limit: 162 MBSubmit: 8468 Solved: 3702[Submi ...
- windows开机启动项
原来就一个命令呀:msconfig 1.在开始菜单中输入 msconfig 命令,回车 2.在弹出的对话框中取消不想启动的程序 3.点击应用->确定->不启动
- HighchartsJS创建点状带标识的图表实例
上一篇我发布的是关于 HighchartsJS创建环形带标识的图表实例, 从那篇文章就可以看出 HighchartsJS 确实是一款功能很强大的图表库.利用它,我们可以在项目中创建出我们所需要的图表来 ...
- 兼容所有浏览器的设为首页收藏本站js代码
大家发现传统的收藏本站按钮在360浏览器下面没有效果了,但是360浏览器用户群却非常之大.所以我们在网上找到一个兼容所有浏览器的收藏本站解决方案,具体功能如下: 设为首页 和 收藏本站js代码 兼容I ...
- [LintCode] Wiggle Sort 扭动排序
Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= nums[2] < ...
- Vue.js基本规则提炼总结及计算属性学习
Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...
- sql 数据库 初级 个人学习总结(一)
数据库个人总结(初级)1.增删改查 insert into 表名 values ('条件','条件2') delete from 表名 where 条件 update 表名 set=条件值 where ...
- C++类内存分布
http://www.cnblogs.com/jerry19880126/p/3616999.html#undefined 书上类继承相关章节到这里就结束了,这里不妨说下C++内存分布结构,我们来看看 ...
- Android课程---Android设置透明效果的三种方法(转)
1.使用Android系统自带的透明效果资源 <Button android:background="@android:color/transparent"/> ...
- Algorithm | Tree traversal
There are three types of depth-first traversal: pre-order,in-order, and post-order. For a binary tre ...