chrome devtools tip(1)--調試僞類

開發中咱們常常遇到，添加些focus，hover事件，樣式，但當咱們去打開 chrome devtools，浮動上去的時候，而後準備去改變樣式的時候，結果因爲光標移動了，樣式不見了，很是不方便調試，其實 chrome 調試工具給咱們提供了很方便的辦法

你把 鼠標移動到某個須要調試的 元素上面去，而後，右鍵 選擇force state 選擇對應的僞類，就會觸發對應元素的 僞類，用來，對應的僞類的樣式效果就出來了，而後你就能夠去改變樣式，而不受光標的影響，調試鼠標懸停在元素上面的樣式

同時在 style 面板的右上方會出現一個小提示器，也很是方便

目前支持 active, focus, hover，visited ，focus-within 這個幾個僞類

前面幾個你們都很熟悉，focus-within 見到用的人很少，focus-within 和 focus 的差異是 focus 是當前元素處於 focus 下的樣式。 focus-within 指得是 子元素 處於 focus 下時，該元素的樣式，具體能夠看 張鑫旭的文章 www.zhangxinxu.com/wordpress/2…

這個小知識你學會了麼，學會了，能大大提升本身日常開發體驗

若是你喜歡也能夠關注個人 公衆號 「chromedev」