2013年8月9日

FireBug - Command Line API 簡易入門



身為一個初學者,看到別人用firebug的時候,都會有意外的驚喜
例如,你不確定 element 的狀態,經過JS處理過之後,現在到底詳細的內容是啥咪

直接就在Firefox的Console裡面去把他給列出來

以google的頁面為例,直接在在console打入下方的指令,會列出所有該 element 的屬性,
-------------------------------------------------------------
dir(document.getElementById("topstuff"));
-------------------------------------------------------------

dir 是 Command Line API 的指令
document.getElementById("topstuff") 則是去拿頁面上去找特定的element



(身為一個初學者,看到這個方法真的覺有厲害到)


除了 dir 以外,還有其他的API可以用,請參考
另外,在 Mac 可以直接輸入熱鍵 (⌘ + Shift + L),直接focus到command line,更多的熱鍵,請參考


======================
More resources about Firebug
======================

10 Tips to Master the Firebug Console
http://www.jquery4u.com/utilities/firebug-console-tips/

Firebug Document
https://getfirebug.com/wiki/index.php/Main_Page

Firebug CheatSheet
http://www.virusthailab.com/user/download/Cheat-Docs/web-browsers/DZone-Getting-Started-with-Firebug-1.5.pdf