本篇文章给大家分享 10 个 Chrome 开发人员必须掌握的技巧和工具. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
1. 模拟慢速网络和慢速设备
我们可能习惯了在城市的网速, 那是杠杠的, 并不意味网速在中国哪个都一样的, 在一些偏远地方, 网速依然慢的可怜, 所以有时候我们所做的产品是需要考虑网速慢的情况的, 那怎么模拟呢?
打开谷个浏览器的 performance 选项卡, 然后单击右上角的齿轮图标就可以看到 Newwork 和 CPU 的模拟情况.
2. 颜色选择器
单击表示颜色的小方块, 弹出颜色选择器.
启用颜色选择器后, 可以将网页悬停并使用颜色选择器来获取该像素的颜色.
弹出颜色选择器的小方块还有快捷键按住 Shift 并单击以更改颜色格式.
3. Audits
Audits(审计), 这个功能其实一直存在, 只不过在 Chrome 60 之后, 发生了翻天覆地的变化: 引入了 Google 开源的另外一个项目: LightHouse.
Audits 主要从 5 个方面来给网页打分, 最终会生成一个 report:
4.Pretty Print(显示可读代码)
我们知道许多网站都对 JavaScript 代码进行了压缩, 但这对开发者和学习者来说, 读起来很费劲, 谷歌提供一个功能给我们, 可以更好查看压缩文件.
我们点击下方的大括号{}图标, 即可使用 Pretty Print 功能了
5. 快速文件切换器
如果你知道文件名, 则不必打开 "Sources" 选项卡. 只需按 cmd/ctrl + p, 然后输入你想查找的文件名, 接下按下回车就 ok 了.
6. 响应模式
我们在桌面和移动设备上开发网站, 通常我们倾向于最初的桌面体验. 但是这与越来越多的用户使用移动设备访问网络的趋势相脱离. 为了提高网站的用户体验, 我们需要准确地知道网站在移动设备上的效果. Chrome 开发者工具包里加入了手机模拟器特性, 帮助我们测试:
对于大多数人而言, 大多数时间只需要通过不同的屏幕尺寸和方向查看他们的网站即可.
7. 屏幕截图
- ,F12
- ,[ctrl+shift+p]
3, 输入 "capture"
4, 选择以下任意
capture full size screenshot"[整个网页]
capture node screenshot"[节点网页]"capture screenshot"[当前屏幕]
8. Extensions
我们可以将扩展程序安装到 Chrome 开发者控制台. 许多框架都有自己的扩展名, 以简化其技术 (vue,Angular,React 等) 的开发. 这是 Featured DevTools 扩展的列表 https://developer.chrome.com/extensions/devtools .
9. Coverage
Coverage 是 Chrome 开发者工具的一个新功能, 从字面意思上可以知道它是可以用来检测代码在网站运行时有哪些 JS 和 CSS 是已经在运行, 而哪些 JS 和 CSS 是还没有用到的, 如图, 这是我在打开 csdn 网页时, 所显示的已运行和尚未运行的代码情况.
如何打开 caverage 前提: Chrome 浏览器的版本必须是 59 或以上, 在 ctrl+shift+i 快速打开 devtools, 点击右上角的... More tools 有个 Coverage.
那这个新功能有什么作用呢?
如上图所示, 最右边显示的是我们加载的 CSS 和 JS 文件数量, 红色区域表示已运行的代码, 而青色表示已加载但未运行的代码. 可用来发现页面中尚未用到的 JS 和 CSS 代码, 你可以为用户只提供必要的代码, 这样就可以提升页面的性能. 这对于找出可以进行拆分的脚本以及延迟加载非关键脚本来说非常有用.
10. 实时跟进新功能
Chrome 的开发工具会不断更新, 它会在 What's New In DevTools 上发布更新的视频, 我们可以时不是去看看, 了解一些新出来的功能, 这样我们就能实时知道谷歌的一些好用的功能了.
本文转载自: https://segmentfault.com/a/1190000022134641
来源: http://www.css88.com/top/17936.html