本文會忽略一些過於基礎的知識和細節
devtools——前端開發者的福音，進階高級工程師必須鍛造的利器
先截圖看看chorme devtools
目前新版本有以下菜單：
- Elements 查看 DOM 樹
- Console 控制檯
- Sources 查看源碼以及打斷點
- Network 記錄網絡請求信息
- Performance 運行時性能表現（解析 JS、計算樣式、重繪等）
- Memory JS對象和相關聯的 DOM 節點的內存分佈情況
- Application 記錄資源（存儲信息、緩存信息以及頁面用到的圖片、字體、腳本、樣式等信息）
- Security 檢測當面頁面的安全性
- Audits 給出提高頁面性能的建議
從本篇文章開始挨個捋
Elements
先個截圖，看看有哪些功能：
1 . dom樹
如上圖中的1區域，相信大家都是成熟的老油條了，簡單的不多贅述，這裡講講選中元素後右鍵彈出的菜單
右鍵菜單截圖
- Hide element
隱藏元素。這個必現說下，相信大家在看到廣告或者去掉迅雷種子（#。#正經）的遮罩層的時候一定想起自己的專業技能，那麼你是display:none還是Delete element？其實Hide element更好用
- Force state
Force state
強制狀態，其實就是添加偽類。調試偽類樣式很好用：
Force state > hover
- Break on
Break on
斷點調試，沒錯html裡也可打斷點的
1 . subtree modifications 子節點添加、刪除、移動的話，則會觸發
2 . attribute modifications 節點屬性修改時觸發
3 . node removal
subtree modifications 示例
2 . Event Listeners
事件監聽器列表
div綁定事件後
選中一個元素，可以看到經過它的事件列表（指冒泡和捕獲）。
- Ancestors All 去掉祖先元素的事件，只看當前元素包含的事件
- Framework listeners 去掉框架的事件
3 . Properties
元素包含的屬性
properties
如圖包含了多個屬性分類，點開可以看到的才是具體的屬性，這些所有的屬性都可以通過dom.xx調用
注：Accessibility 貌似用來支持h5的視聽障礙
本篇文章就到這裡，下篇繼續剩餘的菜單，歡迎大家補充和提問~
【關注一下不迷路】
html css html css javascript html javascript css javascript css
分享到:
閱讀更多 全棧前端 的文章
