zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    python Database Poll for SQL SERVER
    SQLAlchemy表操作和增删改查
    flask动态url规则
    flask配置管理
    一个Flask运行分析
    Function Set in OPEN CASCADE
    Happy New Year 2016
    Apply Newton Method to Find Extrema in OPEN CASCADE
    OPEN CASCADE Multiple Variable Function
    OPEN CASCADE Gauss Least Square
  • 原文地址:https://www.cnblogs.com/superlizhao/p/8645606.html
Copyright © 2011-2022 走看看