恶搞:实时调试JavaScript

【补充说明】:这是一篇恶搞 JS 的文章。原文副标题是“How a single line of code saved America™”。作者 Jordan Scales 在文章最后还说了一句:“Jordan Scales 是一位 Web 开发者,被他妈妈评为硅谷第二厉害的年轻工程师。” [偷笑]

你写了一堆JavaScript代码,但运行的时候却出问题了。你抓耳挠腮却始终找不到有问题的div。最后你放弃了,删除所有的代码从头再来。

这种情况我也遇到过,Facebook遇到过, Google遇到过, Yahoo正在经历。这是人生的一部分,但你如果仔细思量,或许有更好的办法。

本教程将向你展示如何找到JavaScript的bug,避免你清空代码。

用到的工具

集成开发环境或者说IDE,比如微软的Visual Studio给开发人员提供了一系列工具诸如语法高亮,代码自动完成以及培养你的耐心。然而这其中最重要的特性就是调试工具。

Visual Studio 2014截图

许多IDE支持断点,能够让你暂停程序执行并实时查看变量。

由于JavaScript的核心设计理念: bare-metal development和togetherness, 它并没有提供IDE和炫酷的断点工具, 但它支持特性复制。

 

让我来中“断”一下,但“点”在哪儿?(原文:Give me a break, what’s the point?)

首先让我们来赏析一下这个高大上的标题。是什么让断点如此有价值?那首先来看一下下面的代码:

然后冥想一下:“如果有办法能让我在指定时间查看x的值就好了”。办法嘛也是有的,那就是alert。

alert命令能让程序产生实时状态更新 – 比如 “ Twitter for JavaScript”。下面就是我的网银页面的例子:

通过这种方式,我们就能记录变量的值并检查它们是否符合预期。不用再去猜了,事实摆在眼前。

我们如何能吧alert整合进我们的工作流中?下面我提供了一个模板,每次我的代码就从这个模板开始。

要使用这个模板其实很简单,将它储存为template.js并用你喜欢的文本编辑器打开。如果你在用vim, 就输入:

如果你在使用emacs,输入下面的内容:

然后把你的代码放在各种alert输出之间, 运行代码并查看每一行执行之后的x值。

到此你应该已经具有一个响应式的基础代码,它在每一行运行后提示x的值。 有人说不要使用x? 你应该使用,因为编译器针对它进行了优化。

跟bug来个一刀两断吧,跟新的JavaScript调试方式打个照面吧。

收藏 10 评论

关于作者:梧桐

(新浪微博:@jakiewoo_vp9) 个人主页 · 我的文章 · 13

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部