提升浏览器开发者工具技能的 9 种方法

1. 颜色

2.动画

3.阴影编辑器

4.命令工具

5. 覆盖范围

6.渲染

7.模拟黑暗模式

8.传感器

9.快捷键:)

这是浏览器在开发 Web 应用程序时可以为您提供帮助的惊人功能的列表。

1. 颜色

好奇🤔，hex这个rgb值的代码是什么？Chrome 提供了一种简单的方法来获取它。打开DevTools并shift + click点击颜色（色板）即可查看其对应的hex | rgb | hsl值。

2.动画

想知道如何调整动画吗？使用开发者工具中的动画编辑器。

您可以从一组预定义的函数中选择动画时间。

您可以放慢动画速度并播放它来了解/调试它的工作原理。

3.阴影编辑器

阴影比较棘手。使用内联编辑器来处理主框/文本阴影。

4.命令工具

Chrome 提供Command tool访问文件/操作的功能。使用中的++Cmd来打开。ShiftPDev toolsCommand tool

5. 覆盖范围

检查您的 CSS 覆盖率。

打开命令工具并搜索coverage。

6.渲染

想知道页面中的 FPS、布局/绘制。

打开命令工具并搜索rendering。

7.模拟黑暗模式

使用模拟器在暗模式和亮模式之间切换。

8.传感器

如果您正在创建需要基于位置的用户体验的应用程序，那么您可以使用传感器来改变位置。

要打开传感器，请按cmd+ shift+ p，然后键入传感器以打开show sensors。

9.快捷键:)

cmd使用+直接转到地址/搜索栏L。

ctrl使用+浏览标签页tab

使用标签页编号ctrl+导航标签页num-key。使用+

转到最后一个标签页。使用+ 转到最后一个标签页。ctrl1
ctrl9

讨论🐦 Twitter // 💻 GitHub // ✍️ 博客

如果你喜欢这篇文章，请点赞或者留言。❤️