參考部落格地址：IBM官網

開啟執行時錯誤自動暫停功能，準確定位出錯指令碼位置

在 Chrome 開發者工具中，可以開戶執行時錯誤自動暫停這一功能（如圖 2 所示），從而使開發者工具能在發現執行時指令碼異常時，在異常指令碼處暫停執行，跳轉至除錯頁面，供開發人員進一步查詢該執行時異常產生的原因。

圖 2. Source 面板中的自動暫停按鈕

自動暫停按鈕的下方有一個選項，Pause On Caught Exceptions，如果勾選上，則即使所發生執行時異常的程式碼在 try/catch 範圍內，Chrome 開發者工具也能夠在錯誤程式碼處停住

使用 Chrome 開發者工具除錯 JavaScript 的技巧與心得

上文介紹了 3 種定位相關指令碼的方法，在定位指令碼之後，通常會對指令碼中的部分程式碼進行除錯，本章主要詳細講解高效快捷地利用 Chrome 開發者工具進行 JavaScript 指令碼除錯的幾種技巧與心得。

設定條件斷點

與 Java 除錯類似，Chrome 開發者工具提供了斷點設定、刪除與斷點儲存等基本功能。同時，開發者工具也提供了設定條件斷點的功能，使開發者可以控制該斷點只有在滿足某一條件時才會被觸發。

條件斷點的設定如圖 4 所示，在所需要設定斷點的行最前端的行號處點選右鍵，選擇新增條件斷點後，會彈出一個對話方塊用於輸入具體的條件。合理運用好條件斷點能夠提高除錯的效率與準確性，使開發人員能更專注於在期望的場景下進行除錯。

圖 4. Source 面板中新增條件斷點

修改 JavaScript 檔案中的程式碼

這是 Chrome 開發者工具提供的一種非常實用的功能，即使開發人員可直接對開發者工具的 Source 標籤頁中的程式碼進行修改，並將其儲存，使瀏覽器在下次執行該段指令碼時，直接載入最新修改的版本。目前的 Firebug 及 IE 自帶的開發者工具都不支援對指令碼的直接修改，導致在 Firefox 或 IE 中除錯指令碼時，如果需要對程式碼進行修改，需要先去修改指令碼原始檔，再同步至應用伺服器，再清理瀏覽器快取，最終再次開啟應用程式時，才會看到程式碼修改後的效果。可見 Chrome 開發者工具提供的這一功能，大大提供了開發者除錯指令碼的效果。

需要注意的是，由於這種修改是儲存在瀏覽器快取中，因此它不會影響到指令碼的原始檔。當開發人員決定採用修改之後的指令碼時，需要將其複製到指令碼的原始檔中。

使用控制檯列印變數值或方法的返回結果

當斷點被觸發進入到除錯模式時，我們可以將當前任意存在的變數或方法輸入到控制檯中，按下回車後，控制檯便會返回相關的結果。該功能可使開發人員方便了解程式執行至斷點處時各個所需要變數或方法的返回值。

需要注意的是，當在控制檯中輸入的方法名字不帶括號時，控制檯輸出的是該方法所包含的程式碼資訊，而並不是執行結果。

結合 Element 標籤頁除錯 JavaScript 中對 CSS 的控制

在網頁開發過程中，經常需要在指令碼中控制不同條件下頁面的樣式展示，例如要求某一個按鈕的顏色在使用者停留十秒鐘之後由白色變成灰色。此時我們便需要在指令碼中通過具體的數值指定這個"灰色"該如何表示，一般情況下我們需要查詢相關資料或使用其他工具才能得到期望的"灰色"所對應的 RGB 數值或十六進位制數值。然而在 Chrome 開發者工具的 Element 標籤頁中，其實已經提供了包括該功能在內的一系列對樣式進行實時修改的功能，並且在修改之後能夠立即從頁面中看到變化。

圖 4 給出的是 Element 標籤頁的右半部分，當要對某個樣式類中的顏色進行修改時，它提供出一個非常直觀的圖譜供選擇，並在下方將其十六進位制程式碼顯示出來。開發人員可直接在此進行顏色選擇，確定顏色後，在 JavaScript 程式碼中引用其十六進位制數值即可。