前端神器—Google Chrome Devtools細節詳解

本人是一位沒出實習期的前端小菜鳥一枚，這幾個月發現了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

這個能夠模擬當前設備的位置，還能夠模擬手機水平傳感器參數。只須要拖動圖中的手機就好

謝謝閱讀！但願你們都能靈活地用到開發中！