chrome斷點調試
1.
在編寫JavaScript代碼時，如果
出現了bug，就要不斷的去找錯誤，如果console控制台中提示還好說，可是沒有提示恐怕就要費一番周折了。但是有了chrome這個瀏覽器，我們通過開發者工具就可以很好的實現調試了。
實例代碼如下：
首先，我們先要認識其中的主要功能，如下圖：
我們看到瀏覽器頁面共分為了四個模塊：
- 第一個實際上是顯示頁面，這里因為我打了斷點，所以顯示為暗色。
- 右邊三個模塊便是console控制台中的了。第一個是sources資源，通過這個模塊，我們可以找到任何我們需要的頁面資源。
- 控制台中的第二個頁面即為顯示源碼的頁面，這里我們可以在代碼的左邊打斷點，圖中：藍色代碼所在行表示目前代碼的執行階段，即目前代碼在第9句執行；深藍色代表將要執行但還未執行的代碼。而淺藍色代表已經執行過了的代碼。因此，目前執行的是var i;還沒有復制為0；所以我們把鼠標停留在i=0中的i處，則會顯示undefined。
- 最右邊的模塊便是調試的重點模塊了。最上面的圖片如圖所示：
- 第一個圖標是：resume script excution。會將斷點執行過程重啟（resume）。
- 第二個圖表是：step over next function ，即如果遇到一個函數，它會直接執行完這個函數，而是直接執行跳過進入下一步，不顯示細節。
- 第三個圖表是：step into next function ，即如果遇到一個函數，它不會一下運行完這個函數，而是進入函數內部，一步一步地執行，這樣，我們可以更清楚地觀察執行過程。
4.第四個圖表示：step out of current function,即如果利用 step into已經進入了函數內部，我們可以通過此功能來一下執行完函數內部剩下的代碼。
2. watch的使用
代碼如下：
在chrome中斷點調試，斷點打在最長的一行，如下：
我們可以發現在這一行中，只要我們把鼠標放在其中的一個變量上，我們就可以知道他的值是多少，如下：
但是我們如果想知道a+b+c的值卻沒有很好的辦法，其實是有的。
方法就是將a+b+c全部選中，然后就可以看到了，如下：
因此，可以看到這時一個不錯的方法。這樣就不用自己去就算了。
另外，如果在上面的代碼中 b = a - 1的值對我們十分重要怎么辦？ 把它加入到watch中去調試，如下：
先選中，然后在點擊最后一個 Add selected text to watches, 然后注意觀察右上角的watch
這時一旦表達式的值發生了變化，Watch下面的表達式就會立即更新，這對於我們監控起來還是非常方便的。
尤其是對於類似於下面這樣的二叉樹查找：
給 this[mid]（這個在chrome中是沒有辦法檢測到的）先全部選中，然后Add selected text to watches即可實時觀察他的變化了。這樣我們就知道一個二分查找需要經過哪些值了。
3. error Stack
我們執行下面這個有錯誤的代碼，看看是如何報錯的。
顯然，這里a是沒有定義的，報錯如下：
即首先說明在第12行出現了一個錯誤 a is not defined。 之前我都是看到這就不往下看了，然后呢？ 下面的三行是什么呢？
第一行： at hhh.html:12 即第12行的錯誤，因為它處在一個匿名函數中，所以at 就沒有說明具體的環境，顯然程序是運行到這里之后暫停的，所以當前棧的環境在第12行。
第二行： at dfa 這是一個函數，即如果退出當前環境后所在的環境，那顯然就是在函數dfa的環境之下了。
第三行： at hhh.html: 16，顯然，如果退出了第二行中的環境， 那么在一個全局環境之下，所以沒有具體的名稱，於是直接說明了位置。
我們再看下面的例子，這個例子中是沒有匿名函數的，都是具名函數，所以具體的環境都很清楚，如下所示：
報錯如下所示：
不出意外，error stack 就是這么一個由當前錯誤退出棧的一個過程。 核心問題就在當前錯誤上。 后面指定的位置時行數。
總結： error stack的順序是由當前到原來的一個棧的退出的過程。
4. 在代碼中輸入 debugger; 那么就會在運行中自動在這里打一個斷點， 就像我們再source中設置斷點一樣。
5. 在dom中，我們可以選中一行dom元素，然后在右鍵，選擇break on ，可以看到，到這里就會有斷點發生。如下所示:
可以看到，我們點擊右鍵之后，這里有很多選項都是之前很少用但是非常有用的，比如編輯、copy、hide（這樣就不用自己設置display：none了）、還有測試active、hover、focus、visited的情況，這樣就不用我們每次親自去測試了。另外， 包括斷點中的內部節點發生變化、屬性發生變化、斷點要移除之后都會出現斷點的情況。 所以可以多多利用之