Chrome 浏览器 必知必会的小技巧
来源:互联网 发布:房产中介端口推荐 编辑:程序博客网 时间:2024/06/05 15:39
(点击上方蓝字,快速关注我们)
来源:FEWY
https://segmentfault.com/a/1190000012143176
如果好文章投稿,点击 → 了解详情
说明
这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。
这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏览器的版本。
快捷键
快捷键比较多,这里挑出几个常用的说一下
最后会给出一张比较完整的快捷键的表
下列快捷键可以在所有 开发者工具 面板中可以使用
在Elements 面板中使用的快捷键
在Styles 边栏中使用的快捷键
在控制台中使用的快捷键
Ctrl+清除控制台Ctrl+LCmd+K、Opt+L多行输入Shift+EnterCtrl+Return区域截屏
选取页面中的一部分,保存为图片
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、选择左上角的元素选择按钮,图标颜色变为蓝色即表示选中了
3、Windows 下按住 Ctrl,Mac 就按住 Command,然后点击鼠标左键在页面选择区域即可,松开鼠标后,截图自动下载。
4、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示
节点截图
选中页面中某一元素,保存为图片
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、选中任意元素节点
3、打开命令工具
使用快捷键 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)
4、点击Capture node screenshot,或者输入这行中任意的关键字,比如输入node,也会出来这个选项,然后点击这个选项,图片会自动下载。
5、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示
截全屏
保存完整网页为图片
第一种方式
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、打开命令工具
使用快捷键 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)
3、点击Capture full size screenshot,或者输入这行中任意的关键字,比如输入full,也会出来这个选项
4、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示
第二种方式
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、选中 切换开发模式按钮,图标颜色变为蓝色即表示选中了
3、点右上方的三个 小点,点击Capture full size screenshot,图片会自动下载
拾色器
在Styles边栏 点击任意颜色的小色块,就可以弹出颜色选择器
1、颜色选择区域。
2、吸管。
3、复制到剪贴板。将显示值复制到剪贴板。
4、显示值。颜色的RGBA,HSLA或十六进制表示。
5、调色板。单击其中一个方块将颜色更改为该方块。
6、色相。
7、透明度。
8、显示值切换器。在当前颜色的RGBA,HSLA和Hex表示之间切换。
9、调色板切换器。
快速添加样式规则
1、在Styles 边栏,鼠标放在每一小块样式规则上,右下方都会有三个小点
2、鼠标放在这三个小点上,会出现5个小图标,每个小图标都有作用
3、他们从左到右分别代表
添加 text-shadow
添加 box-shadow
添加 color
添加 background-color
插入样式规则
增加移动设备
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、点击右上方的三个小点,然后选择Settings
3、选择Devices,然后在需要添加的设备前面打上勾就可以了
总结
这些小技巧,很简单,希望对大家有所帮助,不过对于有办法,有时间的朋友还是建议去官网看看吧,毕竟那里才更加全面。
觉得本文对你有帮助?请分享给更多人
关注「前端大全」,提升前端技能
淘口令:复制以下红色内容,再打开手淘即可购买
范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)
近期,北京地区正常发货,但派件时间有所延长。
- Chrome 浏览器 必知必会的小技巧
- Chrome 浏览器必知必会的小技巧
- Chrome 浏览器必知必会的小技巧
- Chrome 浏览器 必知必会的小技巧
- Chrome 浏览器 必知必会的小技巧
- 简单说 chrome浏览器 必知必会的小技巧
- 简单说 chrome浏览器 必知必会的小技巧
- Chrome浏览器实用小技巧
- Chrome浏览器F12开发者工具的几个小技巧总结
- Chrome浏览器F12开发者工具的几个小技巧总结
- 谷歌(Chrome)浏览器调试JavaScript小技巧
- 谷歌(Chrome)浏览器调试JavaScript小技巧
- Opera浏览器导出收藏到Chrome,和几个Chrome的一些小技巧
- chrome的一些小技巧
- 关于Chrome浏览器的一些使用技巧
- Chrome浏览器使用技巧
- chrome浏览器使用技巧
- chrome浏览器使用技巧
- AWS深度学习摄像头,将对机器学习产业有何影响?
- 意见征集,世界AI智商评测量标准2018年新版讨论方案
- 浅谈组件增强
- 计算距离
- hadoop的HA高可用机制配置搭建
- Chrome 浏览器 必知必会的小技巧
- 如何写好.babelrc?Babel的presets和plugins配置解析
- 前后台交互
- 关于反爬虫,看这一篇就够了
- 随笔
- Android Studio导入第三方库SDK(jar)的方法
- Java 深入学习(9) —— 针对接口编程,而不是针对实现编程
- python实现简单线性回归
- 聚焦移动办公、CRM、HR服务领域——企业服务三会成功召开