Chrome 偏见(以及在 Firefox 中发现喜欢的东西)

Avatar of Robin Rendle
Robin Rendle

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

多年来,Chrome 一直是我的默认浏览器,但我一直在想,仅仅熟悉一个浏览器已经成为一个问题。 如果我倾向于为单个浏览器设计,那么我将开始假设这些功能对每个人都可用。 然后,我可能会错过浏览器之间重要的差异,这些差异可能会在代码库中引入错误或影响我设计功能所花费的时间。

我开始称这个问题为“Chrome 偏见”,在过去的一周里,我决定通过切换到 Firefox 来解决这个问题。 这样我就可以弄清楚最流行的网络浏览器之一的新功能。 但是! 在我进行这个小实验的时候,我发现 Firefox 有三个功能,如果你像我一样患有极端的Chrome 偏见,你可能不知道这些功能。

我认为这些 Firefox 开发者工具功能非常不错

开发者工具主题

我不知道你可以在 Firefox 中设置开发者工具的主题。 当我想在晚上做一些事情时,这对我特别有用,并且可以将主题配置为深色

字体选项卡

Firefox 的字体选项卡可能并不新鲜,但对我来说确实是。 在最右边,你可以选择该选项卡,并查看你所选元素的类型信息

它不仅告诉你如何使用该 @font-face 规则,还告诉你从何处请求字体,这非常不错。 不过,我最喜欢的按钮是位于右下角的“查看页面中使用的所有字体”按钮。 单击它后,你就可以看到提供给页面的样式表中声明的所有字体族

我可以看到,在较大的代码库中,这将非常有用,因为你可能会意外地声明了大量不一致的字体。

性能选项卡

在点击“性能”选项卡并刷新页面后,你会看到一个瀑布,显示所有请求的资源。 但你是否知道你也可以以图形形式查看这些数据? 这是它的工作原理

这是一个识别性能更大问题的绝佳工具——也许你有一个巨大的样式表被浏览器请求,从这里你可以更快地看到问题的规模。

总结

问题是:我们对其他浏览器的工作方式体验得越多,我们对不同用户如何体验我们网站的了解就越多。 在这种情况下,了解开发者工具的不同之处很有用,但了解不熟悉的浏览器的外观和感觉也是一种启迪。

在实验的下一步中,我想尝试更多移动浏览器,因为我认为它们之间的差异比桌面浏览器应用程序之间的差异更大。

你最近从非常用浏览器中学到了什么技巧?