本月标志着 Firefox 开发者版 一周年纪念。为了庆祝，我们很高兴向您展示一些新工具，以及对现有工具的一些改进，这些工具可以让您以直观的方式处理网页。

随着网络发展成更加动态、交互性和移动的体验，视觉设计师比以往任何时候都更频繁地使用动画——而最新的 Firefox 开发者版拥有让动画操作更快更容易的工具。 Firefox 开发者版现在为视觉设计师和动画师提供了一组视觉编辑工具，这些工具的操作方式与他们习惯的方式相同。我们正在使用一组设计师使用起来舒适的、直观的、强大的交互式工具来解决动画技术上的挑战。视觉编辑工具应该吸引动画师，而不仅仅是程序员。

DevTools 挑战者

阅读有关我们新工具的信息很棒，但亲身体验它们更棒！为了帮助您入门，我们与著名的 Web 动画工程师和倡导者 Rachel Nabors 合作创建了 DevTools 挑战者。查看 DevTools 挑战者，体验我们所有新的视觉设计工具的实践操作。请记住一直滚动到海底！

动画和 CSS 滤镜工具

页面检查器中的 动画面板 使得轻松地擦除、暂停和可视化网页上的每个动画。由于它与 DOM 检查器紧密集成，您可以选择全局查看所有动画，或深入到几个节点。

找到所需的动画后，只需单击即可使用我们的视觉三次贝塞尔曲线编辑器。该编辑器包含有用的预设，确保您的动画完美移动。

我们还为 CSS 滤镜 创建了类似的编辑器，允许您通过页面上的实时反馈直观地添加、删除、重新排序和调整滤镜。

测量和颜色

Firefox 开发者版还提供了两种全新的工具来微调布局：您现在可以在页面边距上启用 像素标尺，或者使用我们新的测量工具拖动和测量页面的任意区域。

检查器现在默认情况下会显示 CSS 颜色“按作者编写”，并且在颜色色样上按住 Shift 键单击会在作者编写的样式和等效的十六进制、RGB 和 HSL 值之间循环。甚至还有一个 吸管工具 可用于直接从页面中拾取颜色。

内存快照

新的内存工具可以帮助前端工程师更好地了解和优化页面分配和保留内存的方式。该工具通过获取堆的快照来工作，然后允许您按保留的对象类型、分配堆栈或内部表示来深入查看。我们认为您会喜欢它，并且我们还有更多功能和增强功能正在开发中！

WebSocket 调试 API

最后，我们非常高兴地宣布 Firefox 现在公开了一个 API 用于监视 WebSocket 帧 (Bug 1203802)，这是迈向全面 WebSocket 检查工具的第一步。开发者工具工程师 Jan Odvarko 构建了 一个实验性附加组件 用于检查 WebSocket 流量。安装该附加组件并试用一下，我们希望收到您的反馈。

Firefox 开发者版可从 firefox.com/developer 获取。请通过在下面评论或在 Twitter 上关注 @FirefoxDevTools 来告诉我们您对这些功能的看法！