高级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调试入门 本文介绍一些入 ...
随机推荐
- 【POJ】3678 Katu Puzzle
http://poj.org/problem?id=3678 题意:很幼稚的题目直接看英文题面= = #include <cstdio> #include <cstring> ...
- Codeforces Beta Round #2
A题,神题意题.. #include <iostream> #include <cstdio> #include <cstring> #include <st ...
- C#图片处理---基础
简单的图片剪裁 using System; using System.Drawing; using System.Drawing.Drawing2D; using System.IO; namespa ...
- 深入浅出 - Android系统移植与平台开发(九)- JNI介绍
作者:唐老师,华清远见嵌入式学院讲师. JNI是在学习Android HAL时必须要面临一个知识点,如果你不了解它的机制,不了解它的使用方式,你会被本地代码绕的晕头转向,JNI作为一个中间语言的翻译官 ...
- SQL Server 父子迭代查询语句,树状查询(转)
-- Get childs by parent id WITH Tree AS ( SELECT Id,ParentId FROM dbo.Node P WHERE P.Id = -- parent ...
- Java横向、纵向合并图片
进行图片对比时候想把两张有差异的图片放到一起,方便人工查看下,在网上搜了一些,有纵向合并的. 将纵向合并的自己调整了下,源码如下: import java.io.File; import java.a ...
- nginx资源定向 css js路径问题
今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来.#user ...
- 关于 微软必应词典客户端(pc) 的案例分析
第一部分 调研,评测 ●评测 bug one 在词典界面中搜完单词后,将鼠标移到英文例句上的单词时,会显示对应的中文翻译,而当移到短语时则不对应中文翻译. bug two 用orc强力取词,查询如上图 ...
- PS教程1000例
http://www.missyuan.com/thread-446934-1-1.html Photoshop绘制逼真头发发丝效果http://www.missyuan.com/thread-446 ...
- android几个实用的判定代码
之前项目有几个判定代码很实用,特此做一个整理. 一.验证手机格式是否正确 //判断手机号码是否合理 private boolean judgePhoneNums(String phoneNums) { ...