如何用Chrome開發者工具來調試腳本？
Javascript腳本在網頁開發中經常會用到，在開發過程中，如果遇到一些程序問題，我們怎樣進行調試？怎樣查找到程序出問題的地方？可以利用Chrome瀏覽器的開發者工具來進行腳本調試。下面一起來看下具體怎么操作。
操作方法
-
01
我們例子的Html代碼很簡單，如圖，就是一個按鈕，點擊這個按鈕，會觸發點擊事件。
-
02
點擊事件的腳本代碼如圖，也很簡單，主要是對二個數做相加操作，然后alert彈出相加的結果。
邏輯很簡單，我們這里主要是演示調試的過程。 -
03
代碼都寫好了，我們用Chrome瀏覽器打開這個網頁。
如圖， -
04
點擊瀏覽器右邊的‘三點’按鈕，在彈出的菜單上的‘更多工具’里，有個‘開發者工具’，點擊它打開這個工具
-
05
打開后，如圖，這個就是chrome的開發者工具。
我們點擊工具條上的‘Sources'欄 -
06
點擊后，我們就可以看到我們網頁的源代碼了，因為我們的腳本文件是直接寫在test.html文件上的，我們在左邊的目錄上，點擊選中這個test.html文件，在右邊就可以看到這個文件的腳本代碼了，如圖，可以看到我們寫的二個function的代碼。
-
07
我們點擊這腳本上的某一行，就在這行添加了一個斷點，當程序運行到這個斷點，就會產生中斷，讓我們一步步的調試。
-
08
我們來試下中斷，點擊頁面上的‘求和’按鈕，可以看到，程序在剛才的斷點上中斷了，
-
09
我們可以點擊右邊的‘運行’按鈕，點擊一次，代碼就往前運行一次，以便我們逐步調試。
在代碼運行的時候，在右邊的監控欄，還會實時顯示出當前代碼變量的值，比如我們代碼里的 n1, n2, 和這二個值相加后的結果值 result，都可以在這里顯示出來。以便我們判斷程序有沒有正確執行。 -
10
除了在開發者工具里點擊代碼添加斷點，我們還可以直接在代碼里加上斷點標志，‘debugger;' 當程序運行到這個標志所在的地方時，就會產生中斷。
-
11
如圖，程序運行到這個debugger標志的地方時，就產生了中斷。
所以我們在代碼開發時，如果想要在某一行代碼里進行中斷調試，就可以直接在這行添加debugger標志。 - End
- 發表于 2017-09-08 00:00
- 閱讀 ( 755 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章