龙都娱乐»JavaScript»恶搞:实时调试JavaScript

恶搞:实时调试JavaScript

来源:jobbole 发布时间:2014-04-10 阅读次数:
  【补充说明】:这是一篇恶搞 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   翻译: 伯乐在线 - 梧桐
QQ群: WEB龙都娱乐官方总群(83010142) 加群密码:关注下方微信公众号,发送消息 mm 获取
提示:更多精彩内容关注微信公众号:全栈龙都娱乐中心(fsder-com)
网友评论(共1条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共1条评论
登录会员中心
龙都娱乐