• 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

  • 相关阅读:
    .Net Core实现下载多个文件并压缩打包
    VS上使用Docker调试编译net core项目时卡在 vsdbgvs2017u5 exits,deleting.
    spring boot actuator监控详细介绍
    数仓知识
    layui使用 弹窗 layer
    Spring配置数据源(连接池)
    Spring配置文件-引入其他配置文件(分模块开发import)&Spring相关API
    Spring配置文件-Bean标签配置
    事务的四大特征&事务隔离级别
    事务
  • 原文地址:https://www.cnblogs.com/superlizhao/p/8645606.html
Copyright © 2020-2023  润新知