瀏覽器開發者工具詳解

杜萍偉發表於2018-12-06
瀏覽器

瀏覽器開發者工具詳解

Elements 標籤

  • DOM
    • Add attribute 新增屬性
    • Edit attribute 修改屬性
    • Edit as HTML 編輯 html
    • Delete element 刪除節點
    • Copy
      • Cut element 剪下節點（僅能在內部 paste）
      • Copy element 複製節點
      • Paste element 貼上在選中節點內部的最後位置
      • Copy outerHTML 複製節點（暫不瞭解區別）
      • Copy selecter 複製 CSS 選擇器
      • Copy XPath 複製 XPath 選擇器

        css 個 xPath 區別 點選檢視
        簡單來說：

        • Xpath 則更加強大，定位更加準確，可以匹配文字，可以尋找父級。
          例： //*[@id="select"]/div[3]/div[2]/div[1]/div[2]
        • css 選擇器更加快速，但是不能選擇父級（據說 css4 將增加此功能）
          例： #select > div:nth-child(3) > div:nth-child(2) > div:nth-child(1) > div.lf.select_title
    • Hide element 隱藏節點
    • Force state 新增滑鼠狀態
    • Break on 為 DOM 結構打斷點，當其改變狀態時，會頓住
    • Expand recursively 展開所有節點
    • Collapse children 收縮子節點
    • Scroll into view 使頁面滾動到選中節點位置
    • Focus
  • Styles 檢視頁面當前樣式、此處可臨時修改樣式
    此處會同時會顯示當前樣式的來源 xxx.css 以及行數 line，還有當前結構的盒模型。
    點選 Show all 則會顯示所有的預設樣式
    瀏覽器開發者工具詳解
  • Event Listeners 註冊的事件 通過選擇切換，可以檢視當前結構繫結事件，以及父級繫結的事件,備註：懸浮可臨時 remove 此事件
    • Ancestors
    • All、Passive、Blocking
    • Framework listeners
      瀏覽器開發者工具詳解
  • DOM Breakpoints 所新增的 DOM 結構斷點
  • Properties 選中節點所有的方法與屬性
  • Accessibility （暫不瞭解）
  • 檢視 DOM 結構、臨時修改 DOM 內容
  • 檢視頁面 Styles、臨時修改頁面 Styles
  • 檢視 DOM 結構的 Computed(計算後的屬性)
  • 查詢節點繫結的事件 Even Listeners

console 控制檯

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

  • console.assert()

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

  • console.clear()

    清空控制檯。

  • console.count()

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

  • console.countReset()

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

  • console.error()

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

  • console.group()

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

  • console.groupCollapsed()

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

  • console.groupEnd()

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

  • console.info()

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

  • 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 方法，作為資料收集的結束。（暫時未發現結果）

  • console.table()

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

  • console.time()

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

  • console.timeEnd()

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

  • console.trace()

    列印 stack trace.

  • console.warn()

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

左側有用篩選項，可分類顯示

瀏覽器開發者工具詳解

常用的方法

方法 描述
$() 返回與指定的CSS選擇器相匹配的第一個元素，等同於document.querySelector()
$$() 返回與指定的CSS選擇器相匹配的所有元素的陣列，等同於document.querySelectorAll()
$x() 返回與指定的XPath相匹配的所有元素的陣列
$_ 關聯上次執行的結果
$0 關聯到當前我們選中的html節點，此方法最多五次記錄（$0 , $1 , $2 , $3 , $4）
copy() 你可以通過全域性的方法copy()在console裡copy任何你能拿到的資源，包括我們在上一篇中提及的那些變數。例如 copy($_) or copy($0)

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

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之間）。

HTTPS和HTTP的區別主要為以下四點：

  • ① https協議需要到CA申請證照，一般免費證照很少，需要交費。
  • ② http是超文字傳輸協議，資訊是明文傳輸，https則是具有安全性的ssl加密傳輸協議。
  • ③ http和https使用的是完全不同的連線方式，用的埠也不一樣，前者是80，後者是443。
  • ④ http的連線很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路協議，比http協議安全。

一、如果網頁是安全的

會顯示如下資訊
通過點選View certificate可以檢視main origin的伺服器證照資訊。
點選左側可以檢視指定源的連線和證照詳情。

瀏覽器開發者工具詳解

二、如果網頁是不安全的

則會顯示如下訊息：
該皮膚可以區分兩種型別的不安全的頁面：

  • 如果被請求的頁面通過HTTP提供服務，那麼這個主源就會被標記為不安全。
  • 如果被請求的頁面是通過HTTPS獲取的，但這個頁面接著通過HTTP繼續從其他來源檢索內容，那麼這個頁面仍然被標記為不安全。這就是所謂的混合內容頁面,混合內容頁面只是部分受到保護,因為HTTP內容(非加密的內容)可以被嗅探者入侵,容易受到中間人攻擊。

瀏覽器開發者工具詳解

Audits 審計

對當前網頁進行網路利用情況、網頁效能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的 CSS 檔案等。

瀏覽器開發者工具詳解

將生成如圖所示的東西

圓環為評分，分數肯定是越高越好。

  • performance 效能
  • progressive Web App 漸進式Web應用程式
  • Best practices 最佳實踐
  • Accessiblity 可達性
  • SEO

瀏覽器開發者工具詳解

參考：blog.csdn.net/m0_37438418…

相關文章