多年来,Chrome 一直是我的默认浏览器,但我一直在想,仅仅熟悉一个浏览器已经成为一个问题。 如果我倾向于为单个浏览器设计,那么我将开始假设这些功能对每个人都可用。 然后,我可能会错过浏览器之间重要的差异,这些差异可能会在代码库中引入错误或影响我设计功能所花费的时间。
我开始称这个问题为“Chrome 偏见”,在过去的一周里,我决定通过切换到 Firefox 来解决这个问题。 这样我就可以弄清楚最流行的网络浏览器之一的新功能。 但是! 在我进行这个小实验的时候,我发现 Firefox 有三个功能,如果你像我一样患有极端的Chrome 偏见,你可能不知道这些功能。
我认为这些 Firefox 开发者工具功能非常不错
开发者工具主题
我不知道你可以在 Firefox 中设置开发者工具的主题。 当我想在晚上做一些事情时,这对我特别有用,并且可以将主题配置为深色

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

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

我可以看到,在较大的代码库中,这将非常有用,因为你可能会意外地声明了大量不一致的字体。
性能选项卡
在点击“性能”选项卡并刷新页面后,你会看到一个瀑布,显示所有请求的资源。 但你是否知道你也可以以图形形式查看这些数据? 这是它的工作原理

这是一个识别性能更大问题的绝佳工具——也许你有一个巨大的样式表被浏览器请求,从这里你可以更快地看到问题的规模。
总结
问题是:我们对其他浏览器的工作方式体验得越多,我们对不同用户如何体验我们网站的了解就越多。 在这种情况下,了解开发者工具的不同之处很有用,但了解不熟悉的浏览器的外观和感觉也是一种启迪。
在实验的下一步中,我想尝试更多移动浏览器,因为我认为它们之间的差异比桌面浏览器应用程序之间的差异更大。
你最近从非常用浏览器中学到了什么技巧?
我曾经有一个名为“为什么我更喜欢 Chrome”的博客草稿。 我可能在 2-3 年前开始写它。 在过去六个月左右的时间里,我删除了它。 不是因为我不再喜欢 Chrome(我也有 Chrome 偏见),而是因为我提到的要点都不强,而且当时 Chrome 独有的许多功能现在已经不再那么独特了(比如拥有出色的 DevTools)。
Chrome 的一个相当大的优势是“每个标签都是一个单独的进程”。 因此,它们可以冻结,而不会强制所有其他标签也冻结。 至少,我认为这仍然是 Chrome(或 Blink)独有的。 那不是 WebKit/Blink 分裂的主要原因之一吗? 而且 Firefox 已经说过他们正在努力实现这个功能……我认为? 我可能落后于这些信息。
为了数据起见……以下是 CSS-Tricks 上过去 30 天的浏览器使用情况
是的,你有点落后了。 Mozilla 正在为 Firefox 的用户群推广他们的 Electrolysis(或 e10s)多进程架构。 从那些没有安装浏览器扩展的用户开始(这些扩展可能会影响系统的全新多进程性质)。
Firefox 现在也拥有更好的标签管理; 它的书签是首屈一指的(多维标签),最后要诚实地说,这是一个面向网络专业人士的网站。 我们在客户网站上看到的数字各不相同,一些没有受过良好教育的用户仍然坚持使用建筑和体力劳动行业的库存浏览器。 时尚客户似乎将 Safari 作为首选浏览器,Chrome 排名第五,但更有趣的是,我们在过去 2-3 年中观察到移动到桌面的行为趋势,其中 2/3 的用户在移动设备上浏览,然后在桌面/电脑上完成转换。
为了添加另一种观点,这是我们公司(公共部门)网站过去一个月的统计数据。 我们的大部分流量(约 60%)来自阅读新闻,其余来自访问服务和建议。
在过去几年中,Firefox 的使用率一直在下降。
糟糕,我的回复中缺少图片
Chrome 35%
Safari 27%
Safari(应用内)21%
IE 8%
Firefox 3%
Edge 2%
首先,内容很棒。 虽然 Chrome 可能是 X 数人的首选浏览器,但这没关系。 那些人中的 Y 数人不是开发者。 我讨厌 Chrome 的 F12,如果我需要深入了解页面,我会一直使用 Firefox。 有时候,你将在 Firefox 中开发,然后在 Chrome 中打开它,结果就乱七八糟了,Chrome 的优势在于它会指出 Firefox 为你修复了哪些问题。 因此,你必须回去让 Chrome 满意,因为它的“市场份额”。 不过,最终,Firefox 拥有更好的开发工具。 我在 Firefox 还是“Phoenix”(大约在 2001 年?)的时候就开始使用它了。 我没有回头。 因此,如果我们谈论浏览器偏见,我的偏见是 Firefox。
但是……Chrome 也拥有深色开发者工具主题 :)
如果存在 Chrome 偏见,我可能患有 Firefox 偏见。 这就是为什么我前几天安装了 Opera(但还没有真正使用它)。 在 Chrome 和 Firefox 之间,我没有看到任何杀手级功能。 不过,我喜欢后者不是由任何已知的巨头开发的。 此外,重启只会加载固定标签和焦点标签,而不是所有标签。
我真不知道为什么每个人都那么喜欢 Chrome。
我一直无法从 Firefox 切换到 Chrome(我尝试过,好几次),大约在一年前半,我切换到 Safari,现在几乎 100% 的时间都在使用它,除了测试。
对我来说,Safari 总是感觉比其他浏览器更快——包括 Chrome。 不过,这没有任何科学依据。 也就是说,我尝试过从 Chrome 切换到 Safari,但从未成功——主要是由于开发者工具和一些对我来说非常重要的扩展。
Chrome 对我来说最大的不同之处在于它易于使用多个人资料。 Firefox 也支持多个人资料,但经过这么多年,仍然需要一个扩展才能使用它,而且它仍然很笨拙。 此外,Chrome 还支持 Google 工作和电子邮件的离线支持。 但是,Firefox 有更好的书签,它在桌面上的速度似乎更快,Chrome 每个标签一个进程的缺点是高内存使用率,Firefox 的 Android 版本支持附加组件和一个很棒的阅读模式,并具有深色模式。 现在我已经从 Mac 切换到 xubuntu,Firefox 是默认浏览器,我使用它更多了。
Chrome 也确实有一个深色主题,但那是最近才加上的。Firefox 在这方面肯定更早。
我的开发流程是先用 Chrome 进行开发,然后切换到 Firefox 以了解跨浏览器兼容性。Firefox 的开发者工具无疑很棒,并且与 Chrome 非常相似,这使得它成为我非常喜欢的备用浏览器。
有趣的是,IE 的流量仍然领先于 Edge(双关语)。即使是在以开发者为中心的社区中也是如此。我想知道 IE 是否代表了更多非美国用户,或者可能是来自大型公司的访问者?
我注意到,多年来我合作的大多数人都有“Chrome 偏见”。事实上,我将 Chrome 用于大多数个人和工作活动,但我几乎总是在 Firefox 中进行开发。部分原因是,其他人都在使用 Chrome。它允许我发现 Chrome 可能错过的或影响不同的其他问题。帮助我们在早期进行频繁的质量保证。
我目前合作的同事都没有使用 Edge/IE 作为日常驱动程序,但过去确实如此,这也有助于我们在早期发现问题。
我对 FF 开发者工具最大的问题是,调试比 Chrome 更难。我无法在某一行中断并检查 DOM。而且 FF 中的源映射支持也不好。
我承认我也偏向 Chrome。
情况并非一直如此,我过去对 IE 和 Firefox 非常了解。问题是,我对 Chrome DevTools 感到非常舒适,以至于切换起来很困难。我可以用 Firefox、IE/Edge 和 Safari 进行调试和分析,但在 Chrome 中,我可以做更多的事情。
Chrome 几乎总是处于新技术和标准的前沿,这也没有帮助。幸运的是,如今,Chrome 中能正常运行的东西,通常在其他浏览器中也能正常运行。手动检查总是必要的,但对于我怀疑的大多数事情,caniuse.com 和 MDN 都是我的朋友。
顺便说一下,Chrome 也添加了深色主题(我们只有两个主题,我想我们可以使用任何我们想要的主题),以及字体分析,虽然不如 Firefox 的好。
最好的开发工具仍然来自 Opera,名为 Dragonfly。不幸的是,他们几年前就停止了对它的开发和维护,现在所有希望其某些功能能进入 Blink 的希望都破灭了...
我没有任何开发偏见,因为我始终在各种浏览器中检查我的工作... 除了 IE/Edge。我通常会忽略 IE 和 Edge,仅仅是因为我运行的是 Linux,而微软没有为它构建版本。我的意思是,我并不想使用 IE 或 Edge,但我会偶尔加载虚拟机来测试一些东西。无论如何,我看到了很多 Chrome 偏见,老实说,这让人恼火,因为它让我想起了黑暗互联网时代 Internet Explorer 偏见。当然,Chrome/ium 偏见比 IE 偏见好 1000 倍,但供应商锁定很糟糕,无论供应商有多好。
我实际上更喜欢 Firefox 而不是 Chrome,仅仅是因为书签系统。正如 @Lewis Cowles 所说,Firefox 的书签系统首屈一指。与之相比,Chrome 的系统简直是可笑。我发现唯一在这一点上接近的浏览器是 Vivaldi,但它们的导入工具很糟糕,而且没有导出工具,因此它们还没有达到可以切换的程度。Vivaldi 有潜力,因为他们表示计划改进这些功能。
总的来说,我注意到与 Firefox 相比,Chrome 在渲染页面时更快,但在我看来,Firefox 具有更好的基础设施工作流程,这主要归功于书签系统。(现在 Tab Groups 被删除了,但我仍然使用它和一个插件。)
但是,在 Linux 上,你应该也无法在 Safari 中进行测试?对于 Edge,你至少可以获取虚拟机,虽然不太好,但总比没有好。我一直都在 Windows Firefox 上进行开发,但我实际上也喜欢 Edge,我(私下)使用它作为我的主要浏览器。
调试,特别是性能调试,有时在 Edge 中甚至感觉更容易。但有时我会查看所有 3 个(C,FF,E)中的错误消息,因为它们都有不同的,有时有用,有时无用的消息。
遗憾的是,在 Windows 上工作时,无法测试 Safari :(
我喜欢 Chrome,但我最近开始使用 Firefox 的开发者工具。我喜欢 Chrome 与用户之间巧妙的互动,即使你没有互联网连接,它也有恐龙游戏让我们消磨时间。
Chrome 和 Firefox 都非常好。但我注意到,这里没有人谈论非主流的浏览器。它们可能是基于 Chrome 的,也可能不是,比如 Vivaldi、Brave、Maxthon、Comodo IceDragon 等等... 尝试不同的新事物总是有好处的。
我在 Firefox 中发现的一个很酷的功能是 3D 视图。它确实有助于你直观地了解 DOM 的布局。但是,它似乎已经过时,并且从 Firefox 47 开始已被删除。[Tilt 3D(https://addons.mozilla.org/en-GB/firefox/addon/tilt/)] 显然是它的合适替代品。不确定 Google Chrome 是否有类似的扩展程序。
我过去是 Chrome 用户,但几年前我切换到了 Firefox。Chrome 简单地消耗了太多资源... 主要是因为我是一个喜欢打开很多标签的人,超过 100 个标签很常见!:p
我可能应该给 Chrome 一次机会,至少是用来测试我的代码、查找错误等等。
谷歌确实有发布有问题的“东西”的倾向,我更喜欢像 Firefox 这样坚如磐石的“工作马”,而不是闪闪发光的 Chrome。
我忘记了另一个更重要的理由,为什么我更喜欢 Firefox 而不是 Chrome:隐私。
我使用谷歌制作的浏览器有点不安,因为我无论走到哪里都会被追踪。
隐私、开源对我来说很重要。我喜欢有一个独立的浏览器制造商仍然在为正义而战的想法。我以前使用过 Opera,但它们被中国人收购了,出于同样的隐私担忧,我对此感到担忧。所以现在对于 WebKit,我使用 Vivaldi,因为它是由一些前 Opera 人员开发的。
好文章!我一直在做的一件事是将它添加到我测试任务的 browsersync 部分。
browser: ["firefox", "google chrome", "safari", "opera"]
我发现,当每个浏览器都自动为你打开时,忽略浏览器偏见有点困难。
我正好相反,我需要被提示才能查看 Chrome 中的东西。我使用 FF 回溯到 Firebug 时代,发现他们的开发工具感觉像是 Firebug 的精神继承者。我尝试过几次切换到 Chrome,但从未喜欢过他们的开发工具。这可能只是个人喜好,但我发现 CSS 样式检查器一直以来都比另一个更好。如果我需要 WebKit,我倾向于使用 Vivaldi。它比 Chrome 更性感,就这么简单。
谢谢!我已经安装了 Vivaldi,它似乎比 Chromium/Chrome 更性感。:)
我之前切换到 Chrome 进行前端开发,当时我发现他们的响应式预览非常准确,而 Firefox 的响应式预览没有那么准确。但我最近在 Firefox Developer Edition 中看到,他们也为他们的开发工具添加了类似的强大的移动预览选项(例如:模拟像素密度)!所以,当它发布到稳定版本时,我可能会跳回 FF。
FF 有 scratch pad 哦 :) 而且 Firebug(如果安装了扩展程序)附带一个多行控制台,非常方便。
Firefox 开发者工具有一个 Chrome 没有提到的好功能:我可以在 DOM 检查器中查看为元素分配的 JavaScript 事件行为。我必须在 Chrome 的 DOM 属性选项卡中深入挖掘才能查看哪些被挂钩,即使这样,我也必须知道我在寻找什么。
这是 Firebug 而不是 Firefox 的功能,但 Firebug 的 cookie 选项卡比 Chrome 的更人性化。
除了 Chrome 的“深色模式”外,DevTools Author 扩展程序 (http://mikeking.io/devtools-author/) 还为开发工具提供了 24 个开箱即用的主题。非常棒。
我喜欢 Firefox 的一件事是他们在检查器选项卡中的 Javascript 信息。当你点击元素旁边的“EV”时,它会显示有关应用于该部分的 javascript 的所有有用信息。我非常喜欢这一点。Firebug 也是使用 FF 的一个绝佳理由。当你查看页面的源代码时,FF 会以红色显示 HTML 中错误的不完整标签。我非常喜欢这个功能。
我个人不太喜欢 Chrome。但是,如果你经常进行移动端开发,那么不使用 Chrome 就太愚蠢了,因为它可以让你接近 Chrome Android 上的渲染效果。
同样,Safari 在我的 Macbook 上性能要好得多(电池续航时间显著提高),在 Safari 上进行开发可以让你接近 iOS(以及旧版 Android 浏览器)的渲染效果。
作为一款浏览器,Firefox 非常出色。我发现它在渲染/布局方面通常更接近规范,尽管这只是个人的观察。但是,它没有相应的移动平台,所以我并不经常使用它。如果我先在 Firefox 上进行开发,那么我需要做更多工作来让内容在 Chrome/Safari 上看起来正确。
不幸的是,我认为如果没有一个有说服力的平台让 Firefox 成为必需品,它将会走向没落。