原文: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. Codeforces Beta Round #8

    A题,小小的模拟题,没看懂题意啊. #include <iostream> #include <cstdio> #include <cmath> #include ...

  2. UVA 11461 - Square Numbers(水题)

    题目链接 #include <cstdio> #include <cstring> #include <string> #include <cmath> ...

  3. 【BZOJ1179】 [Apio2009]Atm tarjan缩点+SPFA

    Description Input 第一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的两个整数表示第i条道路的起点和终点的路口 ...

  4. 用GruntJS合并、压缩CSS资源文件

    合并.压缩CSS资源文件用到了grunt-contrib-concat.grunt-css插件,自己npm就可以了,下面直接呈上package.json.Gruntfile.js代码 package. ...

  5. Oracle 客户端免安装数据库连接

    PLSQL Developer 连接数据库需要安装Oracle客户端,在这里介绍一种Oracle客户端解压式安装,而不是exe安装. 安装步骤: 1:确定客户端安装所在主机的系统位数 2:选择正确的客 ...

  6. 实现AJAX的基本步骤 。。转

    要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法. ...

  7. 模拟ATM机银行系统

    淄博汉企Java基础考核项目 模拟银行自助终端系统 一. 本系统模拟银行用户使用ATM机开户.查询.存款.取款功能,要求使用java语言编程实现. 说明: 1. 对于数据输入异常,可使用java异常处 ...

  8. Centos Odoo Service Config

    #!/bin/sh ### BEGIN INIT INFO # Provides: openerp-server # Required-Start: $remote_fs $syslog # Requ ...

  9. set的用法

    set提供一个不重复元素的集合,一般不能直接修改元素.因为这样可能会造成重复元素因此必须删除旧元素,再插入新元素.看下面程序:分析每句的功能.#include<set>#include&l ...

  10. 需要注意学习.net过程的要点

    基础部分 C# 基础语法 OOP的概念,面向对象的理解 继承 封装 多态 ASP.NET MVC (Web Form 用的越来越少,如果你不熟悉,可以不看) JavaScript 基础语法 如何在HT ...