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

出处:https://www.cnblogs.com/justany/p/3429097.html

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

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

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

  2. javascript 调试 & console.table()

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

  3. 读javascript高级程序设计08-引用类型之Global、Math、String

    一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encod ...

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

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

  5. JavaScript常见调试方法

    编辑导语:javascript调试方法,常见使用alert和console来定位出错和输出的结果是否是想要的,在chrome中,还可以使用断点来看运行的情况等,本文介绍了比较全面的调试方法,你知道co ...

  6. js调试console.log使用总结图解

    一 实例 打印字符串和对象: 可展开对象查看内部情况: 看一下console对象本身的定义情况: 输出对象情况: utag对象所在文件: 输出对象: 二 Console.log 总结 1   如果你j ...

  7. 【调试】js调试console.log使用总结图解(重要)

    0.介绍 先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息: 今天要给大家介绍的就是是Web前端调试工具中的Console面板,应该说只要是个浏览器就会 ...

  8. 带你重拾JavaScript(2)之console的你所不知道的功能

    JavaScript最常用的调试工具就是console.info()了.console是浏览器中window对象的属性之一,由浏览器对象模型(BOM)提供,作用是访问浏览器控制台,你可以通过conso ...

  9. 读书笔记(02) - 可维护性 - JavaScript高级程序设计

    编写可维护性代码 可维护的代码遵循原则: 可理解性 (方便他人理解) 直观性 (一眼明了) 可适应性 (数据变化无需重写方法) 可扩展性 (应对未来需求扩展,要求较高) 可调试性 (错误处理方便定位) ...

随机推荐

  1. 依赖倒置(DIP)、控制反转(IOC)和依赖注入(DI)

    原文: https://blog.csdn.net/briblue/article/details/75093382 写这篇文章的原因是这两天在编写关于 Dagger2 主题的博文时,花了大量的精力来 ...

  2. Java线程的三种方式

    创建线程有三种方式: 1.继承Thread类 2.实现Runnable接口 3.使用Callable和Future创建线程 三种方式详解如下: ---------------------------- ...

  3. Java垃圾回收理解

    gc是垃圾回收,Java的垃圾回收分为年轻代回收和老年代回收,其中年轻代回收速度快,频率高,因为Java对象大多具有朝生夕灭的特性,Java对象都是new出来的,当new出很多对象的时候,年轻代很容易 ...

  4. java 设计模式参考资料

    参考博客 http://www.cnblogs.com/lin3615/p/3783272.html 设计模式之责任链模式http://www.cnblogs.com/draem0507/p/3784 ...

  5. get 和post 请求的写法

    get请求 import requests base_url = 'http://httpbin.org' # 定义请求所需的参数,参数之间以英文逗号隔开 param_data = {'} # 发送G ...

  6. synchronized(八)

    package com.bjsxt.base.sync006;/** * 同一对象属性的修改不会影响锁的情况 * @author alienware * */public class ModifyLo ...

  7. 判断input checkbox选中

    $("#chexk").get(0).checked $("#chexk").is(':checked')

  8. 记第二届CCPC全国女生赛参赛体验

    离比赛时间已经有点久了,今天整理博客看到“”参赛体会“”这一分类,觉得记录一下也好 流水账记一下感受 因为题目我已经忘记了.. 第一次..那么久..大概有三个多小时在金牌区吧.. 然后就是一无所出了. ...

  9. vue mapbox 地图 demo

    执行以下命令: npm install --save mapbox-gl// cnpm install --save mapbox-gl <template> <div style= ...

  10. 【Python】unittest-5

    #练习9: import unittest from selenium import webdriver import time class GloryRoad(unittest.TestCase): ...