解釋（並超越）神祕的控制檯輸出

提出正確的問題（是的，那個人太愚蠢了，不能發言）有它自己的挑戰。自從開始調情d3.js以來，我似乎並不缺乏這些。這裏有一個雖然對我來說很緊迫，但我已經被警告過，可能過於主觀。有時DOM結構與預期衝突：某些元素可能是兄弟姐妹而不是孩子（可能是一些過濾函數的結果），或者看起來完全缺失（比如說出於某種原因被忽略的元素）。解釋（並超越）神祕的控制檯輸出

在這些情況下，DOM檢查員雖然不一定會產生誤導，但可能會感到沮喪，我們仍然需要使用控制檯和日誌進行故障排除。

然而，有時候，控制檯本身似乎沒有什麼幫助。我正在考慮那些你遇到過一系列括號的情況，這可能是對數據的一種暗示，但是在嘗試訪問數據時卻會產生一系列錯誤信息。

我看到很多偶然的野火，但納悶的是有一個相對全面的指導某處神祕的控制檯輸出的解釋，主題包括：

如何在各種對象類型中表示
什麼方法最適合詢問每個
如何解釋空的，方形，捲曲和其他括號的各種配置
穿透DOM樹的更深區域的策略
輕視改善控制檯代表性和可讀性
解釋陷阱要注意的

高興什麼好的線索.. 感謝

來源

2013-11-24 user1019696

控制檯輸出有什麼神祕的含義？您在理解JavaScript錯誤消息時遇到困難嗎？或者你需要使用'console.log（）'和相關的函數嗎？ –

想象一下svg：g元素的複雜層次結構，受到第n類和其他過濾器函數影響的索引，以及有時嵌套轉換的葉節點數據。我真的不想被誤解，但這裏只是一個例子，一個DOM樹中的svg：g元素。已過濾的選項上的一個健全和填充（靜態svg顯示ok）DOM樹失敗。 'whatever = [object SVGGElement]，[object SVGGElement]' 'whatever.toSource（）= [[{__ data __：[]}]，[{__data __：[]}]，[]，[]]' 當前的控制檯使用技巧讓我無法摸索到自己對DOM樹的葉子部分的探索.. – user1019696

假設您使用的是體面的Web檢查器（例如Safari或Chrome），探索靜態DOM的最簡單方法是右鍵單擊「點擊元素（或關閉的某個地方）並選擇「檢查元素」。您現在不必混淆命令行，而是使用一個活動的DOM樹進行交互式探索。由於我會在很長的網址中遇到註釋字符限制，因此我會繼續回答。 –

一個真正GRAT開始就是按照這些教程和介紹在d3.js： http://alignedleft.com/tutorials/d3

尤其是本節介紹的陣列，它們是如何工作的： http://alignedleft.com/tutorials/d3/data-types

我想這應該是真正有用的，如果你只是用D3開始

來源

2013-11-25 00:33:22 tomtomtom

的東西，可以幫助一些您已經爲D3中提到的情況下，特別是DOM檢查是vida.io（tutorial here）提供。一般來說，沒有回答你的問題 - 所有這一切取決於你正在使用的特定庫，瀏覽器，版本等。

來源

2013-11-25 08:45:20

作爲命令行使用的替代方法（例如console.log()）也許交互式web檢查器會對你更有幫助。 Safari或Chrome的詳細信息。儘管我覺得它不太實用，但如果您更喜歡Firefox，也可以使用Firebug。

來源

2013-11-25 12:36:48

解釋（並超越）神祕的控制檯輸出

回答

相關問題