簡評：Umar Hansa 在網(wǎng)站 Developer Tips 中發(fā)布了超過 150 個 GIF，展示如何使用 Chrome DevTools。對于大多數(shù) tips，基本可以在不到 30 秒內(nèi)完全掌握該功能，可以說是非常良心了。
Chrome 開發(fā)者工具（簡稱 DevTools）是一套內(nèi)置于 Google Chrome 中的 Web 開發(fā)和調(diào)試工具，可用來對網(wǎng)站進行迭代、調(diào)試和分析。
在這篇文章中，摘選了幾個最近比較受歡迎的 tips，更多的動畫演示戳：Developer Tips
CSS Coverage
Coverage 顧名思義就是代碼覆蓋率的意思，它使用動態(tài)分析（Dynamic Analysis）法來收集代碼運行時的覆蓋率，該功能同時適用于 JS 和 CSS：
不帶瀏覽器擴展的截屏實現(xiàn)
你可以直接捕獲整個頁面，或者頁面的部分內(nèi)容：
線路分析
此功能顯示一行 JavaScript 代碼執(zhí)行多長時間。如果使用 JavaScript 框架/庫，還可以對該代碼進行配置，并調(diào)查使用該框架是否有足夠的優(yōu)勢：
Timeline History
能夠持續(xù)監(jiān)控網(wǎng)頁隨時間的變化狀態(tài)，在網(wǎng)站的開發(fā)階段特別有用：
更多技巧：Developer Tips
原文鏈接：150 animated tips on Chrome DevTools
推薦閱讀：
