用console.table()调试javascript


Posted in Javascript onSeptember 04, 2014

用CONSOLE.LOG()展示数组

想象下你构造了如下数组
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];

console.log(languages);

console.log() 会这样展示数组

用console.table()调试javascript

这样的展示形式对于开发很有用,但是我发现这样还要手动去点每个Object有些笨重。这时候我觉得console.table()有点意思。

用CONSOLE.TABLE()展示数组

现在我们用console.table()试试:

用console.table()调试javascript

非常小巧有木有?

当然,console.table()更适合,扁平 列成表格式的数据,展现的更完美,否组你在 如果每个数组元素都是不同结构,你的表格很多格子都是 undefined。

用CONSOLE.TABLE() 展示object

console.table()另一个特性就是展示 object。

var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
};
console.table(languages);

用console.table()调试javascript

妥妥的。

CONSOLE.TABLE() 的过滤功能

如果你想限制console.table()显示某一列, 你可以在在参数中传入关键字列表 如下:
// Multiple property keys
console.table(languages, ["name", "paradigm"]);

如果你想访问一个属性的话,一个参数就够了,

// A single property 
keyconsole.table(languages, "name");

我曾经以为我已经了解了 Chrome 开发者工具绝大部分的功能,但是现在显然我错了, 骚年没事去看看Chrome DevTools文档吧!

Javascript 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
JavaScript 事件的一些重要说明
Oct 25 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
js获取内联样式的方法
Jan 27 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 #Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 #Javascript
jQuery之Deferred对象详解
Sep 04 #Javascript
Javascript Objects详解
Sep 04 #Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 #Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 #Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 #Javascript
You might like
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
B2K与车机的中波PK
2021/03/02 无线电
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
python实现用户登录系统
2016/05/21 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python socket实现简单聊天室
2018/04/01 Python
pytorch之添加BN的实现
2020/01/06 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
个人作风剖析材料
2014/02/02 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
python爬取某网站原图作为壁纸
2021/06/02 Python