使用TraceGL可视化跟踪JavaScript代码流-CSDN博客

本文链接：https://blog.csdn.net/cpongo4/article/details/89145397

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）关注我们，并与我们的编辑和其他读者朋友交流。