首頁 > 網際網路

chrome瀏覽器如何斷點偵錯

2019-12-18 10:45:09

js前端必不可少的需要用到瀏覽器偵錯,而chrome是前端開發者們較常用的瀏覽器,那麼chrome斷點偵錯技能的掌握必不可少。

1

首先我們在需要偵錯的介面按 F12 開啟開發者工具


2

開啟成功可以看到上圖所示的彈出工具。本經驗是如何偵錯,所以直接進入正題,點選  Sources 標籤


3

左邊 Page 標籤下顯示的就是專案目錄


4

假設對 Main.ts 進行偵錯,需要在偵錯程式碼行前,點選行數位位置所在,出現如圖所示的藍色標誌,表示定位成功。


5

接下來執行頁面,執行到指令碼所在就會在斷點的位置,出現暫停,將滑鼠移到指定變數,就會顯示出相關資料


6

配合右邊 watch 跟 呼叫堆疊的使用,可以跳出該函數,檢視上一步函數等等。通過檢視這些資料得到偵錯結果



IT145.com E-mail:sddin#qq.com