Javascript對象的實時可視化工具

Question

與許多人一樣，我的大腦往往適用於閱讀，寫作和創建的視覺（又稱非文本）信息。

什麼是一些工具，以某種方式讓我「可見」目前正在運行的JavaScript環境可視化？

一個明顯的例子是將一個盒子放在屏幕上（或HTML頁面）來表示當前在內存中的每個對象。該框可能包含一個標籤，該標籤是當前綁定到該對象的變量。如果我使用的是pubsub庫，當它表示的對象「獲取」它訂閱的消息時，該對話框可能會瞬間閃現。點擊框可能會給我一個該對象的所有公共方法的列表，如果代碼有方法簽名註釋，我會看到它的參數名稱。

任何與Javascript有點相似的東西，可以在當前正在運行的過程中使用，這是值得歡迎的！另外，它必須是一個javscript庫的形式，我可以使用現有的代碼，但在某些IDE或瀏覽器插件中可以找到此類工具的示例作爲插圖。

Answer 1

雖然它不使用盒子，可能會節省屏幕的房地產，你給螢火蟲一槍？儘管它們不是圖形框，但它使用可擴展/可摺疊的文本元素來幫助可視化應用程序。

並且它不侷限於JS。您可以使用元素選擇器來選擇html元素，並查看您的JS實際上是如何改變DOM的。因此，讓我們來談談焦點問題，您將一些CSS應用於文本框;你可以看到，實時使用Firebug ...

它確實是一個偉大的工具，做ALOT。你可以逐行調試你的JS，把變量放在監視器上（查看它們的所有方法和值，看看它們的值是如何實時改變的，或者在程序運行時自己修改它們），看看html和js是如何閱讀和接近實時的影響......還有一些插件（或者至少曾經是）可以幫助其他語言的調試，具體來說，我記得一個actionscript插件，可以讓我看到FLASH/SWF它們發生的對象以及一個PHP插件。

如果你還沒有嘗試過。你得。

如果你對底層的東西更感興趣，如下面的HTTP調用非常詳細;複製慢速連接;僞裝你的用戶代理（可以從大多數瀏覽器完成，但沒有這個，儘管如此！）然後給Fiddler2一個嘗試...我不經常使用它，但是當我處理難以排除故障的AJAX或http的東西，有很多來回的電話，它一直是一個生活救星。

希望這會有所幫助。