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 »
31 七月 2009 @ 11:13 下午
前端程式越搞越複雜，接踵而至的問題越來越多，雖然瀏覽器的效能不斷地提昇，但是只要IE6沒被淘汰的一天，網頁程式設計師永遠要替IE6補洞，Memory Leak是一個非常難搞得議題。關於微軟的官方說法可以參考Understanding and Solving Internet Explorer Leak Patterns，裡頭有詳細說明IE6會如何發生memory leak的情況。發生memory leak的徵狀就是：記憶體不斷飆上去，就算reload頁面，記憶體也不會被釋放，除非關掉瀏覽器。
在此不介紹為何為引發memory leak，因為我覺得這是瀏覽器應該要處理的問題，要拿出來講只是因為IE6沒辦法處理好罷了，雖然其他瀏覽器也並不是沒有這個問題，但是至少問題都沒有這麼嚴重，因此只需要針對IE6來處理即可。以下是我整理出幾種比較好的處理方式： More »
01 五月 2009 @ 5:34 上午
一般來說，我們都會用
new Date().getTime()來取得目前的time stamp，今天在cssRain看到JavaScript—new Date().getTime()的简写方式，發現
+new Date()這兩個會出現相同的結果，這讓我不禁好奇了「+」這個運算符他的特殊用法， 測試了幾個結果： More »
01 五月 2009 @ 4:26 上午
做專案時常常因為路徑問題而困擾，因為現在用的路徑很可能到另一個環境就有大幅度的變動，寫前端程式的時候更常遇到這個問題，當然每個人都會把路徑獨立出來成一個變數，到時候若要改的話只要改個變數即可，但像CSS的url command就可以讀相對路徑，因此路徑只要指向相對路徑即可，就算環境換了也不用改任何程式。因此如果每一隻script都可以知道自己被include的Root路徑，需要指定路徑的地方就只要根據這個Root路徑來做相對路徑即可。例如一隻js檔裡頭需要動態產生圖片，那麼就會需要用到這個相對路徑。 More »
01 一月 2009 @ 10:21 下午
javascript程式
javascript程式應該獨立成js檔被include進來，盡量不要將javascript code 與embade在HTML裡頭，這麼一來無法利用cache或壓縮，將來要維護也不容易。 盡量將引入的javascript放到HTML的最後，將會減少載入script的延遲。 script標籤裡頭不需要使用lauguage, type屬性。 More »
17 十二月 2008 @ 7:18 下午
javascript是一個弱型態的語言，不像JAVA、C#等對變數型態有非常嚴謹的定義，而且一般在編譯階段就會發現型態的錯誤，讓開發者避免一些不 必要的型態錯誤。而Javascript為script語言，因此必須在執行階段才會知道錯誤，雖然目前有一些工具可以輔助你開發時幫你檢查是否有 javascript型態錯誤或者語法錯誤，例如Douglas Crockford的JSLint，就是一個非常棒的Javscript verify tool，
雖然你可以依靠這些工具輔助你 在撰寫Javascript時避免一些不必要的錯誤，但是若你打開一些Framework的原始碼，你會發現一大堆利用javascript弱型態的特性 簡化程式碼的小技巧，當然，你可以選擇不使用者些技巧，但是你卻不能不瞭解有這些特性的存在。
More »
Categories
Tag Cloud
Blog RSS
Comments RSS
Last 50 Posts
Back
Void 
Life 
Earth 
Wind 
Water 
Fire