js如何調試？ js利用斷點進行調試的方法

本篇文章帶給大家的內容是關於js如何調試？ js利用斷點進行調試的方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在我們專案開發時，往往會出現未知的bug，有時候這些bug我們很難發現，所以我們就需要藉助斷點調試，讓程式運行到某處停下來逐個排查程式是否有錯誤之處，我們斷點偵錯都是在chrome瀏覽器下進行。首先把項目用谷歌瀏覽器打開。

按F12開啟Google偵錯介面，然後選擇Sources，這裡會顯示專案的JS程式碼，選擇我們需要偵錯的js檔案

首先我們用手動新增斷點的方式：

新增斷點：

介紹下下面一些按鈕的意思：

 

##首先紅色區域內由左至右依序為：

Pause/Resume script execution：暫停/復原腳本執行（程式執行到下一斷點停止）。

Step over next function call：執行到下一步的函數呼叫（跳到下一行）。

Step into next function call：進入目前函數。

Step out of current function：跳出目前執行函數。

Deactive/Active all breakpoints：關閉/開啟所有斷點（不會取消）。

Pause on exceptions：異常情況自動斷點設定。

綠色區域：

scope ：顯示目前斷點的作用域

watch ：點選號碼可新增你所需要監控的變數或表達式

Call Stack 顯示目前斷點的環境呼叫堆疊

Breakpoints 目前js斷點列表，新增的每個斷點都會出現在此處，點擊列表中斷點就會定位到內容區的斷點上

DOM Breakpoints 目前DOM斷點列表列表

XHR Breakpoints 目前xhr斷點列表，可點擊右側新增斷點

Event Listener Breakpoints 事件監聽器斷點設置處

Event Listeners 目前事件監聽斷點列表

開始調試：

##調試介面：

#在偵錯介面，我們把滑鼠放在程式碼的每個變數上，他會顯示這個變數的具體訊息，這樣你就可以逐步排查BUG所在

我還有一種加入斷點的方式就是在程式碼中需要讓他停止的地方加入degugger。程式碼執行到此處是會停下來

相關推薦：

Chrome JS實作斷點偵錯

##js調試系列斷點與動態調試[基礎篇]_javascript技巧

js調試Google開發者工具#

以上是js如何調試？ js利用斷點進行調試的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！