使用 Firefox 开发者工具调试 GitHub 上的 fetch()

Firefox Nightly 最近添加了对 Fetch 的初步支持,Fetch 是一种现代的、基于 Promise 的 XMLHttpRequest (XHR) 替代方案。我们最初的工作支持了大部分 Fetch 规范,但并非全部。具体来说,当 Fetch 首次出现在 Nightly 中时,我们尚未实现 FormData 对象 的序列化和反序列化。

GitHub 已经在生产环境中使用 Fetch,并使用 自制的 polyfill,并且需要支持 FormData 的序列化才能将图像上传到 GitHub Issues。因此,当我们在 Nightly 中发布了早期不完整的 Fetch 实现时,GitHub 的 polyfill 退出了,Firefox 中的图像上传功能也随之中断。

在下面的 15 分钟视频中,Dan Callahan 展示了一个使用 Firefox 开发者工具 查找、提交和修复 Bug 1143857 的真实案例:“Fetch 不会序列化 FormData 主体;导致 GitHub 故障”。这不是一个预先准备的演示,而是一个全面而实用的演示,展示了如何使用 Firefox 开发者工具实际调试压缩的 JavaScript 和损坏的事件处理程序,在 Bugzilla 中报告 Gecko 错误,并最终测试 Firefox 的补丁版本。

使用以下链接跳转到 YouTube 上的视频 的特定部分

  • 0:13 – 错误
  • 0:50 – 使用网络面板
  • 1:30 – 编辑和重新发送 HTTP 请求
  • 2:02 – 假设:FormData 被强制转换为字符串,而不是序列化
  • 2:40 – 美化压缩的 JavaScript
  • 3:10 – 在事件处理程序上设置断点
  • 4:57 – 浏览调用栈
  • 7:54 – 在行上设置断点
  • 8:56 – GitHub 的 FormData 构造函数
  • 10:48 – 调用 fetch()
  • 11:53 – 通过在另一个域上测试 fetch() 来验证错误
  • 12:52 – 检查 fetch() 的文档
  • 13:42 – 在 Bugzilla 中提交 Gecko 错误
  • 14:42 – Bug 1143857 的生命周期:新建、重复、重新打开、已解决
  • 15:41 – 验证 Firefox 的修复版本

我们预计本月晚些时候发布的 Firefox 开发者版 版本 39 将完全支持 Fetch API。

关于 Dan Callahan

Mozilla 开发者关系工程师,前 Mozilla Persona 开发人员。

更多 Dan Callahan 的文章…


3 条评论

  1. Šime Vidas

    这让我相信调试压缩代码是可能的 :)

    2015 年 3 月 19 日 20:39

    1. Dan Callahan

      是的!源代码映射本来可以使我的生活更容易,但我最终还是解决了。:-)

      由于这次经历,我们现在也在努力改进 FormData 对象的预览,这样我就不用一直使用 .get() 来检查了。这是 Bug 1145460

      2015 年 3 月 20 日 05:17

  2. fvsch

    感谢演示!我之前尝试过使用断点等,并阅读了 Firebug、Chrome DevTools 和 Firefox DevTools 的相关文档,但我从未真正理解它是如何工作的,更重要的是,我可以用它做什么。这个例子使它变得清晰明了。

    在我看来,那些说“看,你可以做*这个*来解决问题!”的演示比那些说“这是你如何做*这个*”的演示更有效率。我将查看 Firefox/Chrome 开发者文档中是否有更多类似的屏幕截图。 :)

    2015 年 3 月 22 日 07:02

本文的评论已关闭。