Firefox DevTools添加多项好用的JavaScript调试功能

Mozilla对Firefox Quantum开发者版本中的网页应用程序调试工具DevTools进行许多更新,在调试功能上,开始支持行内中断点(Inline Breakpoint),开发者也能对JavaScript Worker进行调试,并且还重新设计源码地图(Source Map),让变量名称一目了然,而DevTools整体执行效率也获得进一步提升。

开发者将可以使用DevTools,在程序代码设中设置行内中断点(下图),让开发者能够审查一行程序代码中的多个状态,以更容易的方法对压缩脚本(Minified Script)、箭头函数以及方法链调用(Chained Method Call)进行调试。而DevTools也更好地支持JavaScript Worker调试,开发者可以在Threads面板上切换不同线程,并暂停不同的执行上下文,而这项功能允许开发者在同一个Debugger面板,对Worker与其脚本进行调试。

而为帮助开发者监控变量,DevTools提供了Logpoint功能,由于使用printf()调试过程繁琐,开发者需要不停地执行编辑、构建和刷新的循环,但是新提供的Logpoint功能,让开发者只要在程序代码设置中断点并加入日志陈述,DevTool便会为执行中程序动态插入console.log() ,使得开发者不需要暂停或是编辑程序代码,就能在浏览器内监控变量。

同时,为了让压缩程序代码调试起来更容易,新版DevTools结合源码地图与Babel解析器,提供Debugger预览原始变量的功能,并能自动隐藏来自编译器与打包工具无关调试的内容。Mozilla提到,由于这项功能会带来一些性能的负担,因此想要使用的开发者,需要自行在Debugger中的Scopes面板手动打开。

源码地图是这次DevTools的更新重点之一,Mozilla对源码地图进行大幅度地改写,提高整体执行效率,很明显的是在应用程序暂停时,鼠标光标停在变量上进行数值预览的操作更加顺畅,而且用户不再只是对Babel、Webpack、TypeScript以及vue.js的编译输出进行操作,而是会有更加一致的调试体验。为了改善源码地图,Mozilla从上游进行修补,因此也顺带贡献了整个生态系统。

除了上述功能之外,由于Mozilla删除了DevTools许多耗费资源的计算,因此执行性能都获得不少提升,且Debugger的打开速度更快速,DevTools整体约获得30%的加速。