Chrome偵錯工具新增功能

HI~大家好
剛剛用Chrome在Debug網頁時發現F12後多了更新的提示，在這邊分享及整理新功能

重點整理:

• CSS and JS code coverage. 可以看出每支css檔跟js檔在網頁上的使用率(這功能超神)
• Full-page screenshots. 可完整的把整個網站快速截圖(用在SPA的網站很適合)
• Block requests. 可手動自行選擇取消載入的request.
• Unified Command Menu. 執行命令或開啟檔案都統一由新的介面去操作.

功能簡介:
1. CSS and JS code coverage
從下圖的清單可以看到每支JS跟CSS的後面多了一個長條圖，紅色的部分就是那隻檔案沒使用到的部分，綠色就是使用到的部分，點下去後可以進入該檔案看原始碼，會標示紅色(未使用的區段)跟綠色(有使用到的區段)

使用方法:Windows、Linux使用者F12開啟開發工具後，按下Ctrl+Shift+P(叫出命令列的快捷鍵，請記住)，輸入coverage後選擇Show Coverage，之後重整網頁跟按下錄製，就大功告成了!

2. Full-page screenshots
當一個網站切換成行動裝置瀏覽時網頁會變很長(有RWD的話)，要一次把整個網站全部截圖是非常麻煩的事情，但用這個新功能可以快速把整個網站截圖下來，還幫你自動下載圖片

使用方法:Windows、Linux使用者F12開啟開發工具後，按下Ctrl+Shift+P(叫出命令列的快捷鍵，請記住)，輸入screen後選擇Capture Full Size Screenshot

3. Block requests
說真的我覺得這功能有點雞肋，不過在Debug時或許還是有它方便的地方，主要是可以幫助開發人員測試某些JS沒載入成功的情況(e.g.某js的CDN掛了的情況)

使用方法:在資源清單選擇要Block的資源，就這樣(不懂的話再看一次影片)

4. Unified Command Menu.
把Command Menu介面做了修改，如下圖