10个Chrome基础使用技巧

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> 10个Chrome基础使用技巧

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

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

10个Chrome基础使用技巧

Ctrl+F在源代码中搜索

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

10个Chrome基础使用技巧

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

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

10个Chrome基础使用技巧

{}格式化凌乱的源码

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

10个Chrome基础使用技巧

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

10个Chrome基础使用技巧

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

10个Chrome基础使用技巧

改变颜色格式

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

10个Chrome基础使用技巧

改变元素状态

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

10个Chrome基础使用技巧

查看本地文件夹和文件

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

10个Chrome基础使用技巧

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

10个Chrome基础使用技巧

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

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> 10个Chrome基础使用技巧


 上一篇
CSS编码规范之书写格式 CSS编码规范之书写格式
不同的人有不同的编码风格,但是为了写出更高效易读的代码,还是要遵守一定的规范的~ 这些规范是在团队开发过程中,集思广益总结出来的,不是很全面,如果你有更好的意见,不妨留言告知我们,我们一起打造一个良好的前端生态环境! CSS书写规范 1、简
2021-04-05
下一篇 
CSS编码规范之属性顺序 CSS编码规范之属性顺序
        写css代码的时候有一个好的书写顺序能够帮你节省很多时间,本文整理了被广大前端er接受的CSS书写顺序,如果你有更好的意见,不妨留言告知我们。 CSS书写顺序 CSS书写顺序一般遵从以下规则: 1. Display &a
2021-04-05