廢話不多說,給大家介紹一下最基本的瀏覽器調試工具
這個就是chrome瀏覽器的調試界面,怎么調出來大家都知道吧
第一個箭頭是,選擇元素,激活后,在頁面中鼠標移動到那地方,下面的Elements窗口會自動移動到相應的代碼段
第二個手機就是切換到手機界面
1.Elements是顯示頁面代碼的窗口
2.console是瀏覽器控制台,可以直接在里面寫js代碼
3.Sources是調試窗口,這里用的最多的就是斷點調試了
:這個箭頭是繼續執行腳本的命令,如果后面還有斷點,直接執行到后面的斷點,沒有斷點直接執行到代碼最后面
這個圖標的作用是,直接執行完函數進行下一步,不進入函數
這個箭頭是指進入函數逐步執行函數
這個箭頭是跳出函數
這個是注釋斷點,和代碼的注釋一樣,仍舊顯示但是不起作用,這樣就不需要在調試未完成的時候想要跑一編程序,挨個把斷點刪除,然后再添加了
這個圖標激活之后,在代碼出錯之后會直接跳轉到代碼出錯的那一行
兩種斷點
普通斷點
這種藍色的斷點是普通的斷點
條件斷點
這種黃色的斷點是條件斷點,可以讓函數直接跳轉到你設置的條件那一步
添加條件斷點
刷新頁面后直接跳轉到 i = 50的那一步
注意:是i==50;如果是i=50就是賦值運算了
監視窗口
可以選中變量后右鍵add to watch
在一種方法就是直接在wtach窗口添加
最后介紹的一個就是請求的窗口
這個窗口會保存所有請求的數據
這個是可以限速的,可以測試頁面在不同的網速下打開的速度
直接點開下面的請求可以查看請求的詳細信息