本人是一位沒出實習期的前端小菜鳥一枚，這幾個月發現了Google Chrome Devtools的易用性非常高的小功能和小細節 特意分享給大家。歡迎大家收藏+點贊。新人需要鼓勵哈哈
內容和圖片均為原創，未經許可不得轉載！！
Element
1. styles內 懸浮樣式名可以高亮符合樣式名的所有元素（如圖）
這個功能還是比較有用的。適用於檢視自己寫的樣式到底用在了哪些元素上。方便看到樣式是否起衝突
2. 快速調節樣式的數值（如圖）
tip：方向上下鍵就可以調整樣式數值 再也不用靠猜了
3. 對於字型顏色，背景顏色等需要用到色值的，可以直接在控制檯進行取色或編輯（如圖）
這個不僅可以手動取色，還可以再次取網頁內其他元素的顏色
4. 用工具模擬css系列操作（如圖）
這個比較有意思....有些滑鼠懸浮的樣式，滑鼠移出就沒有了。對於解決無法停留儲存樣式的問題，這樣做還是很簡單的。而且便於操控
5. 圖形化CSS動畫編寫（如圖）
這個我具體沒用過哈....因為很少寫動畫....但是看起來可以圖形化調整運動曲線。比較有意思
6. CSS陰影圖形化編寫
這個可以圖形化調整陰影的XY偏移度，模糊程度，擴散程度
7. 快速檢視選中元素的資訊（如圖）
這個有點意思，，之前大家在做一些業務時，不少情況下需要console.log一下元素。看看他的屬性。還可以看到選中元素的子元素，高度等等
Console
1. 輸出內容過濾器
這個可以快速輸入關鍵字 查詢你想要的console。是否支援正則自測
2. Console優先順序篩選
這個可以快速篩選console的優先順序，看到你想看到的除錯資訊
3. Console內的其他工具
這裡麵包含了“除錯資訊帶時間戳”“顯示XMLHttpRequests請求情況”等等。請自測
Network
技巧
這裡麵包含了“隱藏data開頭的小圖片連結”，“開啟離線模式”，“對頁面限速限制延遲”等一系列功能
Vue DevTools（其他框架開發者請略過）
1. 快速定位元件的相對定位位置和dom樹位置
如圖 不多說
2. 快速檢視元素的元件名 並定位元件樹位置
如圖
Security
可以看到頁面載入以來所有請求的domain（不是hosts更正一下）
更多工具
請如圖尋找 我要開始了咳咳
Animations
開啟這個元件，觸發頁面動畫後會出現如圖上。可以控制動畫速度，攔截動畫播放，手動拉動動畫進行慢速播放。
Change
這個非常有用啊啊啊啊啊啊啊。尤其是你在頁面修改css後，回過頭就忘記修改了哪一些......這個工具可以看到頁面載入以來所有你的臨時手動修改
Network conditions
1. 基本操作
功能如圖
2. 對頁面進行限流（使用系統預設）
我相信大家都能看懂吧....這不用我說吧...
3. 對頁面進行限流（使用自定義）
點選上一張圖的 "Add" 後，點選本章圖的“Add custom profile”就會出現上圖的情況 根據實際情況調整~~
Quick source
在這裡面寫程式碼 邊寫邊生效~~~
Rendering
這裡是各種監視器的地方，包括fps幀率監視器。
做HTML5/移動端遊戲開發必備~~可以實時看到FPS，GPU的Memory佔用~~
Search
輸入內容，全域性搜尋（所有載入的檔案內容）
Sensors
這個可以模擬當前裝置的位置，還可以模擬手機水平感測器引數。只需要拖動圖中的手機就好