Blackbing Playground

Javascript Debug

發表於 |


  1. 工具

    1. firefox:

      1. firebug：强大的debug工具，有名到不需要再做任何介紹了吧！

      2. Leak Monitor：監視firefox 下Memory Leak的工具。

      3. JSView：檢視外部參考的JS和CSS原始碼，動態引入的檔案也會出現。

      4. Clear Cache Button：清除緩存按鈕，開發中有時會被browser快取，每次都要點來點去清cache很麻煩，用這個小按鈕直接清cache就行了。

      5. YSlow：網站效能測試工具，主要是提出了網頁效能的測試標準，並以此標準來評分，在開發網站時可以作為效能參考的依據。

      6. HTML VALIDATOR ：檢測HTML/XHTML的工具，檢查HTML是否有錯誤，例如有標籤沒有正常閉合之類。


    2. IE:

      1. firebuglite ：要在firefox以外的瀏覽器使用firebug就是這個了！

      2. IEDevToolBar ：微軟官方出的小工具，可以觀察DOM、CSS等頁面元素，缺點是無法像firebug即時修改。

      3. Script Debugger ：微軟官方出的小工具，在IE上遇到javascript的錯誤相當難debug，此時可以利用這個工具來幫助偵錯，安裝之後需要到工具>選項>進階，將「停用指令碼除錯」取消。

      4. debugBar：類似IEDevToolBar，不過內建一些檢色器之類的小工具，對設計人員來說蠻方便的，推薦安裝。

      5. Drip：偵測IE中Memory Leak的軟體。

      6. IETester：可以同時在windowsXP上開啟IE8 beta 2, IE7 IE 6 and IE5.5，你不用再裝好幾個IE了。

      7. Companion.JS：類似firebug console的工具，主要是可以利用他來做javascript的偵錯，也支援像firebug的console.log。

      8. fiddler：可以擷取所有 HTTP 的封包，點此、還有這、有中文的詳細介紹。


    3. Opera:

      1. Web Developer Toolbar and Menu：Opera 是個很特別的瀏覽器，他可以運作在很多意想不到的平台上並且相當流暢，例如wii、window mobile等各種不同裝置上，雖然一般PC的市占率不高，但他的重要性仍然不容小覷。此工具有很多特異功能，例如模擬手持、投影、和電視等設備。但一般 在觀察當前頁面DOM元素等常用的功能稍嫌不足。

      2. Web Accessibility Toolbar：這個工具就相當於firefox裡頭的firebug了。


    4. Safari：

      1. Debug Mode on Safari4：safari4問世之後，由於他神速的運行javascript而獲得廣大的迴響，而safari4也內建開發人員工具，但是要啟用，啟用方法請參考：Enable Debug Mode on Safari (Windows) + Error



  2. 你真的會用firebug？

    1. console：主控台可以顯示所有進行的post、get請求，可以查看每一個請求的header、參數、response。


      1. console.log：請別再用alert來debug了。透過console.log可以查看物件「脫光」物件的所有屬性或方法。

      2. 勘查：主控台的一個特異功能，若你發現頁面運行的速度或效能很差，你可以打開「勘查」來勘查所有被呼叫運行的function有哪些，並且會列出某個function被呼叫幾次、時間、等等。在觀察效能時非常有用。


    2. HTML：firebug 超好用的其中一點就在於他這個所見即所得真是做的完美無缺，你可以直接查看當前文檔的css、也可以直接編輯，所見即所得，更可以編輯、刪除任意元素，或 者直接查看某元素的DOM物件。而且CSS被覆蓋的順序也會一層層被列出，在觀察CSS style時絕對是不可或缺的工具。

    3. CSS：列出所有目前正在運行的CSS。

    4. script：列出所有目前正在運行的javascript。

      1. 就算script被壓縮、編碼過，client端終究得解譯回來，通常編譯過之後的程式都需要透過eval來解譯回來，透過script工具便可以知道被eval起來的函數如何被解譯，編碼過後的程式完全一目了然。

      2. 監看表達式可以查出某個被運行的function被執行，並且可以設定中斷點來逐步檢查，並查看stack。


    5. DOM：查看任意元素、物件內的所有成員屬性。

    6. NET：所有任何http協定的東西都會列在NET裡頭，你可以透過tab來切換欲觀察的傳輸。其中XHR就是查看透過ajax請求的數據資料。


  3. 理解arguments.callee

    1. arguments.callee指向參數的function。

    2. arguments.callee.caller指向被誰呼叫，在不知道某function被誰呼叫而引發錯誤時可以用來查出被誰調用而導致錯誤產生。