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

只要安裝了谷歌瀏覽器，就可以使用Google Chrome開發者工具了，Google Chrome開發者工具是內嵌到瀏覽器的開發工具。

打開方式有兩種：第一“按F12”，第二：shift+ctrl+i

一、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代碼無誤快速更新。

相關推薦：

谷歌chrome瀏覽器怎么安裝擴展插件？

谷歌Chrome瀏覽器怎么下載安裝Postman插件？

升級chrome谷歌瀏覽器后導致中國銀行網銀插件失效該怎么辦？