谷歌Chrome開發工具看起來有點兒奇怪，但做腳本調試的話，我認為選擇Chrome的開發工具是最好的。一些重要區域還有快速轉存
#1下面的工具欄
最左邊的按鈕可以在瀏覽器的新窗口或者新標簽頁中打開調試工具。
第二個按鈕可以打開控制台，控制台是一個很有用的JavaScript的REPL（Read Execute Print Loop）工具。你可以在現有的調試環境下編譯腳本代碼，這意味着你可以操作DOM，使用jQuery嘗試不同的CSS選擇器，或者在頁面加載庫函數，弄明白一個API是怎樣工作的。
TIP：需要空幾行輸入代碼的時候，使用Shift+回車結束一行。控制台還能顯示錯誤，警告，日志信息，還能夠自動編譯完成（編譯的時候向右的箭頭看起來更加安全，有些時候回車不一定好用（我說它很奇怪））。
第三個按鈕是“選擇頁面的元素並插入”。
第四個按鈕在異常發生時能夠觸發斷點。調試器可以在所有的異常發生時中斷編譯，只在未處理的異常或忽略的異常時中斷。未處理的異常時中斷可以很快地找到中斷的代碼。
第五個按鈕是很好的輸出按鈕。如果你想逐句閱讀最小化的庫函數源代碼，這個按鈕能在適合的位置設置斷開可空白，方便閱讀。不過，本地的變量仍然是最小化的，看起來像是Fortran程序的變量（I，j，k）。
第六個按鈕是活動編輯按鈕，點擊源代碼的時候，它可以在最前顯示。就像控制台一樣，如果你想弄清楚代碼是如何編譯通過的，這是個最好工具。更改的代碼是活動的。
#2區域：斷點
和其他編譯器一樣，你能在任何需要的代碼行設置斷點。你也能打斷代碼開始一段AJAX請求（只能在特定的URL打斷）。此外還有事件偵聽斷點。當需要找出是哪個響應了點擊時，就需要事件偵聽斷點，比如，事件包括定時器，像setTimer,clearTimer,以及Timer.tick事件句柄。
同時還有DOM斷點，可以用來弄清楚哪個修改了DOM的內容。元素表里的元素發生改變，例如有人添加或刪除了子元素，或者有人從DOM里刪除了某元素，點擊右鍵可以在此設置斷點。
配置文件（#3）
點擊“配置文件”按鈕展開表單，上面有兩個主要特性--配置CPU和快照（打開表單的時候，注意工具欄#1區域的按鈕）。
CPU配置文件可以找出函數在頁面的運算時間。
image
時間線工具能使界面更加有趣，尤其是頁面載入慢的時候。
設置（#4）
#4區域右邊的齒輪圖標可以設置工具。這里並沒有很多的設置內容，不過關閉緩存選項十分有用