Google Chrome，前端(javascript)除錯方法

Chrome瀏覽器簡易除錯方式，
本篇圖片眾多，請小心服用。
Part I ：錯誤尋找
1.先開啟網站，模擬錯誤出現的情形。

2.由於發現按下去了之後，動作沒產生，於是按下F12，這邊可以很明顯的看到有錯誤。右方顯示網頁位置字串。
 
Part II:除錯方式
1.最簡單的方法，就是在你的IDE編輯器中，直接輸入console.log(“XXXX”);

2.開啟你的瀏覽器，按下F12 後按ESC 或直 接到網頁上的位置點選

3.可以看到下方有出現console輸出列表，剛剛打的console.log( r) ，印出r的資料。由於我的 r  是物件array，所以可以按 箭頭 ，往下展開

4.如果要使用debug除錯模式，先點選上面的Sources

5.點一下你要debug的檔案，如果是js也可以由上方的資料夾開啟。

6.開啟後右方會出現你的檔案原始碼

7.找到我們剛剛打的console.log( r)

8.在旁邊行號的地方，按一下滑鼠左鍵

9.看到多了一個藍色箭頭，表示已經定位成功。由於網頁已經run過一次了，所以按了不會有反應。請重新整理你的網頁，當你重新整理到一半，應該就會看到畫面上的出現 一個 藍色的 開始的箭頭 ，然後畫面上會有一行反白的藍色框框，卡在你的中斷點。

10.將滑鼠移到變數的位置，可以看到目前變數所代表的值。右邊的視窗也能夠看到變數的值。

11.或是直接開console，在上面輸入你要查的變數。


12.按下 F11 會逐行往下執行碰到函式會進去，而按F10也是逐行執行但碰到函式，不會進入，但繼續往下執行。

14.已經執行過變數的值會變成一個浮動視窗顯示在程式碼附近。

15.知道錯再哪了，但不想一直按F10跑程式碼，可以直接按F5 直接執行，如果不把中斷點消掉，等等網頁重新整理完後，仍然會卡在那邊。

繼續執行（F5）

16.按繼續執行後，網頁恢復正常。