10个Chrome基础使用技巧

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

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

Ctrl+F在源代码中搜索

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

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

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

{}格式化凌乱的源码

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

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

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

改变颜色格式

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

改变元素状态

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

查看本地文件夹和文件

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

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

始发于微信公众号： 前端麻辣烫