人在夢中難覺……夢醒……方知味……

2016年5月20日 星期五

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

Chrome瀏覽器簡易除錯方式,
本篇圖片眾多,請小心服用。
Part I :錯誤尋找
1.先開啟網站,模擬錯誤出現的情形。
image0001
2.由於發現按下去了之後,動作沒產生,於是按下F12,這邊可以很明顯的看到有錯誤。右方顯示網頁位置字串。
 image0002
Part II:除錯方式
1.最簡單的方法,就是在你的IDE編輯器中,直接輸入console.log(“XXXX”);
image0003
2.開啟你的瀏覽器,按下F12 後按ESC 或直 接到網頁上的位置點選
image0004
3.可以看到下方有出現console輸出列表,剛剛打的console.log( r) ,印出r的資料。由於我的 r  是物件array,所以可以按 箭頭 ,往下展開
image0005
4.如果要使用debug除錯模式,先點選上面的Sources
image0006
5.點一下你要debug的檔案,如果是js也可以由上方的資料夾開啟。
image0007
6.開啟後右方會出現你的檔案原始碼
image0008
7.找到我們剛剛打的console.log( r)
image0009
8.在旁邊行號的地方,按一下滑鼠左鍵
image0010
9.看到多了一個藍色箭頭,表示已經定位成功。由於網頁已經run過一次了,所以按了不會有反應。請重新整理你的網頁,當你重新整理到一半,應該就會看到畫面上的出現 一個 藍色的 開始的箭頭 ,然後畫面上會有一行反白的藍色框框,卡在你的中斷點。
image0011
10.將滑鼠移到變數的位置,可以看到目前變數所代表的值。右邊的視窗也能夠看到變數的值。
image0012
11.或是直接開console,在上面輸入你要查的變數。
image0013
image0014
12.按下 F11 會逐行往下執行碰到函式會進去,而按F10也是逐行執行但碰到函式,不會進入,但繼續往下執行。
image0015
14.已經執行過變數的值會變成一個浮動視窗顯示在程式碼附近。
image0016
15.知道錯再哪了,但不想一直按F10跑程式碼,可以直接按F5 直接執行,如果不把中斷點消掉,等等網頁重新整理完後,仍然會卡在那邊。
image0017
繼續執行(F5)
image0018
16.按繼續執行後,網頁恢復正常。
image0019

Share:

0 意見:

張貼留言

每秒一句

出處:

作者:


虛榮榜

藍色小舖

文章

Blog Archive

GRActivaty