31 八月 2009 @ 9:42 下午
- 工具
- firefox:
- firebug：强大的debug工具，有名到不需要再做任何介紹了吧！
- Leak Monitor：監視firefox 下Memory Leak的工具。
- JSView：檢視外部參考的JS和CSS原始碼，動態引入的檔案也會出現。
- Clear Cache Button：清除緩存按鈕，開發中有時會被browser快取，每次都要點來點去清cache很麻煩，用這個小按鈕直接清cache就行了。
- YSlow：網站效能測試工具，主要是提出了網頁效能的測試標準，並以此標準來評分，在開發網站時可以作為效能參考的依據。
- HTML VALIDATOR ：檢測HTML/XHTML的工具，檢查HTML是否有錯誤，例如有標籤沒有正常閉合之類。
- IE:
- firebuglite ：要在firefox以外的瀏覽器使用firebug就是這個了！
- IEDevToolBar ：微軟官方出的小工具，可以觀察DOM、CSS等頁面元素，缺點是無法像firebug即時修改。
- Script Debugger ：微軟官方出的小工具，在IE上遇到javascript的錯誤相當難debug，此時可以利用這個工具來幫助偵錯，安裝之後需要到工具>選項>進階，將「停用指令碼除錯」取消。
- debugBar：類似IEDevToolBar，不過內建一些檢色器之類的小工具，對設計人員來說蠻方便的，推薦安裝。
- Drip：偵測IE中Memory Leak的軟體。
- IETester：可以同時在windowsXP上開啟IE8 beta 2, IE7 IE 6 and IE5.5，你不用再裝好幾個IE了。
- Companion.JS：類似firebug console的工具，主要是可以利用他來做javascript的偵錯，也支援像firebug的console.log。
- fiddler：可以擷取所有 HTTP 的封包，點此、還有這、有中文的詳細介紹。
- Opera:
- Web Developer Toolbar and Menu：Opera 是個很特別的瀏覽器，他可以運作在很多意想不到的平台上並且相當流暢，例如wii、window mobile等各種不同裝置上，雖然一般PC的市占率不高，但他的重要性仍然不容小覷。此工具有很多特異功能，例如模擬手持、投影、和電視等設備。但一般 在觀察當前頁面DOM元素等常用的功能稍嫌不足。
- Web Accessibility Toolbar：這個工具就相當於firefox裡頭的firebug了。
- Safari：
- Debug Mode on Safari4：safari4問世之後，由於他神速的運行javascript而獲得廣大的迴響，而safari4也內建開發人員工具，但是要啟用，啟用方法請參考：Enable Debug Mode on Safari (Windows) + Error
- firefox:
- 你真的會用firebug？
- console：主控台可以顯示所有進行的post、get請求，可以查看每一個請求的header、參數、response。
- console.log：請別再用alert來debug了。透過console.log可以查看物件「脫光」物件的所有屬性或方法。
- 勘查：主控台的一個特異功能，若你發現頁面運行的速度或效能很差，你可以打開「勘查」來勘查所有被呼叫運行的function有哪些，並且會列出某個function被呼叫幾次、時間、等等。在觀察效能時非常有用。
- HTML：firebug 超好用的其中一點就在於他這個所見即所得真是做的完美無缺，你可以直接查看當前文檔的css、也可以直接編輯，所見即所得，更可以編輯、刪除任意元素，或 者直接查看某元素的DOM物件。而且CSS被覆蓋的順序也會一層層被列出，在觀察CSS style時絕對是不可或缺的工具。
- CSS：列出所有目前正在運行的CSS。
- script：列出所有目前正在運行的javascript。
- 就算script被壓縮、編碼過，client端終究得解譯回來，通常編譯過之後的程式都需要透過eval來解譯回來，透過script工具便可以知道被eval起來的函數如何被解譯，編碼過後的程式完全一目了然。
- 監看表達式可以查出某個被運行的function被執行，並且可以設定中斷點來逐步檢查，並查看stack。
- DOM：查看任意元素、物件內的所有成員屬性。
- NET：所有任何http協定的東西都會列在NET裡頭，你可以透過tab來切換欲觀察的傳輸。其中XHR就是查看透過ajax請求的數據資料。
- console：主控台可以顯示所有進行的post、get請求，可以查看每一個請求的header、參數、response。
- 理解arguments.callee
- arguments.callee指向參數的function。
- arguments.callee.caller指向被誰呼叫，在不知道某function被誰呼叫而引發錯誤時可以用來查出被誰調用而導致錯誤產生。
Categories: Javascript Core, Javascript練功房
02 八月 2009 @ 5:15 下午
很多人搞不懂Javascript的「this」這個關鍵字，或者是覺得懂，但是有些地方的this又覺得怪怪的。看過一些this的教學，我覺得都講得太複雜了，其實「this」只有一個重點而已。
this永遠指向「被執行時的作用域」
蝦毁？？被執行？作用域？？沒關係，試著把自己當作是編譯器，只要你不會在自己所撰寫的程式中迷路，其實this一點都不難區分。讓我們來看幾個例子： More »
Categories
Tag Cloud
Blog RSS
Comments RSS
Last 50 Posts
Back
Void 
Life 
Earth 
Wind 
Water 
Fire