调试React状态？console.log就是个弟弟

墨蓝 2022-12-25 07:53 66阅读 0赞

> 本文系翻译，内容有增加，原文见`阅读原文`

作为前端，`console.log`是我们日常调试最常用的方法。

这个方法能在调试面板打印参数的值，方便我们快速调试局部代码。

在`React`中，我们经常用`console.log`打印`state`，来检查他有没有正确的被渲染。

当`state`只包含一两个值时，`console.log`还不错。但是当`state`包含越来越多属性（尤其是在`ClassComponent`），看起来就不太直观了。

# console.table #

`console.table`方法可以直观的将要打印的数据格式化为表格的形式展示。

在`Chrome dev-tools`中，效果如下：

![format_png][]

当传入的第一个参数为`object`类型，会被格式化为表格，其他类型效果与`console.log`一致。

表格的第一列是索引标签，对于`Array`，为索引下标。对于`Object`，为对象的`key`。

同时，当点击列标题时，表格会以标题作为排序依据。

比如，如下代码：![format_png 1][]

点击`index`列后：

![format_png 2][]

PS：在`Firefox`中，`console.table`当前显示行数限制在1000行

# 列 #

`console.table`第二个参数为可选的“列”。默认情况下会显示所有列的数据。

传入可选的“列”后可以只显示你关注的数据，在处理数据结构复杂的大对象时很有帮助。

比如，对于代码：

![format_png 3][]

传入`['c2']`作为“列”参数：

![format_png 4][]

# 打印state #

回到`React`，我们通常将服务端返回的数据保存在`state`中。其中可能包括不需要在组件中使用的冗余数据。

使用“列”参数可以只展示你需要关注的数据。

# 看个例子 #

在如下例子中，`API`返回了用户的`JSON`数据。他们将会被保存在`state`中。

使用`console.table`打印：

![format_png 5][]

接下来如果我们想实现一个过滤“货币类型”为“人民币”的按钮。

const onlyYuanUsers = users.filter( user => user.currency === "Yuan Renminbi")
    console.table(onlyYuanUsers)

这会打印过滤后的数据。

![format_png 6][]

除了我们想检查的`currency`字段，其他字段会干扰我们检查结果的正确性。

这里我们使用“列”参数：

console.table(onlyYuanUsers, ['id', 'currency'])

这下要检查结果的正确性就清晰明了了。

![format_png 7][]

# 兼容性 #

所有现代浏览器都支持`console.table`。

![format_png 8][]

IE不支持（毕竟我说的是现代浏览器）。\[狗头\]

## 关于奇舞周刊 ##

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

![format_png 9][]

[format_png]: /images/20221120/9a8fda279d534bbebfd11cbd6ef6f6f8.png
[format_png 1]: /images/20221120/9c60e3f1dc354e249ed5daa3960e918c.png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9RaWJlZUpDVUQ3U1RXQzUxY2lhQ0dHck1xSm5QNlN3OFM0b3RzQkptSExTR0xiaWFDSmRCeElOZ2lhWGNqTlJPZlRZNnVUSmE3b3Bkdk9RMjAxQjQzNXZYQncvNjQw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9RaWJlZUpDVUQ3U1RXQzUxY2lhQ0dHck1xSm5QNlN3OFM0VEVZaDlxWkg1Njk1ejhvaFluVEw1WnVNaWJmYkt1aWFxR3A4czVSanJyRHpVd2NXUHp6eGVLRncvNjQw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9RaWJlZUpDVUQ3U1RXQzUxY2lhQ0dHck1xSm5QNlN3OFM0aGlhcHBVdUcyanNMZE9pYzY1QWxod25HUHNFTGljMUhhOFRJNGp6ZjBxQTdJSWRlTXFiYlA0aWJaQS82NDA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9RaWJlZUpDVUQ3U1RXQzUxY2lhQ0dHck1xSm5QNlN3OFM0YjVZaWFLN2ljem12MmN0NlQxd3h4dEt4b0g4bWtQbHowVDZLRUNLM05pY1NsblpoRUplN1dlaWFzZy82NDA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9RaWJlZUpDVUQ3U1RXQzUxY2lhQ0dHck1xSm5QNlN3OFM0M045NG9POVRmVThpYmljbDcyMUJ3cm1KSnhpY0VCM2lhakVqUVVISHRrOExYU01oMjhyQVRHS2ljOVEvNjQw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9RaWJlZUpDVUQ3U1RXQzUxY2lhQ0dHck1xSm5QNlN3OFM0MDdRZVZFS0E4QmNEWFc0cjdnVlJNOHNNSlA0cUg3U0dveTRxZVgzWkxXNVFLUWJtdVpsYmtRLzY0MA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9RaWJlZUpDVUQ3U1RXQzUxY2lhQ0dHck1xSm5QNlN3OFM0cVU3TFlpYXdIWVU3WWgxMHFVdjg3WVFqSm1RV3c2aldZbGlhclZvdDgyZ0gxZm1vR1hZb1UzZncvNjQw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9NcEdRVUhpYWliNGliNmo5WDlzMmtpYmZhaWNCTG1JbTZkVUJxeW1WbWlhS3FHRkVQbjBHM1Z5Vm5xUWp2b2duSHE0Y01pYmF5VzI0MDBqNE95RXRkejVma01ibUEvNjQw?x-oss-process=image/format,png