[译]来试试这个真正的 JavaScript 调试器吧！

• 原文地址：Debugging JavaScript With A Real Debugger You Did Not Know You Already Have
• 原文做者：Dustin Driver
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Serendipity96
• 校对者：ZhiyuanSun，noahziheng

来试试这个真正的 JavaScript 调试器吧！

console.log 能够告诉你不少关于应用程序的信息，但它不能真正调试你的代码。所以，你须要一个完整的 JavaScript 调试器。新的 Firefox JavaScript 调试器可以帮你写快速且完好陷的代码。下面来介绍它的用法。

在这个例子中，咱们将用 Debugger 打开一个很是简单的应用程序。此应用程序是基于一个基础的 JavaScript 开源框架开发的。在最新版本的Firefox Developer Edition中打开此程序，Mac系统按 Option + Cmd + S 或者 Windows系统按 Shift + Ctrl + S 启动 debugger.html。调试器共分为三个窗格：源列表窗格，源代码窗格和工具窗格。

大图预览

工具窗格进一步分为工具栏，监视表达式，断点，调用堆栈和范围。

大图预览

中止使用 console.log

使用 console.log 来调试代码是很诱人的。你只需在代码中添加一句 console.log ，而后执行便可找到变量的值，对不对？这确实能够奏效，它多是麻烦且费时的。在这个例子中，咱们将使用 debugger.html 单步执行这个待办事项应用的代码来查找变量的值。

咱们在 debugger.html 的一行代码中添加一个断点，来深刻了解待办事项应用程序。断点告诉调试器在这一行上暂停，这样你能够点击代码来看看发生了什么。在这个例子中，咱们在 app.js 文件的第 13 行添加一个断点。

大图预览

如今添加一个任务到列表中。代码将会暂停到 addTodo 函数，咱们能够深刻代码来查看输入的值等。将鼠标悬停在变量上能够看到更多信息。你能够看到锚点和子程序等各类信息：

大图预览

你也能够进入 Scopes 面板获取相同的信息。

如今脚本已经暂停，咱们可使用工具栏来逐步调试。开始/暂停按钮正如工具栏上所显示的含义，" Step Over " 跨越当前代码行，" Step In " 步入函数调用，" Step Out " 运行脚本，直到当前函数退出。

大图预览

咱们也可使用监视表达式来跟踪变量的值。只需在监视表达式字段中输入一个表达式，调试器将在你逐步执行代码时进行跟踪。在上面的例子中，你能够添加表达式 " title "和 " to-do "，当它们被调用时，调试器会显示它们的值。如下状况特别有用：

• 你正单步执行并想看变量值的变化；
• 你正屡次调试一样的东西，并但愿看到相同的变量值；
• 你想弄清楚为何那个该死的按钮不起做用。

你也能够用 debugger.html 去调试 React / Redux 应用程序。如下是使用步骤：

• 跳转到你要调试的组件。
• 参阅左侧的组件大纲（类中的函数）。
• 添加断点到相关的函数中。
• 暂停并查看组件 props 和 state。
• 调用堆栈是已经被简化的，这便于你查看应用程序代码和框架的交集。

最后，debugger.html 让你看到可能引发错误的混淆或压缩的代码，这在处理像 React / Redux 这样的通用框架时特别有用。调试器知道你已暂停的组件，并显示简化的堆栈调用，组件大纲和属性。如下是开发人员 Amit Zur 在 JS Kongress 上描述他是如何使用 Firefox 调试器调试代码的：

若是你在新的 debugger.html 中对深刻代码走查感兴趣，请转到Mozilla Developer Playground。咱们构建了一个系列教程，帮助开发人员学习如何有效地使用该工具来调试代码。

开源的开发工具

debugger.html project大约于两年前推出，同时对全部 Firefox DevTools 进行了全面改进。咱们但愿使用现代网络技术重建 DevTools，并对全世界的开发者开放。当一项技术开放的时候，可以自由扩展到咱们 Mozilla 小团队所能想象的范围以外的任何地方。

JavaScript对于任何高级 Web 应用程序都是必不可少的，因此强大的调试器是工具集的关键部分。咱们但愿构建一些快速，易于使用且适应性强 —— 可以调试将来可能出现的任何新 JavaScript 框架的产品。咱们决定使用流行的网络技术，由于咱们想与社区紧密合做。这种方法也将改善调试器自己 —— 若是咱们采用了 WebPack 并开始在内部使用构建工具和 Source Map，咱们但愿改进 Source Map 生成和热加载。

debugger.html 是用 React，Redux 和 Babel 构建的。React 组件轻量，可测试又易于设计。咱们使用 React Storybook 进行快速的 UI 原型设计和记录共享组件。咱们的组件使用 Jest 和 Enzyme 进行测试，这使得在 UI 上迭代更容易。这让使用各类 JavaScript 框架（如 React ）更容易。Babel 前端能让咱们作一些像显示左侧边栏中 Component 类和它功能的事情。咱们也能够作一些很酷的事情，例如把断点固定到函数中，当你改变你的代码时，它们不会移动。

Redux Action 对于 UI 来讲是一个简单的 API，但它也能够很容易地构建一个独立的 CLI JS 调试器。Redux Store 有查询当前调试状态的选择器。咱们的 Reduce 单元测试激发了 Redux Action 并模拟浏览器响应。咱们的集成测试使用调试器 Redux Action 来驱动浏览器。功能架构自己被设计为可测试的。

咱们每一步都依靠 Mozilla 开发人员社区。该项目在 GitHub 上发布，咱们的团队联系世界各地的开发人员向他们寻求帮助。当咱们开始时，自动化测试是社区发展的重要组成部分，测试能够预防性能退化，也能很好地记录容易遗漏的行为。这就是为何咱们采起的第一步是为 Redux Store 添加 Redux Action 和 Flow 类型的单元测试。事实上，社区确保咱们的 Flow 和 Jest 覆盖率有助于确保每一个文件都被打印和测试。

做为开发者，咱们相信工具越强，参与的人越多。咱们的核心团队一直很小（2 人），但咱们平均每周有 15 个贡献者。社区带来了多样的视角，帮助咱们预测挑战并创造了咱们从未想到的功能。咱们如今整理了 24 个不一样库的调用堆栈，其中有许多咱们从未据说过。咱们还在源代码树中显示 WebPack 和 Angular 映射。

咱们计划将全部的 Firefox DevTools 移到 GitHub 上，以便更普遍的受众使用和改进它们。咱们很乐意为您作出贡献。转到 debugger.html 的 GitHub 项目页面。咱们已经建立了一个关于如何在本身的机器上运行调试器的完整的指令列表，在列表里你能够修改使它作任何你想作的事。使用它来调试任何 JavaScript 代码 —— 浏览器，终端，服务器，手机，机器人。若是您有改进的方法，请经过 GitHub 告诉咱们。

您能够在这里下载最新版本的 Firefox（和 DevTools）。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。