比较响应式设计浏览器

有很多这样的桌面应用程序，它们的目标是在不同的尺寸下同时显示您的网站。 因此，例如，您可以编写 CSS 并确保它在所有视口上都能正常工作，只需一眼即可查看。

它们都很相似。 例如，它们执行“事件镜像”，这意味着如果您在一个窗口或设备中滚动，那么所有其他窗口或设备也会滚动，包括点击、输入等。您还可以放大和缩小以同时查看多个设备，只是缩小了尺寸。 让我们看看是否可以找到任何区别。

Sizzy

• Windows、Mac 和 Linux
• “Solo” 计划起价 5 美元/月，他们还有更高级的计划。

有很多针对开发者的很酷的小功能，比如：

• 只需输入端口号即可关闭端口。
• 有一个通用检查模式，虽然您无法在 DevTools 中应用影响所有窗口和设备的更改，但您至少可以在所有窗口和设备中进行检查，当您单击时，它会激活正确的 DevTools 会话。
• 一键限速或离线。
• 一键关闭 JavaScript。
• 一键开启设计模式（例如，每个元素都有 contenteditable）。
• 用于隐藏图像、关闭所有样式、突出显示所有元素等的切换。
• 使用 Google 字体选项覆盖字体。

Responsively 应用程序

• Windows、Mac 和 Linx
• 开源（免费）

• 通用检查模式，用于选择正确的 DevTools 上下文。
• “禁用 SSL 验证”选项很巧妙，如果您在本地 HTTPS 中遇到问题。
• 一键切换深色模式。

Blisk

• 窗口和 Mac
• 免费，提供高级升级（10 美元/月）。 一些功能（如滚动同步和自动刷新）被列为高级功能，这让我觉得免费版本在某种程度上限制了这些功能。

• 自动刷新是一个很酷的想法。 您为特定文件夹中的特定文件类型设置“监视器”，如果它们发生更改，它将刷新页面。 我想大多数开发环境都有某种样式注入或热模块重载，但无论如何都有可用性，对于那些没有的开发环境来说很有用。
• 没有通用的 DevTools 检查器，但您可以分别打开 DevTools，它们确实有一个自定义的通用检查工具，用于显示元素的框模型尺寸。
• 有一个自定义错误报告屏幕。
• 您可以启用“浏览模式”以关闭所有花哨的设备功能，并将其用作半正规的浏览器。

Polypane

• Windows、Mac 和 Linux
• 免费，高级计划起价 10 美元/月。 注册将在一周内收到大量入门电子邮件（可以选择退出）。

• 它有其他浏览器的浏览器扩展，可以将您当前的标签弹出到 Polypane。
• 我认为通用检查模式是最无缝的，但它没有传播到各个窗口和设备之间的更改。 有人需要做到这一点！ 它确实有一个“实时 CSS”窗格，可以将额外的 CSS 注入到所有打开的设备中，这很酷。
• 它可以根据您自己的 CSS 中的断点打开设备——而且它确实有效！

Duo

• 它在 Mac App Store 上售价 5 美元，但其网站已离线，这让人感觉它已经死了。
• 它没有花哨的功能。顾名思义，它只是在两列中并排显示同一个网站，这两列可以调整大小。

Re:view

• 它不是一个单独的浏览器应用程序，而是一个浏览器扩展。 我有点喜欢它，因为我可以留在一个我已经很熟悉的规范浏览器中，该浏览器会定期更新。
• “断点”视图是一个很酷的想法。 我相信它应该在您的 CSS 中的断点处显示您的网站，但是，它似乎对我来说是坏的。 我不确定这是否是一个积极开发的项目。（我猜不是。）

所以？

什么，你想让我选一个赢家？

虽然我对 Polypane 的障碍和入门感到有点反感，但我认为它拥有最精心设计的特性集。 Sizzy 也很接近，但界面更混乱，感觉没有必要。 我承认我喜欢 Blisk 真正专注于“只查看移动视图，然后我们将用更大的视图填充剩余的空间”，因为这更接近我的实际工作方式。（我很少需要看到“设备墙”，上面是微不足道的不同移动屏幕。）

Responsively 是免费的开源软件，这一点非常棒，但它是否可持续？ 我觉得更放心的是挖掘作为业务运营的应用程序。 事实上，我只是在我的普通浏览器中使用 Re:View，这意味着我实际上使用它的可能性最高，但它现在感觉像是一个已经死了的项目，所以我可能不会使用它。 因此，现在，我想我只能加冕 Polypane 了。