本文會忽略一些過於基礎的知識和細節html
持續更新,歡迎關注~前端
devtools——前端開發者的福音,進階高級工程師必須鍛造的利器!node
那麼先截圖瞅瞅devtools git
目前新版本有如下菜單:github
Elements
查看 DOM 樹Console
控制檯Sources
查看源碼以及打斷點Network
記錄網絡請求信息Performance
運行時性能表現(解析 JS、計算樣式、重繪等)Memory
JS對象和相關聯的 DOM 節點的內存分佈狀況Application
記錄資源(存儲信息、緩存信息以及頁面用到的圖片、字體、腳本、樣式等信息)Security
檢測當面頁面的安全性Audits
給出提升頁面性能的建議從本篇文章開始逐個強擼!緩存
如上圖中的1區域,相信你們都是成熟的老油條了,簡單的很少贅述,挑些不常見但實用的講講安全
Hide element
隱藏元素。這個必需說下,相信你們在看到廣告或者去掉迅雷種子(#。#正經)的遮罩層的時候必定想起本身的專業技能,那麼你是display:none
仍是Delete element
?試試Hide element
更好用Force state
Break on
subtree modifications
子節點添加、刪除、移動的話,則會觸發attribute modifications
節點屬性修改時觸發node removal
事件監聽器列表 網絡
選中一個元素,能夠看到通過它的事件列表(冒泡和捕獲)。框架
Ancestors All
去掉祖先元素的事件,只看當前元素包含的事件 上圖中若是去掉選中,則不會顯示div綁定的click事件Framework listeners
去掉框架的事件元素包含的屬性 dom
如圖包含了多個屬性分類,點開能夠看到的纔是具體的屬性,這些全部的屬性均可以經過dom.xx
調用
注:Accessibility 貌似用來支持h5的視聽障礙功能,瞭解便可