BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

使用TraceGL可视化跟踪JavaScript代码流

| 作者 Zef Hemel 关注 0 他的粉丝 ,译者 朱伟健 关注 0 他的粉丝 发布于 2013年6月18日. 估计阅读时间: 7 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

Rik Arends发布了TraceGL,这是个可以跟踪调试(trace debugging)JavaScript应用程序的新工具。为便于调试和理解那些复杂的基于浏览器和Node.js开发的应用程序,这个工具将应用程序的执行轨迹捕获并可视化,从而使得用户能够在运行时浏览应用程序的执行轨迹。

TraceGL由两部分构成:一个基于Node.js的服务器和一个运行于浏览器中的基于WebGL的客户端。这个四格的浏览器UI左上角显示的是跟踪过程的缩略图,右上部分显示的是跟踪过程放大的部分,左下方是堆栈跟踪结果,代码本身则放在右下格中。鼠标悬停在代码的变量上时,UI中会显示变量当时的值。另外,控制流的代码执行路径也是可视化的。

为了深入了解该项目,InfoQ采访了它的创建者Rik Arends。

InfoQ:我们为什么需要TraceGL,浏览器集成的调试工具不够完美吗?

“浏览器的调试工具确实已渐入佳境,但是它们是以‘断点/单步调式’的方式运行的。首先,你需要知道断点该放在哪里,并且如果你跳过了出错的函数,那就必须从头来过。使用跟踪,所有的执行过程都会被记录下来。这意味着你能一次浏览所有的逻辑过程而不必按步查看,所有的变量和函数参数都是可见的,而且还可以使用搜索并将数据聚合后进行可视化。你不再会遗漏任何事情。由于它是记录性的,你不用中断程序。特别是面向基于事件的代码时,如果在某处设置断点,程序的行为表现是不同的,而使用跟踪调试时代码的表现将更自然。由于现在记录可以共享,这样就能够在质量保证过程中运用新的方式来协助调试。

在巡视代码的过程中,TraceGL确实让我对自己的代码和例如jQuery这样的代码库有了更多的认识。”

InfoQ:对什么类型的应用程序将特别有用?

“你的代码量越大,使用跟踪调试的效果就越好,尤其在不全是自己的代码的情况下。在任何比较复杂的HTML5应用程序上使用它时,你都将会对你的代码有许多新的认识。在UI上巡视自己代码的行为是件让人很愉快的事情。然而,我不得不说,TraceGL对于Node.js也是非常有帮助的。由于Node.js完全由事件驱动,与断点调试并不是非常适合,但与跟踪调试却是天作之合。闭包的堆栈(closure stack)可用性使你通过简单地点击函数便可以实现回调函数的跳入和跳出,这是非常方便的功能。就像有个在服务器内部的窗口,我们可以通过该窗口看到正在发生的事情。”

InfoQ:TraceGL是如何工作的,是集成到javascript虚拟机中了,还是采用了代码插桩(instrument)

“TraceGL在运行中扮演着代理和文件服务器的角色,同时使用向JavaScript代码插桩的方式进行工作。在很大程度上与CoffeeScript编译成JavaScript的过程比较相似。我使用了Marijn Haverbeke开发的Acorn,这是个很棒的JavaScript语法分析器,通过它可以非破坏性地修改源代码。当执行这部分修改过的代码时,它通过一个WebSocket连接记录所有的代码流,并通过节点处理在UI上实现可视化。这意味着TraceGL不需要与JavaScript虚拟机建立调试连接。它能够像Node.js后端程序一样轻松地跟踪移动电话上的代码。”

InfoQ:构建TraceGL的UI使用了什么技术?

“因为TraceGL会接受大量的数据流,我需要滚动显示非常多的文本。作为一个尝试,我决定在WebGL中编写整个UI,并且将所有文本渲染为静态顶点缓冲(static vertex buffers)。这意味着在滚动和缩放时JavaScript对于单独的渲染大量文本的请求所作的处理非常少。我使用了一个带脏区处理(dirty-region handling)的基础UI工具包,并且编写了GLSL着色编译器(shader compiler)来处理所有的UI样式问题。所以这就意味着我不用再使用CSS来规范样式,不过你需要自己写几段着色程序。所有的交互都是通过射线拾取(raypicking)以及将JavaScript DOM与着色变量进行数据绑定来实现的。如果照此方法,你必须自己解决Retina屏幕的问题,不过效果是很好的。我以前是一个C++图形程序员,因此最终能完成一个非HTML的快速浏览器UI,这也是件让人非常爽的事情。”

InfoQ:TraceGL与那些可编译成JavaScrip的语言兼容吗?比如CoffeeScript。

“TraceGL可以对CoffeeScript编译器的输出结果进行插桩和展示,但是我还没有实现将编译后的代码整齐地映射回原始CoffeeScript代码的功能。”

尽管TraceGL不是编辑器或者IDE,但是它带给我们一个类似LightTable“实时编程”的感觉。然而LightTable是通过显示个别Clojure[E1] 函数的结果并允许编辑该结果来实现以上功能的,通过TraceGL你只需要使用你自己的编辑器就可以在TraceGL的UI中实时或者延时展示代码流。

TraceGL目前可以在它的网站上花费14.99美元购买获取。它以单个JavaScript文件的方式进行发布,可以在任何支持Node.js的平台和支持WebGL的浏览器中运行(主要是最近版本的Chrome和Firefox)。

查看英文原文:Visualize JavaScript Code Flow with TraceGL


感谢赵震一对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ)或者腾讯微博(@InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT