10个Chrome基础使用技巧

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

1、Ctrl+P快速切换文件

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

谷歌1.png

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

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

谷歌2.png

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

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

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

谷歌3.gif

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

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

谷歌4.gif

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

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

谷歌5.gif

6、颜色选择器

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

谷歌6.gif

7、改变颜色格式

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

谷歌7.gif

8、改变元素状态

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

谷歌8.png

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

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

谷歌9.png

10、模拟手机设备

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

谷歌10.png

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

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

二维码.jpg

原文地址:https://www.cnblogs.com/superlizhao/p/8645606.html