小弟從事網站程式的開發已有一段時間,前些年的網站技術並沒有太多AJAX的技術,
而且前端的程式也多半被認為只是拿來做效果或是搞花樣的不起眼小東西,
那時候前端的JavaScript程式最常拿來做什麼…跑馬燈、訊息提示、多層下啦選單、螢幕效果等,
了不起更進階就會使用到網頁表單上的輸入檢查、金額數量計算,
然而網站開發時至今日,所謂的網站程式設計已經不單純只是Server端程式而已,也包含了前端的JavaScript程式。
現在越來越多人採用ASP.NET MVC技術來開發網站,就會大量的使用到前端的JavaScript程式設計,
非.NET技術的開發人員或許會覺得這沒有什麼好稀奇的,但 .NET領域的開發人員大部分仍舊採用ASP.NET WebForm,
這一部分的開發人員很多人對於AJAX的想法與觀念就純粹就只是把一堆伺服器控制項丟到UpdatePanel中,
更進階的開發人員會再去細分一個頁面會去拆成多個部分去放置多個UpdatePanel,
但是大量使用UpdatePanel的情況下,是這些ASP.NET WebForm開發人員還是對於前端程式還是無法掌握與進一步應用,
因為ASP.NET WebForm的PostBack機制與與網頁生命週期的難以捉摸,前端JavaScript終究還是被大多人視為「做效果」。
上個專案是採用ASP.NET MVC來開發,前端的jQuery程式的應用就相當的多,其程式行數量與複雜度就與後端程式相當,
專案團隊的成員有四分之三的人不熟悉jQuery的操作,因為對於jQuery不熟悉也就對於如何去使用工具偵錯就更不得而知,
有個成員對於前端程式的偵錯就是直接使用 alert() 的方式,讓前端程式執行時再把要追蹤偵錯的訊息給 alert 出來,
這樣的作法相信很多人直到現在還是這樣做(而且樂此不疲?!),這樣的做法也是可以啦……
但是要偵錯時就要出現一堆的 alert 然後再一次又一次的按下 alert 的確定按鍵讓視窗消失後再進行下一個 alert ……
而直到現在一定還有一堆人都不知道 IE 瀏覽器有開發者工具可以幫助更方便的做這些前端的偵錯工作。
我必須說,懂得掌握工具的使用就能更有效率的進行開發,所以就整理了一下目前五個主要瀏覽器的開發者工具,
Firefox、IE、Chrome、Safari、Opera
介紹這些瀏覽器的開發者工具要怎麼把它們從瀏覽器中叫出來,並且簡單介紹如何的使用。