用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 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
js闭包的用途详解
Nov 09 Javascript
js表头排序实现方法
Jan 16 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
详解Vue单元测试case写法
May 24 Javascript
浅析node.js的模块加载机制
May 25 Javascript
node+vue实现文件上传功能
May 28 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
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
用PHP将数据导入到Foxmail
2006/10/09 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
php调用C代码的实现方法
2014/03/11 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
javascript的函数
2007/01/31 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
用python做游戏的细节详解
2019/06/25 Python
基于python代码批量处理图片resize
2020/06/04 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
班主任先进事迹材料
2014/12/17 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书