Mozilla Hacks

新的响应式设计模式：RDM 登陆 Firefox 开发者工具

Avatar photo 由 Helen V. Holmes，J. Ryan Stinnett

发布于 2016 年 11 月 22 日 在 开发者工具，特色文章，以及 Firefox

Firefox 开发者工具 现在包含了一个完全重新设计的 **响应式设计模式** (简称 RDM)，它已登陆 Firefox 开发者版，这要归功于 DevTools 团队的辛勤工作。

在移动优先的世界，为低带宽和离线移动体验优先考虑性能，并设计可以在各种设备上交付的渐进式 Web 应用程序至关重要。我们的目标是设计优先考虑对用户和开发者的同理心的开发者工具。这就是我们投入如此多精力于响应式设计模式的原因。

我们希望让开发人员更容易构建在各种尺寸的屏幕上加载和响应的 Web 体验，并支持多种浏览器、平台和设备类型。RDM 是对 Firefox 工具本身的重大升级，反映了我们对为 Web 构建的人们的承诺。

要访问 RDM 工具，请确保您正在运行最新版本的 DevEdition。接下来，打开任何网页，通过 *开发者* → *响应式设计模式* 查看 *响应式设计模式*。

此新工具中包含许多内容，并且还有许多新功能即将推出。查看视频演练，以查看该工具及其所有功能的实际操作，包括

  • 流行设备模拟
  • 网络限速
  • 触控事件模拟
  • 设置设备 DPR（设备像素比）的能力
  • 在特定尺寸对设备进行截图

Firefox 开发者工具已经为响应式设计模式的下一个版本规划了一系列改进，包括

关于 Helen V. Holmes

更多 Helen V. Holmes 的文章…

关于 J. Ryan Stinnett

Mozilla Firefox DevTools 的员工工程师。

更多 J. Ryan Stinnett 的文章…

