用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 相关文章推荐
动态表格Table类的实现
Aug 26 Javascript
jquery 插件学习(一)
Aug 06 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
巧用canvas
Jan 21 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
Ajax基础知识详解
2017/02/17 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python实现队列的方法
2015/05/26 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
工作表现评语
2014/01/19 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL