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

Question

提出正确的问题（是的，那个过于愚蠢而无法说出的问题）有它自己的挑战。自从开始调情d3.js以来，我似乎并不缺乏这些。虽然对我来说非常紧迫，但我已经被警告过，这可能过于主观了。

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

在这些情况下，DOM检查员虽然不一定会产生误导，但却会感到沮丧，我们只能使用控制台和日志进行故障排除。

然而，有时，控制台本身似乎没什么帮助。我想到了那些你遇到一系列括号的情况，可能是数据的暗示，但是 - 试图访问时会出现一系列错误消息。

我看到很多偶然的野火，但是想知道是否有一个或多或少的全面指导解释神秘的控制台输出，涵盖如下主题：

• 如何表示各种对象类型
• 什么方法最适合询问每个
• 如何解释空，方，卷和其他括号的各种配置
• 渗透DOM树更深层区域的策略
• 提高控制台表现力和可读性的一丝不苟
• 解释陷阱需要注意

很高兴有任何好的线索.. 感谢

Answer 1

一个真正的开始是遵循这些教程和d3.js的介绍： http://alignedleft.com/tutorials/d3

特别是本节解释了数组及其工作原理： http://alignedleft.com/tutorials/d3/data-types

我认为如果你刚刚开始使用d3

，这应该会非常有用

Answer 2

对于您提到的D3的某些案例，可能有帮助的是vida.io（tutorial here）提供的DOM检查器。一般来说，你的问题没有答案 - 全部取决于你使用的特定库，浏览器，版本等。

Answer 3

作为命令行使用的替代方法（例如console.log()），交互式Web检查员可能对您更有帮助。 Safari或Chrome的详细信息。虽然我发现它不那么有用，但如果您更喜欢Firefox，还有Firebug。