本文會忽略一些過於基礎的知識和細節

持續更新，歡迎關注~

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裡也可打斷點的！

1. subtree modifications 子節點新增、刪除、移動的話，則會觸發
2. attribute modifications 節點屬性修改時觸發
3. node removal

   

Event Listeners

事件監聽器列表

選中一個元素，可以看到經過它的事件列表（冒泡和捕獲）。

• Ancestors All 去掉祖先元素的事件，只看當前元素包含的事件 上圖中如果去掉選中，則不會顯示div繫結的click事件
• Framework listeners 去掉框架的事件

Properties

元素包含的屬性

如圖包含了多個屬性分類，點開可以看到的才是具體的屬性，這些所有的屬性都可以通過dom.xx呼叫

注：Accessibility 貌似用來支援h5的視聽障礙功能，瞭解即可

參考連結

作者CompileYouth