chrome斷點調試
1. html
在編寫JavaScript代碼時，若是chrome
出現了bug，就要不斷的去找錯誤，若是console控制檯中提示還好說，但是沒有提示恐怕就要費一番周折了。可是有了chrome這個瀏覽器，咱們經過開發者工具就能夠很好的實現調試了。瀏覽器
實例代碼以下：dom
首先，咱們先要認識其中的主要功能，以下圖：ide
咱們看到瀏覽器頁面共分爲了四個模塊：函數
- 第一個其實是顯示頁面，這裏由於我打了斷點，因此顯示爲暗色。
- 右邊三個模塊即是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的使用post
代碼以下：測試
在chrome中斷點調試，斷點打在最長的一行，以下：this
咱們能夠發如今這一行中，只要咱們把鼠標放在其中的一個變量上，咱們就能夠知道他的值是多少，以下：
可是咱們若是想知道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的狀況，這樣就不用咱們每次親自去測試了。另外， 包括斷點中的內部節點發生變化、屬性發生變化、斷點要移除以後都會出現斷點的狀況。 因此能夠多多利用之