javascript调试之console.table()的详细内容

来源:网络整理作者:网友投稿发布时间:2020-12-27 14:31

昨天我了解到Chrome调试工具一个小巧的调试方法，在WDCC期间，MarcusRoss（@zahlenhelfer）介绍了，chrome调试工具各种调试...

昨天我了解到Chrome调试工具一个小巧的调试方法，在WDCC期间， Marcus Ross（@zahlenhelfer）介绍了，chrome调试工具各种调试方法，这个只是其中一种，现在我来给大家秀下。

用CONSOLE.LOG()展示数组

想象下你构造了如下数组

var languages = [

{ name: "JavaScript", fileExtension: ".js" },

{ name: "TypeScript", fileExtension: ".ts" },

{ name: "CoffeeScript", fileExtension: ".coffee" }

];console.log(languages);

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

javascript调试之console.table()的详细内容 (https://www.wpmee.com/) javascript教程第1张

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

用CONSOLE.TABLE()展示数组

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

javascript调试之console.table()的详细内容 (https://www.wpmee.com/) javascript教程第2张

非常小巧有木有？

当然，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);

javascript调试之console.table()的详细内容 (https://www.wpmee.com/) javascript教程第3张

妥妥的。

CONSOLE.TABLE() 的过滤功能

如果你想限制console.table()显示某一列，你可以在在参数中传入关键字列表如下：

// Multiple property keys

console.table(languages, ["name", "paradigm"]);

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

// A single property key

console.table(languages, "name");

我曾经以为我已经了解了 Chrome 开发者工具绝大部分的功能，但是现在显然我错了！

相关热词：

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jz/wp/9704.shtml

几个优化WordPress中JavaScript加载	JavaScript实现手写 forEach算法
JavaScript实现放大镜效果代码示	JavaScript console是怎么使用的？
JavaScript ES6 Class类实现原理详解	JS实现前端动态分页码代码实例
闭包有哪些应用场景	Vue中mounted和created的区别（图文
JS中行内style怎么写？	JS定时器如何实现提交成功提示
基于ajax及jQurey实现局部刷新过	js call用法的详细内容
JS中splice()方法是什么？	js获取扫码枪输入数据的方法
聊聊JavaScript人脸识别技术的详	在javascript中，NaN是什么类型