如何使用 Chrome 自带隐藏功能进行网页截屏

以前遇到手机网页截屏的需求,都得用手机来进行,但是手机的尺寸是固定的,如果要做到针对不同尺寸进行截图,就得换 N多手机进行,简直就是噩梦一般的存在。

在桌面浏览器环境下,虽然普通截屏问题通过系统工具或者各种插件得到了很好的解决,但是还是得额外付出很多成本,有时候找工具找的心累,且大多数工具对于滚动截屏支持一直不怎么好,滚屏截屏一直以来也是一个隐隐的痛。

转机来了,牛逼闪闪的 Chrome 浏览器让这一切变得超级简单,Chrome 能力及其强大(不多赘述),今天要推荐功能的是在 Chrome 的 Device ToolBar 展开模式下,右侧“更多菜单”隐藏有 Chrome 自带的截屏功能菜单,可以对当前有效展现窗口区域(注意不是浏览器外边框整个的大小)进行截屏,不仅可以截屏还可以进行“滚动截屏”,截屏后直接以图片格式下载到本地,这个隐藏功能瞬间低成本化解了网页截屏的的世纪难题!除非遇到特殊需求情况,否则以后基本就告别各种浏览器截屏插件了!

隐藏菜单:分别为“滚动截屏”和“当前屏幕截屏”功能菜单。

 

截图党的福音,拿走不谢!

截图演示 Mac Chrome 版本为 60.0.3112.113

Chrome 开发者工具可以还原被压缩的 JS/CSS 格式

作为当下及其普及的前端开发技术之一,为了减小文件大小,提升加载速度,很多网站的 JS 和 CSS 文件都经过压缩,但对于人类代码学习者来说却制造了重重障碍。幸好还有 Chrome Developer Tools!

Chrome  开发者工具中,在 Sources 面板中预览 JS/CSS文件时,使用左下角的「大括号 Pretty Print」{} ,点击一键还原 JS/CSS 样式格式为默认结构化格式,极大的方便了人类阅读,推荐给经常偷师学艺的同学们。

还原前:

还原后:

Chrome 浏览器断网后跳跃的小恐龙游戏

当电脑没有接入网络或者断开网络的时候,Chrome 浏览器自带的一个小彩蛋,在 Chrome 中打开任意网页,就会出现断网提示,这里会有一只小像素恐龙在提示最前方,此时敲击空格,小恐龙便开始跳起并进入一个类似超级马里奥的跳跃游戏,整个游戏只需用到空格键,操作使恐龙跳起来避开障碍物,如果在你断网的时候不妨拿着个游戏娱乐一下。
如图所述:

Android Chrome 浏览器卡片主题色

安卓系统中的 Chrome 早在 39 版本上就已经支持了主题色的 meta 标签;如果设置了相应的颜色,则在使用 Chrome 访问页面时,浏览器的地址栏部分均会跟随颜色设置发生变化,这样会让页面和浏览器框架的呈现方面更加融合,提升一致性,前端们应该关注这个细节,设计师也应该知道,并可以督促前端面改进页面呈现的细节。

效果如下:

很多大厂的页面都已经做过这个优化了,例如有:Facebook,DoubleClick,Dribbble,Bilibili等等。

更多信息请参考官方说明:走你