请选择 进入手机版 | 继续访问电脑版
Mozilla

火狐社区

登录    注册

用新浪微博连接 QQ互联

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

yingliu Mozilla员工 发表于 2018-6-21 15:54:25 | 显示全部楼层 |阅读模式 [复制链接]
0 3754
本帖最后由 yingliu 于 2018-6-28 17:28 编辑

原文作者: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 框架和构建工具如今扮演着至关重要的角色。像ReactAngularEmber这样的框架可以让开发人员用 JSX,directives 和 templates 构建声明式用户界面。像 WebpackBabelPostCSS 这样的工具可以让开发人员在浏览器供应商支持之前使用新的 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 频道 GithubMozilla Discoursedevtools Slack 找到我们!

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



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表