瀏覽器開發者工具詳解

摘要： 這個除了檢視錯誤資訊、列印除錯資訊(console.log())、寫一些測試指令碼以外，還可以當作 Javascript API 檢視用。例如我想檢視 console 都有哪些方法和屬性，我可以直接在 console 中輸入"console"並執行 [x] co...

這個除了檢視錯誤資訊、列印除錯資訊(console.log())、寫一些測試指令碼以外，還可以當作 Javascript API 檢視用。例如我想檢視 console 都有哪些方法和屬性，我可以直接在 console 中輸入"console"並執行

• [x] console.assert()

  判斷第一個引數是否為真，false 的話丟擲異常並且在控制檯輸出相應資訊。

• [ ] console.clear()

  清空控制檯。

• console.count()

  以引數為標識記錄呼叫的次數，呼叫時在控制檯列印標識以及呼叫次數。

• console.countReset()

  與 console.count()配合，清除呼叫次數。

• [x] console.error()

  列印一條錯誤資訊，使用方法可以參考 string substitution。

• [x] console.group()

  列印樹狀結構，配合 groupCollapsed 以及 groupEnd 方法;

• console.groupCollapsed()

  建立一個新的內聯 group。使用方法和 group 相同，不同的是 groupCollapsed 打印出來的內容預設是摺疊的。

• [x] console.groupEnd()

  與 console.group()配合使用，結束當前 Tree

• console.info()

  列印以感嘆號字元開始的資訊，使用方法和 log 相同

• [x] console.log()

  列印字串，可以使用 printf 風格的佔位符。支援字元（%s）、整數（%d 或%i）、浮點數（%f）和物件（%o）四種。

  例如：console.log("%d 年%d 月%d 日",2011,3,26);

• console.profile()

  可以以第一個引數為標識，開始 javascript 執行過程的資料收集。和 chrome 控制檯選項開 Profiles 比較類似，具體可參考 chrome profiles

• console.profileEnd()

  配合 profile 方法，作為資料收集的結束。（暫時未發現結果）

• [x] console.table()

  將資料列印成表格。console.table [en-US]

• [x] console.time()

  計時器，接受一個引數作為標識。

• [x] console.timeEnd()

  與 console.time()配合使用，接受一個引數作為標識，結束特定的計時器。

• console.trace()

  列印 stack trace.

• [x] console.warn()

  列印一個警告資訊，使用方法可以參考 string substitution。

常用的方法

方法	描述
$()	返回與指定的CSS選擇器相匹配的第一個元素，等同於document.querySelector()
$$()	返回與指定的CSS選擇器相匹配的所有元素的陣列，等同於document.querySelectorAll()
$x()	返回與指定的XPath相匹配的所有元素的陣列

實際操作過程中發現 $()並沒有按預期返回相匹配的第一個元素，而是返回了所有匹配的元素陣列

Sources原始碼

主要用來檢視原始碼以及除錯 js

斷點可以在DOM元素節點發生改變時、XHR生命週期狀態改變時、指定的事件執行時被觸發

Network網路

從發起網頁頁面請求 Request 後分析 HTTP 請求後得到的各個請求資源資訊（包括狀態、資源型別、大小、所用時間等），可以根據這個進行網路效能優化。

此面板包括5塊:

• 區域① --> Controls 控制Network的外觀和功能。
• 區域② --> Filters 控制Requests Table具體顯示哪些內容。
• 區域③ --> Overview 顯示獲取到資源的時間軸資訊。
• 區域④ --> Requests Table 按資源獲取的前後順序顯示所有獲取到的資源資訊，點選資源名可以檢視該資源的詳細資訊。
• 區域⑤ --> Summary 顯示總的請求數、資料傳輸量、載入時間資訊。

區域① Controls資訊如下

• 網路日誌錄製
• 日誌清理
• 捕獲螢幕
• 過濾器
• 檢視切換
• 保留日誌開關
• Cache開關
• 網路連線開關
• 網速閥值

區域④ Requests Table 資訊如下

未列出部分，可在區域④的表頭部分右擊點出

• Name 資源名稱，點選名稱可以檢視資源的詳情情況，包括Headers、Preview、Response、Cookies、Timing。
• Method 請求的方法型別
• Status HTTP狀態碼。
• Remote Address 遠端地址
• Type 請求的資源MIME型別。
• Initiator 標記請求是由哪個物件或程序發起的（請求源）。
  • 滑鼠移入可顯示詳情
• Cookie 當前請求附帶的cookie數量
• Priority 優先順序
• Size 從伺服器下載的檔案和請求的資源大小。如果是從快取中取得的資源則該列會顯示(from disk cache)
• Time 請求或下載的時間，從發起Request到獲取到Response所用的總時間。
• Waterfull 顯示所有網路請求的視覺化瀑布流(時間狀態軸)，點選時間軸，可以檢視該請求的詳細資訊

區域⑤ Summary 資訊如下

• DOMContentLoaded 從 開始到頁面上DOM完全載入並解析完畢 所花費的時間（不會等待CSS、圖片、子框架載入完成），在 Waterfull 以一條 淺藍色的線 標註。
• Load 從 開始到頁面上所有DOM、CSS、JS、圖片完全載入完畢 所花費的時間，在 Waterfull 以一條 淺紅色的線 標註。
• requests 成功的請求數量/總的請求數量
• transferred 所有資源的大小
• Finish 從頁面開始到最後一次伺服器互動完成，所花費的時間

檢視具體資源的詳情

通過點選某個資源的 Name可以檢視該資源的詳細資訊，顯示資訊如下

• Headers 該資源的HTTP頭資訊。
• Preview 根據你所選擇的資源型別（JSON、圖片、文字）顯示相應的預覽。
• Response 顯示HTTP的Response資訊。
• Cookies 顯示資源HTTP的Request和Response過程中的Cookies資訊。
• Timing 顯示資源在整個請求生命週期過程中各部分花費的時間。

Performance效能

檢視頁面效能的，較為複雜~~~暫不討論

Memory記憶

檢視頁面效能的，較為複雜~~~暫不討論

Application應用

記錄網站載入的所有資源資訊，包括儲存資料（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、快取資料、字型、圖片、指令碼、樣式表等。

Security安全性

判斷當前網頁是否安全，通過該面板你可以去除錯當前網頁的安全和認證等問題並確保您已經在你的網站上正確地實現HTTPS。

HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer），是以安全為目標的HTTP通道，簡單講是HTTP的安全版。即HTTP下加入SSL層，HTTPS的安全基礎是SSL，因此加密的詳細內容就需要SSL。 它是一個URI scheme（抽象識別符號體系），句法類同http:體系。用於安全的HTTP資料傳輸。https:URL表明它使用了HTTP，但HTTPS存在不同於HTTP的預設埠及一個加密/身份驗證層（在HTTP與TCP之間）。