Web開發標配--開發人員工具-JS調試

標籤：調試   開發人員   java   block   img   引用   class   asc   src   

喜歡從業的專註，七分學習的態度。

JS：全稱JavaScript，Web中，js主要在兩個地方：

• html的<script type="text/javascript"></script> 中.
• js指令檔中，頁面引用js：<script src="js/***.js"></script>
  JS調試一般在瀏覽器開發人員工具“偵錯工具”Tab頁。

F12開啟瀏覽器 開發人員工具。

開發人員工具

主要關注點在左側代碼框和右側監控地區。

關鍵點： 斷點、監控、調試工具。

偵錯工具簡單總結就是斷點+監控+調試工具。

斷點

偵錯工具首先在運行前先添加斷點，讓程式在斷點處停止，然後才有監控和調試。
添加斷點：行號左側單擊，添加斷點後出現斷點標誌，程式運行到斷點處會停止 。

斷點監控

當程式停止在程式調試介面後可以添加需要監控的對象，可以監控的的內容包括對象和公式。
添加監控：選擇對象或公式，右鍵，添加監控。

• 對象監控
  選擇對象---右鍵---添加監控，右側得到對象的值。

  
  對象監控

• 公式監控

選擇公式--右鍵---添加監控，右側得到對象的值。

公式監控調試工具

當程式在斷點處停頓後可以使用調試工具，一步步觀察程式走向。

調試工具

使用“單步調試”工具一行一行執行，觀察程式運行步驟，在遇到調用方法時使用“進入調試”進入調用的方法內部觀察運行步驟，在調用層次很深時，使用“跳出”回到方法外層，使用“運行”走完調試。

程式碼搜尋

在調試介面有一個輸入框，用於檢索當前代碼內容，進行內容定位，可斷行符號直接定位。

代碼檢索

開發工具對於每個人都有一些自己的使用習慣，最適合的、最習慣的、自己摸索的、是最好的。

一步一步，堅持積累，堅持學習。

Web開發標配--開發人員工具-JS調試