[js]恶搞:实时调试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给开发人员提供了一系列工具诸如语法高亮,代码自动完成以及培养你的耐心。然而这其中最重要的特性就是调试工具。

jzcoder的PHP学习笔记

Visual Studio 2014截图

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

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

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

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

jzcoder的PHP学习笔记

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

jzcoder的PHP学习笔记

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

jzcoder的PHP学习笔记

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

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

// check that JavaScript is enabled
1 + 1 == 2;

alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);

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

$ vi template.js

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

$ sudo apt-get remove emacs
$ vi template.js

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

x = 5;
alert(x);
x += 5 + 7;
alert(x);
function multiplyX(y) {
  x = x * y;
}
alert(x);
multiplyX(999999);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);

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

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

  原文链接: Jordan Scales   翻译: 伯乐在线 – 梧桐

分享到:更多 ()

抢沙发

评论前必须登录!