chrome瀏覽器調試工具的使用

廢話很少說,給你們介紹一下最基本的瀏覽器調試工具

這個就是chrome瀏覽器的調試界面,怎麼調出來你們都知道吧 

第一個箭頭是,選擇元素,激活後,在頁面中鼠標移動到那地方,下面的Elements窗口會自動移動到相應的代碼段

第二個手機就是切換到手機界面

1.Elements是顯示頁面代碼的窗口

2.console是瀏覽器控制檯,能夠直接在裏面寫js代碼

3.Sources是調試窗口,這裏用的最多的就是斷點調試了

:這個箭頭是繼續執行腳本的命令,若是後面還有斷點,直接執行到後面的斷點,沒有斷點直接執行到代碼最後面

這個圖標的做用是,直接執行完函數進行下一步,不進入函數

 這個箭頭是指進入函數逐步執行函數

這個箭頭是跳出函數

這個是註釋斷點,和代碼的註釋同樣,仍舊顯示可是不起做用,這樣就不須要在調試未完成的時候想要跑一編程序,挨個把斷點刪除,而後再添加了

這個圖標激活以後,在代碼出錯以後會直接跳轉到代碼出錯的那一行

兩種斷點

普通斷點

這種藍色的斷點是普通的斷點

 

條件斷點

這種黃色的斷點是條件斷點,能夠讓函數直接跳轉到你設置的條件那一步

 

添加條件斷點

刷新頁面後直接跳轉到 i = 50的那一步

注意:是i==50;若是是i=50就是賦值運算了

監視窗口

能夠選中變量後右鍵add to watch

在一種方法就是直接在wtach窗口添加

最後介紹的一個就是請求的窗口

這個窗口會保存全部請求的數據

這個是能夠限速的,能夠測試頁面在不一樣的網速下打開的速度

直接點開下面的請求能夠查看請求的詳細信息