Javascript Debug

31 八月 2009 @ 9:42 下午

工具
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
你真的會用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請求的數據資料。
理解arguments.callee
1. arguments.callee指向參數的function。
2. arguments.callee.caller指向被誰呼叫，在不知道某function被誰呼叫而引發錯誤時可以用來查出被誰調用而導致錯誤產生。

Posted By: BLACKBING
Last Edit: 31 八月 2009 @ 09:42 下午

Email • Permalink

Categories: Javascript Core, Javascript練功房

Debuggers « Abner’s Postgraduate Days 說道：

五月 7, 2010 at 8:32 上午

[...] Javascript Debug: A summaries of debuggers [...]

日	一	二	三	四	五	六
« 七月				十月 »
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

BLACKBING

Javascript Debug

Responses to this post » (One Total)

About this Post

近期文章

近期迴響

TopPosts

標籤

分類

Disclaimer

About Me

留言板

Album