chrome 調試動畫方式

前言

我沒在做web開發時，有時候會因爲頁面的性能調試發愁，今天就記錄一下chrome怎麼調試web重繪、動畫等功能

正文

打開流程

1. 打開chrome的控制檯
   

2. 按esc鍵，打開二級控制檯。

3. 找到Rendering標籤， 如果沒有點擊二級導航欄左側三個點，在彈出框中找到並打開
4. 在具體某個選擇框中打對鉤即可

具體功能介紹

1. 想看哪些標籤正在被重繪【Paint flashing】
   

勾選這個選項，然後刷新頁面即可看到效果

2. 想看頁面刷新頻率
   
   勾選這個，就會彈出這樣的提示框

結尾

你可能知道Chrome有DevTools。你可能不知道的是一個小小的捷徑(Mac上的Shift+Cmd+P，PC上的Control+Shift+P)。在DevTools打開一個搜索欄命令菜單。

搜索框中輸入： FPS meter

搜索框輸入：paint flashing