24 条评论

  1. fvsch

    好吧，这太令人失望了。

    当我第一次看到这个设计时，我对它有很多疑问，但我希望沿途的调整会让它变得更好。看起来并没有。

    核心设计问题

    1. 一方面，它浪费了很多空间。在一台配备了最大化所有内容的 13 英寸笔记本电脑上，我垂直方向上大约有 700 像素可用；然而，唯一能容纳在屏幕上的设备尺寸（包括填充、顶部栏、视口 *以及* 下面的尺寸控制）是 iPhone 5。当用一个为效率而设计的设计时，iPhone 6 和 Nexus 5 这样的尺寸可以很好地容纳，这让人沮丧。我发现他们计划的解决方法是“好吧，让我们自动缩小整个东西”，而不是“嗯，也许 3 个工具栏，每个工具栏周围都有空白空间，不是一个很好的空间利用”。例如，将宽度/高度尺寸移动到其中一个工具栏可以有所帮助，也许让顶部工具栏周围的空白空间取决于窗口高度：在小窗口上紧凑，在大窗口上舒适 - CSS 媒体查询来拯救！

    2. 另一方面，一切都非常小，按钮非常靠近并且是用很小的点击区域实现的。为什么如此随意地使用空白空间，但实际上并没有做出一个可以点击而不会 100% 使用运动技能 *和* 令人沮丧的紧张的 UI？

    3. 为什么是奇怪的组合框？更重要的是
    – 为什么第一个可以在完整文本上点击，而第二个则将“DPR”标签和很小的数字值（另一个非常小的点击区域）分开？
    – 为什么 DPR 组合框仍然看起来像组合框，但在选择设备尺寸后不响应点击？这很令人困惑。

    我还对实现有一些担忧

    4. 切换 RDM 时性能很差（不确定我是否等了一秒钟或更长时间，有一些闪烁，并且似乎工具最初是锚定到左边的，然后通过一次或几次重排将自己居中）。

    5. 从侧面或角落调整视口大小时的性能也不好。显然，这将取决于内部的网页，但它仍然明显比旧的 RDM 慢且卡顿。

    6. 缩放很奇怪，可能不是用户期望的。

    7. 选择和按钮的实现有一些问题，尤其是在键盘使用方面。还没有用屏幕阅读器尝试过。

    很高兴一些好的功能已经实现，而其他功能还在路上，但那个 UI 有太多问题了。

    2016 年 11 月 22 日 下午 11:51

    1. fvsch

      不过，我为该评论中的前三句话道歉。它们听起来很傲慢，毫无帮助。

      2016 年 11 月 22 日 下午 12:41

    2. J. Ryan Stinnett

      感谢您的反馈！请记住，这还在进行中，我们未来还有很多计划，它公开了之前无法使用的许多功能。

      总的来说，RDM 工具是用 HTML（从 Mozilla 的内部 XUL）重写的，以帮助我们在未来更容易地扩展该工具，这是一个很大的努力，但仍然有一些领域需要更多完善。

      1. 您可能说得对，边距可以收紧，尤其是在较小的屏幕上。我已经为此提交了 https://bugzilla.mozilla.org/show_bug.cgi?id=1319593。

      2. 我们会将小点击区域纳入未来更新的考虑范围。我们计划公开更多元素，因此如果它们变得更大，可能很难容纳所有元素。

      3. 对于 DPR 选择器，文本不是菜单的一部分，所以这使其与限速不同。然而，看起来我们可以在点击 DPR 文本时轻松触发菜单。我已经提交了 https://bugzilla.mozilla.org/show_bug.cgi?id=1319597。目前，我们在选择设备时锁定 DPR 值，但我们可以在这种情况下允许更改它。我已经提交了 https://bugzilla.mozilla.org/show_bug.cgi?id=1319599。

      4. 我同意它可能有点慢才能启用。我没有注意到它太烦人，但我们应该尽可能地完善它！我们有 https://bugzilla.mozilla.org/show_bug.cgi?id=1278757 来跟踪这个问题。

      5. 您说得对，它可能比以前更抖动。我相信这部分与视口现在居中有关。无论如何，让我们用 https://bugzilla.mozilla.org/show_bug.cgi?id=1318340 来跟踪这个问题。

      6. 是的，我同意大多数人可能希望缩放目标是 Web 内容，而不是 RDM UI。我们有 https://bugzilla.mozilla.org/show_bug.cgi?id=1278758 来解决这个问题。

      7. 我不确定您在这里指的是什么，但请提交一个包含更多详细信息的错误，以便我们对其进行调查。

      请随时为问题或增强功能提交额外的错误，以便我们可以与其他工作一起跟踪它们。

      2016 年 11 月 22 日 下午 15:57

  2. Max

    你好，

    似乎在新版 RDM 中丢失了一些功能。例如，无法使用 Ctrl + 点击或 Caps + 点击来精确地调整视口大小（分别以 1 和 10 像素为增量）。您是故意删除了它，还是打算将其恢复？
    此外，似乎无法再将自定义视口尺寸保存为“尺寸下拉菜单”的预设。

    许多开发者非常依赖这些功能，现在它们似乎消失了。

    至于新版 RDM 本身，您是否计划在列表中添加非整数 DPR 值？1.5 在实际设备上非常常见，一些移动浏览器允许使用 1.25 或 1.75 等 DPR 值。

    2016 年 11 月 22 日 下午 12:22

    1. J. Ryan Stinnett

      感谢您的反馈！

      对于调整大小的精度修饰符，我们不确定有多少人使用它们，因为它们在 UI 中没有任何地方提及。我们有 https://bugzilla.mozilla.org/show_bug.cgi?id=1245237 来跟踪将此移植到新的 RDM UI。

      您说得对，目前无法保存自定义大小。我相信即将推出的几个功能旨在帮助解决这个问题：在重新打开 RDM 时恢复上次使用的设置 (https://bugzilla.mozilla.org/show_bug.cgi?id=1248619) 和定义具有自身大小和其他属性的自定义设备 (https://bugzilla.mozilla.org/show_bug.cgi?id=1173142)。

      对于非整数 DPR 值，我们目前没有在 DPR 选择器中设置它们的方法。但是，如果设备选择器中存在具有非整数 DPR 的设备（例如“Google Nexus 6”），我们将正确应用该值。我已经提交了 https://bugzilla.mozilla.org/show_bug.cgi?id=1319605 来公开一些用于直接设置非整数 DPR 的 UI。

      2016 年 11 月 22 日 下午 4:16

      1. Max

        非常感谢您提供的所有信息，以及快速的回复。非常感谢！

        2016 年 11 月 22 日 下午 4:28

  3. Nick Tomic

    你好，

    如何使用新的 RDM 设置自定义用户代理？

    干杯！

    2016 年 11 月 22 日 下午 1:30

    1. J. Ryan Stinnett

      从设备选择器中选择设备将应用该设备的用户代理。目前，无法设置完全自定义的用户代理。

      我们将添加对具有自身大小、用户代理和其他属性的自定义设备的支持 (https://bugzilla.mozilla.org/show_bug.cgi?id=1173142)，因此这似乎符合您的需求。

      如果您有一个设备列表中缺少的常用设备，请随时在 https://github.com/mozilla/simulated-devices 中贡献它，我们将在 DevTools 中使用这些数据发布更新的列表。

      2016 年 11 月 22 日 下午 4:22

  4. Alex Bell

    我完全同意 @fvsch 的观点。奇怪的是，如此宽泛的设计会有如此痛苦的小点击目标。

    1) 我的眼睛已经厌倦了浅灰色背景上的深灰色文本。请提供对比度，并使用更大的字体。

    2) 截图功能属于“偶尔使用”的功能。RDM 不是一个真正的模拟器，因为它在许多方面都存在限制，包括顶部和底部的浏览器边框，因此实用性有限。我猜想，每个开发者都知道如何在操作系统中直接捕获屏幕截图。将其埋藏在角落菜单中？

    3) 不要将尺寸放在窗口下方。对于在小型笔记本电脑上以 1:1 比例查看平板手机，当开发者实际设置时，尺寸会超出视野。

    4) 请将所有 UI 元素合并到一个水平条中，与视窗顶部齐平。对我来说，顶部边距是浪费的空间。

    我非常喜欢 Firefox，并且正在等待能够将我的日常开发工作全部切换到它的那一天。但是，在这个领域，我希望 Firefox 暂时复制 Chrome，并将设计工作重点放在面向未来的处女领域，例如多设备预览。

    2016 年 11 月 22 日 下午 3:09

    1. J. Ryan Stinnett

      感谢您的反馈！

      1. 对于替代配色方案，请尝试打开 DevTools 工具箱，转到选项（齿轮图标），然后选择深色主题。对于更大的字体，您目前可以使用浏览器的缩放快捷键来缩放 RDM UI。

      2. 许多设计师和开发者告诉我们，屏幕截图对他们的工作流程至关重要，并且他们希望在该领域获得更多功能，因此至少目前，我认为我们将继续在主要 UI 中显示此功能。

      3. 我同意，当视窗很高并且使用较小的屏幕时，这确实会造成麻烦。我已经提交了 https://bugzilla.mozilla.org/show_bug.cgi?id=1319619 来解决这个问题。

      4. 使用单个工具栏可能会难以实现我们计划的所有功能，但我们会牢记这一点。

      2016 年 11 月 22 日 下午 5:10

  5. Tom

    我想再次强调有关 UI 实现的评论。

    1. 可用性
    控件是非标准的 - 我在 Windows 上看到的是 Mac 风格的下拉菜单。在识别下拉菜单代表什么方面，用户支持很少（工具提示）。控件的命中区域太小（下拉菜单、指针、相机、关闭、旋转）。“响应式设计模式”标签与选项（“无节流”）的呈现方式相同，原因不明。相关设置显示在不同的位置（“DPR”、“设备配置文件”、“像素大小”）。

    2. 合格性
    合格性很差（对齐、间距、一致性）。存在不必要的辉光和过渡。像素大小字段奇怪地采用了 Android 风格，这对 Windows 用户来说令人困惑且不合时宜。编辑设备列表的 UI 是一个奇怪的模态覆盖层，带有非标准控件。将响应式视窗居中导致调整视窗大小时性能不佳。

    3. 功能
    基本的像素大小选择列表已更改为更全面的内容，但是用户设置和以前的功能迁移到哪里了？如何保存自定义设备大小/DPR？设备列表中的条目代表什么（大小/DPR）？

    2016 年 11 月 22 日 下午 3:50

    1. J. Ryan Stinnett

      感谢您的反馈！

      1. 我们将继续调整控件的外观。它们并不意味着要与任何特定的操作系统匹配。我同意，命中框目前有点小，希望我们能够改进这一点。

      2. 我相信其他回复已经涵盖了这些问题。如果您还有更具体的问题，尚未跟踪，请提交错误报告。

      3. 我们将添加对具有自身大小和其他属性的自定义设备的支持 (https://bugzilla.mozilla.org/show_bug.cgi?id=1173142)。列表中的设备来自 https://github.com/mozilla/simulated-devices。请随时贡献其他设备，我们将在 DevTools 中使用这些数据发布更新的列表。

      2016 年 11 月 22 日 下午 5:16

  6. lestnas

    这是一个受欢迎的补充。谢谢。

    我有一个关于开发者工具的疑问，是否可以像在调试（断点命中）脚本时一样检查 html？自从我在 Firefox 50 之前一直在使用 Firebug，所以能够拥有这种功能真是太好了。

    2016 年 11 月 22 日 下午 5:43

    1. J. Ryan Stinnett

      谢谢！

      关于您在调试时检查元素的问题，这正在 https://bugzilla.mozilla.org/show_bug.cgi?id=1177346 中积极开发。我希望看到它在 Firefox 53（当前为 Nightly 频道）中发布。

      2016 年 11 月 22 日 下午 5:46

  7. Flimm

    耶，节流工具！我喜欢这个。

    2016 年 11 月 23 日 上午 2:20

  8. Clément

    调试响应式设计和网络是两项无关的工作。
    网络节流应该在屏幕尺寸模拟工具之外使用。

    2016 年 11 月 23 日 上午 5:24

    1. Clément

      我认为，网络节流应该放在开发者工具的“网络”选项卡中。

      2016 年 11 月 24 日 上午 6:30

  9. Mte90

    现在的问题是找到实际的窗口大小在哪里写，这真是太神奇了。曾经在顶部，现在在视图底部，并且颜色不容易辨认。
    只有点击它才会出现真正的黑色，难道将此字段放在顶部像以前那样不是更好吗？您在顶部有所有工具，底部只有一个，但通常所有查看器或编辑器中的大小都在视图的顶部显示。

    2016 年 11 月 23 日 上午 7:12

    1. J. Ryan Stinnett

      感谢您的反馈！

      其他几个人也提到他们更喜欢将尺寸放在顶部，因此我们有 https://bugzilla.mozilla.org/show_bug.cgi?id=1319619 来再次考虑这个问题。

      2016 年 11 月 23 日 下午 4:03

  10. Tim

    我喜欢添加的功能，例如 DPR 和网络节流。就像其他人之前所说，存在一些可以修复的严重 UI/UX 问题。我不会重复之前的所有内容，但我认为将其与一个菜单栏一起对齐到左上角会真正让事情变得更快和更易用。我真的很喜欢旧的响应式视图，它有顶部的栏、黑色的背景和大的按钮。

    2016 年 11 月 24 日 上午 2:59

  11. Tom

    如果我能再次保存自己的窗口大小来测试我的断点，我会竖起大拇指 - 现在我不得不降级我的版本才能恢复此功能。

    2016 年 11 月 29 日 上午 4:40

  12. Tiago Celestino

    这些更新有可能在 Firefox 上发布吗？

    2016 年 12 月 6 日 上午 4:37

    1. Dan Callahan

      是的，一旦它在开发者版中稳定并运行良好，它就会发布到 Firefox，很可能在明年年初。

      2016 年 12 月 6 日 下午 12:03

  13. JS

    感谢您倾听并提交错误报告！我一直对浪费的垂直空间和视窗下方的尺寸感到非常沮丧 - 很高兴知道这一点正在得到重视！

    2016 年 12 月 12 日 上午 7:51

本文的评论已关闭。