Javascript 解释（并超越）神秘的控制台输出

提出正确的问题（是的，那个愚蠢到说不出的问题）也有它自己的挑战。自从开始与d3.js调情以来，我似乎并不缺少这些。这里有一个，虽然对我来说很紧迫，我已经被警告可能太主观了

有时DOM结构与预期的结构冲突：某些元素可能是兄弟元素而不是子元素（可能是某些筛选函数的结果），或者看起来完全缺失（例如，由于某种原因被忽略的元素）

在这些情况下，DOM检查器虽然不一定具有误导性，但会令人沮丧，我们只能使用控制台和日志进行故障排除

然而，有时候，控制台本身似乎没有什么帮助。我想到了一些例子，在这些例子中，您会遇到一系列括号，可能是数据的提示，但令人沮丧的是，在尝试访问数据时会出现一系列错误消息

我看到了很多偶然的野火，但我想知道是否有一个或多或少全面的指南来解释神秘的控制台输出，包括以下主题：

• 如何表示各种对象类型
• 什么样的方法最适合审问每个人
• 如何解释空括号、方括号、花括号和其他括号的各种配置
• 穿透DOM树更深区域的策略
• 轻描淡写以提高控制台的表现力和可读性
• 需要注意的口译陷阱

很高兴有好的线索。。

---

谢谢

遵循d3.js上的教程和介绍是一个非常好的开始：

本节特别介绍阵列及其工作原理：

---

我认为如果您刚开始使用d3，这应该非常有用。对于您提到的d3的一些情况，特别是（）提供的DOM检查器可能会有所帮助。但是，一般来说，您的问题没有答案——这取决于您使用的特定库、浏览器、版本等。

作为命令行使用的替代方法（例如，

console.log（）

），交互式web inspector可能对您更有帮助。或的详细信息。虽然我觉得它不太有用，但如果您喜欢Firefox，还有一个问题。

您的控制台输出有什么神秘之处？您在理解Javascript错误消息方面有困难吗？或者您需要使用

console.log（）

和相关函数的帮助吗？想象一下svg:g元素的复杂层次结构，受第n个类型和其他筛选函数影响的索引，以及有时需要嵌套转换的叶节点数据。我真的不想转移话题，但这里只有一个例子，DOM树中的svg:g元素。sane和填充（静态svg显示正常）DOM树上的筛选选择失败

whatever=[object svggement]，[object svggement]

当前的控制台使用技巧让我无法探索DOM树中更叶的部分。假设你使用的是一个像样的web检查器（例如Safari或Chrome），探索静态DOM的最简单方法是右键单击元素（或附近的某个位置）并选择“Inspect element”。您现在有了一个可交互浏览的动态DOM树，而不是与命令行发生冲突。由于我会遇到长URL的评论字符限制，我将继续回答。好吧，承认，屏幕上有数千个对象，我一直避免使用Safari和Chrome，因为它们需要花费数小时才能加载。Firefox从一开始就更加宽容，只需一两秒钟即可加载。我还没有分析瓶颈，但现在正在严格清理代码，希望能在Chrome和Safari中看到一些快速的胜利。接下来，我可以试试下面的一些建议。如果你的电脑需要几个小时才能加载Chrome，那么你的电脑就出问题了。如果你的网页在Chrome中加载需要几个小时，那么你的网页就有问题了。我已经用超过25万个数据点构建了d3.js可视化，它们在几秒钟内加载到所有现代（桌面）浏览器中。