瀏覽器開發者工具（F12）

前言

瀏覽器是對服務器返回的數據進行解析與渲染，通過瀏覽器的開發者工具可以對源碼進行分析，有一句老話叫可見即可爬，博主以Chrome爲列，把學習的過程記錄下來，如果有問題，歡迎留言糾正

開發者工具欄簡介

瀏覽器打開百度的地址，通過F12調出開發者工具，這裏簡介下工具欄

• 元素(Elements)：用於查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點
• 控制檯(Console)：控制檯一般用於執行一次性代碼，查看JavaScript對象、查看調試日誌與異常的信息
• 源代碼(Sources)：該面板用於查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調試JavaScript源代碼，可以給JS代碼添加斷點等
• 網絡(Network)：網絡頁面主要用於查看header等於網絡連接相關的信息(HTTP HTTPS)
• 性能檢測(Performance)：用於記錄與分析頁面在運行時的所有活動，從而進行頁面性能檢測
• 內存(Memory)：用於查看頁面內存的佔用情況（記錄內存列表）
• 應用(Application)：主要是記錄頁面加載是的所有資源信息（緩存、Cookies、腳本、樣式表）
• 安全(Security)：該面板用於調試HTTPS中的認證相關的安全問題
• 審查(Audits)：查看當前頁面網絡利用情況、網頁性能方面的診斷，並給出一些優化建議

常用工具詳解

元素(Elements)

通過選中箭頭進入元素選擇模式，可以在頁面中去選擇需要查看的元素，在Elements面板下面定位該元素源代碼的具體位置與相關屬性

• 如下圖，選中百度輸入框後定位的部分源碼
  

• 定位的源碼可進行雙擊後修改，確認後當前頁面渲染會生效（僅本地，服務器不會被更改），如圖
  

控制檯(Console)

Console用於JavaScript調試，Console對象常用的兩個用途

• 顯示代碼運行時的錯誤信息
• 提供了一個命令接口，用來與網頁代碼互動

Console常用的對象方法

方法	描述	實例
clear()	清除控制檯的輸出信息	console.clear()
error()	錯誤信息，同時顯示錯誤發生的堆棧	console.error(‘錯誤’)
log()	輸出日誌信息	console.log(array)
time()	計時開始	console.time(‘計時1’)
timeEnd()	計時結束	console.timeEnd(‘計時2’)
warn	輸出警告信息	console.warn(“警告”)

源代碼(Source)

Sources面板裏面調試JS代碼

• 設置斷點進行襠部調試
• 增加調試代碼進行信息的打印與跟蹤
  

網絡(Network)

查看當前網頁的一些網絡請求包，進行分析HTTPS請求後的一些資源信息，主要包含五個模塊

• Header：資源的請求Url、Http方法(POST/GET)、請求以及響應等
• Preview：可進行資源的預覽
• Response：響應信息面板
• Timing：請求資源的花費的時間
• Cookies：請求資源過程中的身份信息
  

左側爲網絡請求後返回的列表，點擊可查看具體返回的數據，一般調試時經常會用到
HTTP請求頭

• Resquest URL：請求的路徑，也就是百度的域名
• Request Method：GET請求，從服務器獲取數據
• Status Code：請求應答狀態碼，200 OK成功返回

  常見的錯誤碼有 404頁面不存在 503服務器超時

• Remote Address：服務器的IP地址，百度有很多備用的公網IP，所以請求測試時地址偶爾會變動

在Response欄中就是百度服務器返回的html代碼，通過瀏覽器渲染展現的就是一張靜態頁面，這在Preview欄可查看，在Timing欄中其實就是請求加載的時間

由於百度首頁會有自定義的導航欄、圖標還有用戶的信息，所以還會加載css js代碼，這裏就不多做展開。