本文會忽略一些過於基礎的知識和細節
持續更新,歡迎關注~
devtools——前端開發者的福音,進階高階工程師必須鍛造的利器!
那麼先截圖瞅瞅devtools

目前新版本有以下選單:
Elements
檢視 DOM 樹Console
控制檯Sources
檢視原始碼以及打斷點Network
記錄網路請求資訊Performance
執行時效能表現(解析 JS、計算樣式、重繪等)Memory
JS物件和相關聯的 DOM 節點的記憶體分佈情況Application
記錄資源(儲存資訊、快取資訊以及頁面用到的圖片、字型、指令碼、樣式等資訊)Security
檢測當面頁面的安全性Audits
給出提高頁面效能的建議
從本篇文章開始逐個強擼!
Elements

dom樹
如上圖中的1區域,相信大家都是成熟的老油條了,簡單的不多贅述,挑些不常見但實用的講講
1. 右鍵選單

Hide element
隱藏元素。這個必需說下,相信大家在看到廣告或者去掉迅雷種子(#。#正經)的遮罩層的時候一定想起自己的專業技能,那麼你是display:none
還是Delete element
?試試Hide element
更好用Force state
強制狀態,其實就是新增偽類。這個功能在除錯偽類樣式很好用:Break on
斷點除錯,沒錯html裡也可打斷點的!
subtree modifications
子節點新增、刪除、移動的話,則會觸發attribute modifications
節點屬性修改時觸發node removal
Event Listeners
事件監聽器列表

選中一個元素,可以看到經過它的事件列表(冒泡和捕獲)。
Ancestors All
去掉祖先元素的事件,只看當前元素包含的事件 上圖中如果去掉選中,則不會顯示div繫結的click事件Framework listeners
去掉框架的事件
Properties
元素包含的屬性

如圖包含了多個屬性分類,點開可以看到的才是具體的屬性,這些所有的屬性都可以通過dom.xx
呼叫
注:Accessibility 貌似用來支援h5的視聽障礙功能,瞭解即可