[轉貼] 使用Chrome的Web Developer Tool偵錯

2012031121:17

前言 
拜ASP.NET Webform上的server control所賜，讓開發Web page的門檻大大降低，但相對地也帶來了許多『ASP.NET工程師』不了解HTML, CSS與JavaScript。

常見的情況就是：

  1. 什麼處理動作，都要postback回server端，寫server端的code處理。
  2. 要控制Render出來的HTML，都只會透過server control的property來控制。
  3. 只會透過Visual Studio偵錯。


這樣的情況，在現在front-end提供了越來越多fancy的framework或plugin的趨勢下，顯得問題更加嚴重。如果您偵錯JavaScript，還是只會透過alert，或是驗證HTML與CSS的套用，還是只能透過.aspx上的設計模式，那希望這篇文章可以讓您提升到另一個層次。

這篇文章要介紹的工具是Chrome瀏覽器裡內建的web developer tool (與FireBug或Firefox 10.0內建的Web developer tool大同小異)，只是介紹Chrome上developer tool的基本功能，也就是可以幫助我們做什麼樣的事情，各個web developer tool的比較，則不在此篇討論範圍。

介紹 
當使用Chrome瀏覽某個網頁的時候，按下F12，即會開啟web developer tool的介面。 第一次預設會停在Elements的頁籤，則可以看到這一個網頁的HTML原始碼。 
 

Elements 
選下面toolbar上的放大鏡(Inspector)，便可以選擇頁面上任何一個區塊，網頁上的DOM即會反白或增加外框，最下面的toolbar則會顯示您選擇的DOM，它所屬的DOM tree階層。舉個例子，當我們選擇時，結果如下： 
 

  • Matched CSS Rules
    在右邊的Matched CSS Rules區塊，是這代表著選取的這個DOM，所有符合的CSS rules有哪些，且現在套用的是哪一個style sheet底下的rule。因為CSS的套用，是有階層順序的，以上圖來說，目前正在套用的rule為Sample.aspx第10行，裡面的body style宣告backgroud-color為purple。其他相符合的css，還包括了Joey.css裡面第2行，宣告body style顏色為red，上面帶著刪除線，代表這個rule沒被套用。而user agent stylesheet，則可以想像成是Chrome browser預設給DOM的一些修飾呈現方式。

    點選CSS rule上的hyperlink，則可以開啟該rule所屬的css設定檔案，例如點選Sample.aspx。這樣可以方便我們直接trace該rule檔案是哪一支，其他相關設定為何。 


    在原本的設定中，body的背景色為Sample.aspx上設定的紫色： 

    當我們將Sample.aspx的css rule的checkbox取消勾選時，可以看到body的背景色，換套用了Joey.css的紅色，這樣的功能可以很方便地調整樣式設定以及找出css階層的套用順序問題。 


    當然，這樣的功能也支援即時的編輯、預覽，甚至還提供了intellisense，例如將red改輸入yel，會出現yellow以及yellowgreen，且網頁上會即時套用樣式。要注意的是，這邊改的css，指的是放在browser裡面本地端的檔案，而非server上的檔案。若需要在client修改，並自動儲存回server端，可以透過chrome-devtools-autosave來達到這樣的需求，簡介請參考：Auto-saving CSS And JavaScript Changes Locally From The Chrome Developer Tools。 


Scripts 
透過web developer tool來協助偵錯JavaScript，這是身為一個web developer一定要會的技能。

當切到Scripts頁籤時，可以看到這個網頁上作用的所有js檔案。 
 

在所有作用的js檔上，如同熟悉的IDE一般，我們可以在js程式碼上設定中斷點，當呼叫到該行時，就可以透過IDE中斷點來進行偵錯，觀察相關的變數、DOM的attribute、event或值。


 

例如當在text中輸入1234，會觸發CustomValidator的client validation function：SampleValidate()，則js會中斷在剛剛設定的第134行。 
 

更讚的是，Call Stack的區塊，直接視覺化的呈現到中斷點時的Call Stack為何。以這例子來說，第134行屬於SampleValidate()這個function，所以在Call Stack中，SampleValidate反白，且標示出在哪一支檔案的第幾行。 

當點選Call Stack上任一function時，就可以清楚看到目前中斷的程式碼，相關的進入點為何。例如點選ValidateOnChange，這是屬於WebResource.axd上的功能，也是大部分ASP.NET內建JavaScript的檔案。可以看到原生ASP.NET提供的JavaScript function。 



我們也可以透過將要觀察的部分，選取後按滑鼠右鍵，選Add to watch。或是直接在Watch Expressions上選+按鈕後，輸入要監看的變數，即為加入監看式，就可以該時間點相關的資訊。 


Button bar的部份，就如同一般IDE偵錯中斷點提供的功能一樣：

  1. Pause Script execution(F8)：到下一個中斷點才停止
  2. Step over next function call (F10)：跳到下一行
  3. Step into next function call(F11)：追進去這個function
  4. Step out of current function(shift+F11)：執行完目前的function (跳出這個function)
  5. Deactive/Active all breakpoints：單鍵開關中斷點是否作用，不會取消所有中斷點標示！！

當滑鼠移到js的片段上，也會以類似tooltip的方式，出現即時的監看資訊。 


除了提供如一般IDE的中斷方式來偵錯JavaScript，Chrome web developer tool更提供了一些相當實用的trigger中斷方式。例如：DOM發生變化時中斷、呼叫某個符合條件的XHR(XmlHttpRequest，也就是ajax)時中斷、發生exception時的中斷等等…

當DOM發生改變時，中斷執行正在改變此DOM的JavaScript
DOM改變有三種情況：

  1. subtree modifications: 該DOM裡面的subtree發生變化時中斷，以便知道是哪段js改變了subtree。
  2. attributes modifications: 該DOM上的attribute發生變化時中斷，以便知道是哪段js改變了這個DOM的attribute。
  3. node removal: 該DOM被移除時中斷，以便知道是哪段js移除了這個DOM。

舉例來說，我們在CustomerValidator的上，掛上hook，來追蹤什麼時候display會從none，改為inline而顯示出error meesage。display是DOM的attribute，所以只需要break on attributes modifications。 


在DOM Breakpoints區塊上，可以看到我們監聽的DOM，例如CustomValidator1 Render出來的HTML為span#CustomValidator1。 
 

當在text輸入123456時，onchange會觸發驗證，驗證邏輯為當輸入長度大於2時，代表驗證錯誤。而程式碼會停在WebResource.axd裡面，控制Validator顯示的JavaScript。 

 

另外，下方button bar有個{}的按鈕，當JavaScript可能經過壓縮或原本就不適合查看，可以透過這個pretty print按鈕，來進行排版，以便偵錯。例如引用jQuery.min.js，這是壓縮後的js，沒有排版前如下圖： 


排版後如下圖，雖說因為jQuery.min.js的壓縮是連變數與function都壓縮，但必要偵錯時，排版後還是對偵錯很有幫助。 
 

Exception的處理
Exception的處理也有三種：

  1. 預設：exception不中斷(黑色) 
  2. 只要發生exception，不管有沒有handle，都要中斷(藍色) 
  3. 當發生未處理的exception時，才要中斷(紫色)，同IE的js error發生情況 
    上一篇

    [轉貼] 日期函數的應用、ToString格式大全

    下一篇

    [轉貼] 預防 XSS 攻擊 - Microsoft Anti-Cross Site Scripting Library

相關文章

我要留言