firefox调试html5程序,用 Firefox 开发者工具调试现代 Web 应用程序

原文作者：Jason Laster，Harald Kirschner

译者：_小生_

(译者注：Jason Laster 是 Firefox 的开发者，文章发表于https://hacks.mozilla.org，主要讲述了在 Firefox 上的开发者工具的一个重大转变，更加有利于开发者的调试。文章地址：https://hacks.mozilla.org/2018/05/debugging-modern-web-applications/。之所以选择翻译这篇文章是因为我觉得这个调试工具在今后一定会被普及，因为现在在 react、vue 等框架和 webpack、babel 打包工具广泛运用的同时，调试代码却开始变得复杂起来。而这个工具对调试代码有了一个极大的改善，我会跟进这个工具的新闻。)

在 Firefox 中构建和调试现代 JavaScript 应用程序 DevTools 刚刚迈出了一大步。通过与 Babel 技术主管 Logan Smyth 的合作，我们调整了调试器的源映射支持，让您检查您实际编写的代码。结合我们在所有开发工具中提供一流的 JS 框架支持的举措，这将提高现代 Web 应用程序开发人员的生产力。

现代 JS 框架和构建工具如今扮演着至关重要的角色。像 React，Angular 和Ember 这样的框架可以让开发人员用 JSX，directives 和 templates 构建声明式用户界面。像 Webpack，Babel 和 PostCSS 这样的工具可以让开发人员在浏览器供应商支持之前使用新的 JS 和 CSS 功能。这些工具可帮助开发人员编写更简单的代码，却使得代码调试变得更为复杂。

在下面的例子中，我们使用 Webpack 和 Babel 将 ES Modules 和异步函数编译成可以在任何浏览器中运行的 vanilla JS(即 JavaScript)。左边的原始代码非常简单。右侧生成的与浏览器兼容的代码要复杂得多。

图1. 左侧的原始文件，右侧生成的文件。

当调试器暂停时，它使用源映射从生成的代码中的第13行导航到原始代码中的第4行。不幸的是，因为暂停事实上发生在第13行，所以用户很难弄清当时 dancer 的 value。将鼠标移动到变量 dancer 上将返回未定义状态，唯一可以找到 dancer 范围的方法是在“范围”窗格中打开全部六个可用范围，然后展开__emojis_对象！这个复杂而令人沮丧的过程是为什么许多人选择禁用源地图。

图2. dancer 的价值是未定义的，在 Scopes 窗格中有六个独立的范围。

为了解决这个问题，我们与 Logan Smyth 合作，看看是否有可能让交互感觉更自然，就好像你在调试你的原始代码一样。其结果是，一个新的引擎，它将源数据与 Babel 的语法树进行映射，以显示您希望看到的方式。

图3. 显示 dancer 的正确值，Scopes 窗格显示一个范围。

这些改进最初是针对 Babel 和 Webpack 实现的，目前我们正在增加对 TypeScript，Angular，Vue，Ember 等的支持。如果您的项目已经生成了源地图，那么这个功能在以后很有可能开箱即用。

要试用它，只需转入并下载 Firefox Developer Edition。您可以通过对您自己的项目进行测试并报告任何问题来帮助我们。如果你想 follow，打招呼或贡献，你也可以在 devtools 频道 Github 或 Mozilla Discourse或 devtools Slack 找到我们！

我们的 2018 年目标是改善使用最新框架构建现代应用程序的 Web 开发人员的生活，构建工具和最佳实践，未来是光明的！