瀏覽器開發者工具詳解

瀏覽器開發者工具詳解

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協議安全。

1、若是網頁是安全的

會顯示以下信息
經過點擊View certificate能夠查看main origin的服務器證書信息。
點擊左側能夠查看指定源的鏈接和證書詳情。

2、若是網頁是不安全的

則會顯示以下消息：
該面板能夠區分兩種類型的不安全的頁面：

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

Audits 審計

對當前網頁進行網絡利用狀況、網頁性能方面的診斷，並給出一些優化建議。好比列出全部沒有用到的 CSS 文件等。

將生成如圖所示的東西

圓環爲評分，分數確定是越高越好。

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

參考：blog.csdn.net/m0_37438418…