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


喜歡從業的專注,七分學習的態度。

JS:全稱JavaScript,Web中,js主要在兩個地方:

  • html的<script type="text/javascript"></script> 中.
  • js腳本文件中,頁面引用js:<script src="js/***.js"></script>
    JS調試一般在瀏覽器開發人員工具“調試程序”Tab頁。

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


開發人員工具

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

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

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

斷點

調試程序首先在運行前先添加斷點,讓程序在斷點處停止,然后才有監控和調試。
添加斷點:行號左側單擊,添加斷點后出現斷點標志,程序運行到斷點處會停止 。


斷點

監控

當程序停止在程序調試界面后可以添加需要監控的對象,可以監控的的內容包括對象和公式。
添加監控:選擇對象或公式,右鍵,添加監控。

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


    對象監控
  • 公式監控

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


公式監控

調試工具

當程序在斷點處停頓后可以使用調試工具,一步步觀察程序走向。


調試工具

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

代碼搜索

在調試界面有一個輸入框,用於檢索當前代碼內容,進行內容定位,可回車直接定位。


代碼檢索

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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM