首頁 > 其他

Google Chrome開發者工具使用(圖文教學)

2019-12-19 19:48:41

Google Chrome開發者工具我想是Web程式設計的程式設計師都不會不知道,以前小編習慣使用火狐的開發者工具,因為覺得fireBug不錯;但是後邊就覺得不好用了,還經常卡死,網上流傳firebug一個大師跳槽到了谷歌,所以就改用谷歌了,下邊詳細介紹一下Google Chrome開發者工具的使用


1

只要安裝了谷歌瀏覽器,就可以使用Google Chrome開發者工具了,Google Chrome開發者工具是內嵌到瀏覽器的開發工具,開啟方式有兩種:第一「按F12」,第二:shift+ctrl+i


2

Console介紹

Console可以檢視網頁執行後提示的訊息,錯誤或者警告以及輸出內容等,網頁後台可以使用Console.debug("輸出內容");來在Console輸出顯示,可以做到偵錯的作用吧,不過一般真正偵錯不是拿Console。console.debug("Console使用介紹");console是小寫形式,不然提示沒有Console



3

Resources介紹

Resources裡可以檢視web程式跑起來後所載入的一些資源(Resources),包括圖片或者其他「值」,以及Cookies


4

Sources介紹

Sources可以檢視執行的指令碼,偵錯一般都是在Sources偵錯的,所以程式開發者需要了解和熟悉Sources的使用


5

Sources偵錯使用

在左側的指令碼程式碼編號,滑鼠點選即可新增斷點,新增斷點後,重新整理網頁,程式執行到斷點即可看到斷點調式的狀態了,具體偵錯需要在自己想檢視某個方法裡邊是否有問題,一步步排除,效果很好


6

NetWork介紹

NetWork可以看到網頁載入的指令碼和資源的時間,還可以看到某些不能載入成功的資源;這裡有位是百度首頁演示,百度首頁內容很乾淨所以不需要載入什麼圖片等資源


7

Elements介紹

Elements這個就比如頁面的每個元素吧,比如百度搜尋這個圖片,可以通過Elements找到,搜尋方塊也可以,在底下的「放大鏡」類似的控制元件,點選然後選擇自己想要檢視要素或位置,Elements會跳轉到相應的實現程式碼



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