 |
VOOZH | about |
|
VOOZH | about |
谷歌chrome開發者的開發工具有哪些？
Google Chrome開發者工具我想是Web編程的程式設計師都不會不知道，以前小編習慣使用火狐的開發者工具，因為覺得fireBug不錯；但是後邊就覺得不好用了，還經常卡死，網上流傳firebug一個大師跳槽到了谷歌，所以就改用谷歌了，下邊詳細介紹一下Google Chrome開發者工具的使用
只要安裝了谷歌瀏覽器，就可以使用Google Chrome開發者工具了，Google Chrome開發者工具是內嵌到瀏覽器的開發工具。
一、Console介紹
Console可以查看網頁運行後提示的消息，錯誤或者警告以及輸出內容等，網頁後台可以使用Console.debug("輸出內容")；來在Console輸出顯示，可以做到調試的作用吧，不過一般真正調試不是拿Console。console.debug("Console使用介紹");console是小寫形式，不然提示沒有Console
二、Resources介紹
Resources里可以查看web程序跑起來後所加載的一些資源（Resources），包括圖片或者其他「值」，以及Cookies
三、Sources介紹
Sources可以查看運行的腳本，調試一般都是在Sources調試的，所以程序開發者需要了解和熟悉Sources的使用
四、Sources調試使用
在左側的腳本代碼編號，滑鼠點擊即可添加斷點，添加斷點後，刷新網頁，程序運行到斷點即可看到斷點調式的狀態了，具體調試需要在自己想查看某個方法裡邊是否有問題，一步步排除，效果很好
五、NetWork介紹
NetWork可以看到網頁加載的腳本和資源的時間，還可以看到某些不能加載成功的資源；這裡有位是百度首頁演示，百度首頁內容很乾淨所以不需要加載什麼圖片等資源
六、Elements介紹
Elements這個就比如頁面的每個元素吧，比如百度搜索這個圖片，可以通過Elements找到，搜索框也可以，在底下的「放大鏡」類似的控制項，點擊然後選擇自己想要查看要素或位置，Elements會跳轉到相應的實現代碼
谷歌瀏覽器建議使用Ctrl+R刷新頁面，可以將修改的js和html代碼無誤快速更新。
