10个Chrome基础使用技巧

　　Chrome是前端开发中最常用到的一个浏览器，本文整理了Chrome的10个基础使用技巧（Chrome中有很多和Sublime Text2类似的快捷键）。如果有其它本文未提及的实用的小技巧，也可以留言告诉我们。

1、Ctrl+P快速切换文件

　　当项目中文件很多时，可以在控制台的Sources面板下，用Ctrl+P（cmd+p on mac）,快速搜寻和打开你想找的文件。

2、Ctrl+F在源代码中搜索

　　在控制台的Elements面板下，按Ctrl+F，可以在当前页面搜索特定的代码。

　　在控制台的Elements面板下，按Ctrl + Shift + F (Cmd + Opt + F)，可以在页面已经加载的文件中搜寻一个特定的代码。

3、Ctrl+G快速跳转到指定的行

　　在控制台的Sources面板下，Ctrl + G，(or Cmd + L for Mac)，然后输入行号，快速跳转到指定的行。

4、{}格式化凌乱的源码

　　Chrome控制台有内建的美化代码功能，可以返回一段最小化且格式易读的代码。Pretty Print的按钮在Sources面板的左下角。

5、Ctrl + D选择下一个匹配项

　　在控制台的Sources面板下，选中特定代码，按下Ctrl + D (Cmd + D)，当前选中的代码的下一个匹配也会被选中。

6、颜色选择器

　　在控制台的Elements面板下，当在Styles样式编辑中选择了一个颜色属性时，你可以点击颜色预览按钮，就会弹出一个颜色选择器。当选择器开启时，如果你停留在页面，鼠标指针会变成一个放大镜，让你去选择像素精度的颜色,选中之后，对应的颜色属性会改变。

7、改变颜色格式

　　颜色有很多种表示方式，比如rgb,hsl,十六进制表示方法等。按住Shif键，再点击颜色预览按钮，可以在rgba、hsl和hexadecimal来回切换颜色的格式。

8、改变元素状态

　　在控制台的Elements面板下，在Styles样式编辑中可以模拟元素的不同状态，例如hover和focus等，方便我们查看不同状态下元素的样式；还可以动态添加类名来调整样式。

9、查看本地文件夹和文件

　　把整个文件夹拖到Chrome浏览器，可以查看文件夹的内容，方便批量浏览文件，节约很多时间。

10、模拟手机设备

　　做移动端项目时，会用到谷歌浏览器的模拟设备功能，可以模拟手机的型号、尺寸、网络状态、横竖屏等。

分享一个公众号-----前端麻辣烫 ，一个专注于前端技术学习与交流的公众号~

微信搜索“WebSnacks”，或者扫描下方二维码。