chrome developer tools tip，chrome开发工具小技巧

chrome-devtools-tip.md

chrome开发工具小技巧

chrome开发工具乃前端神器，基本上能够解决前端开发的大部分问题，不过为了更高的提高开发效率，下面这些小技巧你是否已经get√呢？

技巧一：快捷键

---

• ctrl + o: 定位文件（采用首字母匹配定位）
• ctrl + shift + o: 定位函数名（JS中）或选择器（CSS中）
• ctrl + g: 定位行
• ctrl + f: 文件内容搜索
• ctrl + shift + f: 跨文件内容搜索

技巧二：使用$方法和$0变量

---

• $()方法，类似jquery的$()方法，用于快速选择元素。
• $0，指代当前元素面板选择的元素，可以直接引用$0对当前元素快速修改，例如$0.contenteditable = true等。

技巧三：使用Snippets

---

还在为console面板输入多行JavaScript不方便（需要按住shift键换行）而吐槽吗？

最新版本的chrome开发者工具在Sources面板新增了Snippets功能，你可以新建Snippet，修改Snippet，设置断点调试，运行等，这些Snippet一般是一些辅助分析的调试函数等。