【补充说明】：这是一篇恶搞 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整合进我们的工作流中？下面我提供了一个模板，每次我的代码就从这个模板开始。
// 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 翻译： 搞代码gaodaima.com – 梧桐
欢迎大家阅读《恶搞：实时调试JavaScript_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
转载请注明原文链接：恶搞：实时调试JavaScript_js
