你真的會用 Chrome-devtools 嗎？

相信大多數前端職業生涯的開始都是從 F12 (Windows) 或 Cmd+Opt+I (Mac), chrome調試工具的使用能很大程度的體現一個前端工程師的能力，因此打算寫一篇我所瞭解使用的 devtools 調試方法

1. 打開全局命令菜單

Cmd + Shift + P（Mac）或Ctrl + Shift + P（Windows，Linux）打開命令菜單，chrome有挺多入口很深的功能均可以在這裏找到

2. 快速全局搜索

接手項目時經常出現只記得api或者某個id殊不知道具體靜態資源的狀況這個時候就須要全局搜索

... -> More tools -> Search

這時就出現了全局搜索，這個全局是針對全部Source下的資源的，咱們在搜索框中輸入想要搜索的api，點擊搜索結果就能跳轉到對應的js下

3. source中js行數快捷跳轉

4. 截屏長圖

5. Alt + Click 展開當前dom所有子節點

6. 查看資源在何處加載

7. css搜索器搜索dom

8. chrome加載資源圖片轉base64

9. 多光標編輯

10. 按住alt局部選中

11. 關於performance的用法

我的感受 Chrome運行時性能瓶頸分析 這篇算是寫的比較好的性能調試介紹了，之後會也會專門寫一篇性能調試

工具使用方法參考：

Chrome工具中文

Chrome開發者工具

天天一點dev技巧