俗話說工欲善其事，必先利其器，
所以我們就先從工具說起，
首先是在開發 Web 程式時，最常用的網頁開發工具
firefox - 以 firebug 為例 (http://getfirebug.com/wiki/index.php/Main_Page)
IE (http://msdn.microsoft.com/en-us/library/hh772704(v=vs.85).aspx)
Chrome (http://code.google.com/intl/zh-TW/chrome/devtools/)
以上三種 Browser 中的 Developer Tool 介面上差異頗大，但其實內容大致上相同，
大致上可以分成
Console(IE譯作主控台)、HTML、Javascript、Network
Console 的部份在之前的文章中有提到，
我們可以利用 console.log(...) 、 console.info(...) 、 console.error(...) 等方法，
將偵錯的資訊印出來，顯示這些訊息的地方就是 Console ，
通常在 Console 中也允許我們用 Command line的方式輸入 Javascript 做運算。
HTML 的部份則是協助我們，將網頁上的元素轉換成他在 HTML 中的位置，
相關的屬性、CSS Style 等等，大都可以在這個地方找到。
Javascript 的部份，通常都允許我們在這邊做 Javascript 除錯，可以下中斷點，
觀察 Javascript 運作的情形。
Network 則是紀錄 Browser 發出什麼 Request 、 Web Server 做出什麼回應，
花了多少時間、以什麼方式傳遞...等資訊。
對這些工具有了大概的瞭解之後，來看看平常如何運用這些工具。
當網頁出現 javascript error 的時候，
我們可以在 Console 裡看到，所有發生 Error 的程式片段，
用滑鼠點擊這些錯誤時，這些工具通常都可以直接跳到 Javascript 中，
並標示出發生 Exception 的程式碼位置。
這個功能對我們在 Javascript 程式除錯上非常有幫助。
下圖示範，當按下畫面中的 Test Button 時，會 throw 一個 exception 出來，
在 Console 的畫面中就可以看到他指出錯誤發生的地方。
當按下上圖中描述錯誤發生點時，就會跳到 Script 的畫面。
下圖是 Network 的畫面，從這個畫面，
可以看出 Browser 對 Server 發出的每個 Request，
以及每個 Request 回應的狀態方式等等。
從上圖每個 Request 可以再進細項到該 Request 的內容，
包含 Request 和 Response 的 Header 、 Cookies 、及實際傳輸的內容都可以看得到，
下圖是在使用 UpdatePanel 發出 AsyncPostback 從 Server 回應的內容，
仔細看內容很不一樣喔，這是因為 UpdatePanel 是部份更新，
更新的方式是透過 Javascript 將 Server 傳回來的容 Parse 後，
再展現到畫面上，所以他並不是一個完整的 HTML 頁面。
再來看看， ScriptManager.RegisterStartUpScript 丟出來的內容長什麼樣子。
很可能會造成 Asp.Net AJAX framework 底層 Parse 錯誤，
導致 Javascript 無法正常執行，而 DevTool 又無法正確指出有問題的程式碼位置。
有可能發生的情況是， Server 端程式 Throw 出來的 Exception 包含有單引號，
或其他 Javascript 的保留符號，但沒有處理到，
這時候就可以用這種方式，看到 Server 到底是 throw 出什麼 exception。
