用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 相关文章推荐
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
js常用DOM方法详解
Feb 04 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 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在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
python client使用http post 到server端的代码
2013/02/10 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python实现分数序列求和
2020/02/25 Python
Python实现验证码识别
2020/06/15 Python
Python with语句用法原理详解
2020/07/03 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
椰子猫砂:CatSpot
2018/08/27 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
上班早退检讨书
2014/01/09 职场文书
个人贷款担保书
2014/04/01 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书