Chrome开发工具必需知道的技巧

1， 快速切换文件

当开发工具打开后，快捷键ctrl+p打开文件

2，在源代码中搜索

希望在源代码中搜索，即在页面已经加载的文件中搜索一个特定的字符串，快捷键是ctrl+shift+F，这种搜索方式还支持正则表达式。

3，快速跳转到指定行

在source标签中打开一个文件之后，按ctrl+G，然后输入行号，就可以跳转到文件中的任意一行。

另一种方式是ctrl+o,输入：和行数，而不用去寻找一个文件。

4，在控制台选择元素

开发工具控制台支持一些变量和函数来选择DOM元素：

$()-document.querySelector()的简写，返回第一个和css选择器匹配的元素。例如：$('div')返回这个页面中第一个div元素

$$()-document.querySelectorAll()的简写，返回一个和css选择器匹配的元素数组。

$0-$4-一次返回五个最近你在元素面板选择过得DOM元素的历史记录，$0是最新的记录，以此类推

5， 使用多个插入符进行选择

当编辑一个文件的时候，你可以按住ctrl，在你要编辑的地方点击鼠标，可以设置多个插入符，这样可以一次在多个地方编辑。

6， 保存记录

勾选在console标签下的保存记录选项，你可以使开发工具里的console继续保存记录而不会再每个页面加载之后清楚记录。当你想要研究在页面还没加载完之前出现的bug时，将会很方便。

7， 优质显示

开发工具中有内建的美化代码，可以返回一段最小化且格式易读的代码。美化代码的按钮在source标签页的左下角。