admin 管理员组文章数量: 887021
2024年2月20日发(作者:alert音标)
JavaScript调试方法以及常见错误 李丹 (同济大学软件学院天津教学中心) 摘要:随着互联网的不断发展和Web应用的日趋丰富,JavaScript越来 员都使用过这一方法,但如何恰当地使用此函数,并快速定位至4有问 越多地被运用在我们的网页中,已成为当今最流行的互联网编程语言之一。 题的代码呢?举个例子:开发某旅游网站的搜索功能,用户输入想要 但至今JavaScript还没有一个被广泛认可的开发环境,这就给代码的编写和 查询的地名或景点名称,系统搜索后会显示结果列表,该列表会把用 调试以及后期的修改和维护带来了极大的不便,为此,文章讨论了调试 户输入的查询关键字以红色字体突出显示。若搜索后页面无法正确 JavaScript的几种方法,详细介绍了用传统的内置函数进行代码的跟踪,以 及如何使用浏览器插件Firebug对JavaScript进行调试。文章还列出了开发 情况,一是在执行语句过程中出现语法错误,二是执行中出现逻辑错 过程中出现频率较高的脚本错误,并对错误出现的原因和现象进行了说明。 最后总结了JavaScript开发的相关经验。 关键词:互联网web javascript调试显示查询结果则说明JavaScript代码执行出现错误,可能存在两种 误。下面分别就这两种情况进行说明。出现语法错误时浏览器一般会 有错误报告,指出错误原因和出现位置,但很多情况错误信息并不;隹 确,对开发者没有太大的帮助,这时定位错误代码的位置就十分重要 1概述 在认为可能会出现语法问题的语句前后分别调用 在过去,JavaScript只是被用来做一些简单的网页效果,并没有 了。首先检查代码,firebug 受到重视。自从Ajax开始流行后,人们发现利用JavaScript可以给 alert,若提示框均未显示则说明错误发生的第一个alert语句之前, 用户带来更好的体验,这门语言被越来越多地运用到网站中。 需往前继续排查:如果第一个alert提示框可以弹出而第二个没有, JavaScript功能强大,可以方便操纵各种浏览器对象,控制浏览器的 或者两个提示框都可弹出但与预期结果不同,就说明两个alert之间 外观、状态和运行方式,具有极强的web前端表现力,构建交互性更 的语句有问题;如果都没问题则继续向后进行排查,注意不要一次调 强的动态网页,从而使页面更加美观、友好:JavaScript还可以使多 用过多的alert,这样调试者可能会产生混淆。出现逻辑错误会一般 种任务仅在客户端就可以完成,而不需要网络和服务器的参与,从而 采取从后往前的倒序排查,先在代码最后打印需要显示的元素或变 支持分布式的运算和处理。作为web开发人员,使用JavaScript以 量,检查是否正确,若数据有误,则继续向前排查过滤数据的逻辑,在 实现各种复杂功能的同时,调试成为开发过程中的一大难题。 重要条件的执行前后调用alert,看是否出现判断条件不完整、中间 JavaScript没有类似Java IDE(Eclipse)的集成开发环境,当出现错 数据处理错误等问题,如此反复找出问题所在。若数据处理用到for 误或未产生预想的执行结果时不容易发现和跟踪,所以正确有效地 循环,用alert调试起来就显得麻烦且效率不高,一个好用的调试工 调试JavaScript成为网页开发中错误排查和修正的重要手段。同时, 具此时就显得更加重要,下面就介绍火狐浏览器的调试工具 由于JavaScript的语言特点及缺少有效的语法检查工具,在开发过 Firebugo 程中容易出现一些难以发现的语法错误,了解这些错误,并在开发中 2.4使用Firebug进行调试Firebug是Firefox下的一款开发类 尽量避免也是提高开发效率的关键。 插件,最初由Joe Hewitt开发,如今由Mozilla基金负责维护 。它集 2 JavaScript简介及调试方法 HTML查看和编辑、JavaScript控制台、网络状况监视器于一体,是开 2.1 JavaScript的基本概念及特点 发JavaScript、CSS、HTML和Ajax的得力助手。下载并安装Firebug JavaScript是~种基于对象的脚本语言,用于开发Internet客 后,可通过选择Firefox的工具栏或点击浏览器右下角的图标打开插 户端的应用程序,可在所有主要的浏览器中运行,包括Internet 件,如下图所示: Explorer,Mozilla,Firefox,Netscape,Opera等 】o其主要有以下几个 特点: ①解释性语言:JavaScript是一种解释性脚本语言,无需专门编 译器编译,而是在程序运行过程中被逐行地解释,大量节省客户端与 服务器端进行数据交互的时间。 ②基于对象:JavaScript是基于对象的脚本编程语言,能通过 图1 Firebug主界面 DOM(文档结构模型)及自身提供的对象及操作方法来实现所需功 由上图可看到,Firebug有7个主要的Tab按钮,分别为 能。 ③事件驱动:JavaScript采用事件驱动方式,能响应键盘事件, 鼠标事件以及浏览器窗口事件等,并执行指定的操作。 ④跨平台:JavaScript是平台无关的语言,脚本的正确运行依赖 其功能如下: 于浏览器,而与具体的操作系统无关。只要客户端装有支持脚本的浏 控制台能够显示当前页面的JavaScript错误并提示出错文件和 览器,程序运行的结果就能正确反映在客户端浏览器上。 行号,方便排查,这些错误比浏览器本身提供的错误信息更加详细并 ⑤相对安全性:JavaScript不允许访问本地硬盘,并且不能将数 且具有较高的参考价值。此外控制台还会输出日志信息,即调用 据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏 Firebug API所显示的内容。控制台在调试Ajax应用的时候也是特别 览器实现信息浏览或动态交互,从而有效地防止数据丢失。 有用,可以看到每一个XMLHttpRequests请求post的参数、URL、 2.2 JavaScript调试的几种方法 http头以及服务器返回的内容对象还有Ajax请求的详细内容。 可以使用JavaScript的内嵌函数对代码进行跟踪,这是最原始 HTML查看器以清晰的层次显示所有HTML元素,使用者能够 也是最简单的方法;还可以使用专门的工具进行更有效更便捷的调 方便地分辨出每一个标签之间的并行或从属关系,还可以在查看器 试。当前流行的调试工具主要包括Firefox下的Firebug, 中直接修改HTML源代码,并在浏览器中第一时间看到修改后的效 JavaScript Debugger Venkman和I E下的Developer Toolbar,l E 果,极大方便了网页开发人员。 Debugger,IETester等 。下面主要介绍如何应用传统的调试方法和 样式查看器列出了每一个CSS样式表的从属继承关系,以及每 现在被广泛使用的Firebug插件进行高效的、切实可行的 一个样式在哪个样式文件中定义。你可以在这个查看器中直接添加、 JavaScript开发。 修改、删除一些CSS样式表属性,并在当前页面中直接看到修改后 2.3使用alert方法进行调试 的结果。 最简单和原始的JavaScript调试是使用alert函数,此函数接收 脚本调试器可以查看页面加载的所有脚本文件并对其进行跟踪 一个变量作为参数,执行时页面会弹出消息对话框显示变量的值,用 调试,还可观察本地变量和函数调用堆栈。 于查看某个变量值是否正确,或者定位错误代码。相信web开发人 网络状况监视器能将页面中的CSS、JavaScript以及网页中引 295
这样节省了代码编写时间,减轻甚至可以避免出现错误 用的图片载入所消耗的时间以矩状图呈现出来,方便开发者找出网 辑是否正确,页速度慢的原因,从而对其进行优化。 时调试大量JavaScript的麻烦,从而提高了开发效率和代码质量。 页面测评工具按照对页面速度提高的一些准则,评测一个网站 3 JavaScript常见错误 在速度体验上的优化程度,针对每一条给出从F—A的评分以及最终 虽然调试工具可以帮助开发者有效地定位错误并解决问题,但尽 的总分㈣。 量减少出错次数才是高效开发的关键,尤其是一些JavaScript语法错 安装了Firebug之后就可以在JavaScript代码里调用其所有的 误,完全可以在开发过程中避免。下面讨论一下开发中常见的错误: API了,包括console.1og(),console.debug(),console.info(),console. 3.1调用函数的名称不正确 error(),console.assert(),console.dir(),console.trace()等 o程序执行 例如通过名字取得页面元素的方法:document.getElementsB 时控制台可以打印出相关的变量值和方法调用堆栈。console.debug yName(name),其中Element的复数形式经常被遗漏,同时还要注 ()和alert()的功能基本相同,不同的是alert会阻断代码的执行,而 意JavaScript是大小写敏感的,bv的首字母是大写而不是小写。 console方法却不会,这对跟踪for循环内的执行结果非常有帮助。 3_2变量未定义 console.trace()可以在控制台打印出调用该方法的堆栈,主要用于追 若一个变量在函数体内定义,却在该函数外使用,则将产生一个 踪代码的执行流程,复杂的功能往往需要多个方法来完成,还会根据 错误。应注意变量的作用域。 条件执行不同的分支,若结果不正确就可通过trace方法来查看代 3.3出现Null值 码的实际执行步骤,从而找出出现问题的环节;还有一种情况trace() 若某个对象在创建时未被赋值或者没有正确初始化,继续调用 方法也非常有用,当涉及事件处理时,浏览器对事件的处理顺序可能 该对象的属性或方法就会出现错误。 和开发者预想的不同,比如键盘鼠标等引起的一系列动作,哪个在先 3.4引号不匹配 哪个在后,必须精确掌握后才能正确编写代码。又或者某个事件的处 注意引号内的内容如果还包含引号或其他特殊字符,需要使用 理函数调用了多次,但实际只应该执行一次,这时就需要追踪调用堆 转义符。 栈,到底是哪里出错致使重复调用。 3.5括号不匹配 当然,Firebug最强大的在于断点调试功能,切换到Script控制 这里所指的括号包括圆括号和大括号。If语句的复杂条件可能 面板,选择需要进行调试的脚本文件,这时文件会显示在面板的内容 导致存在多对圆括号,容易出现不匹配的情况,从而使条件语句无 区域,找到需要调试的方法,在希望开始调试的语句处单击,这样断 效。此外,作为方法定义和程序块标记的大括号也会出现这种情况, 点就设置成功了,如下图所示: 比如多层for循环嵌套,很可能由于记错层数致使多余或缺少关闭 燕.篁.i。 乏 愚崩 8 . ! £戆 i itL 熟 懋 懑 壁: _二 : :::: 拣l{№ww 嘶e帮e l£峨弗I蝴●….=lI'=一 ’ 括号,这样会导致找不到函数,或达不到预期的功能。这就要求开发 时成对书写括号并使用合理的格式,以避免出错。 3.6丢掉分号 ‘ f【l .々・ ●嘲tc●I・t’; 蠢 ■ 3, |,4日t1 h● “l●¥of…・r^●慨々h‘●.i●ah…thi●.isllrQ£…thi●.isll ‘u●.‘n籼 OI‘‘d 蛳 I ‘・一^I; t -.‘nd● O“‘nr●ie ’’1 0-i'j 0‘~in“lOtl’Isle‘, I・一l’ }l l l }f 作为结束符,每一个JavaScript语句都应该以一个分号来结束, 有时开发者会漏掉这个符号,导致程序不能正常工作。 3_7连接字符串时缺少加号 在连接多个字符串并赋值给新的变量时,经常会出现字符串变 图2 Firebug脚本调试面板 每当程序执行到此处时就会进入Debug状态,开发者可以根据 需要进行单步执行等方法。在调试状态下,可以查看所有本地变量和 量之间缺少加号的情况,导致语句错误。请看下面的例子: var start=‘‘Tianjin”; 调用堆栈,如下图所示: var end=“Beijing“; var type=“train”; var message=“This weekend 1 will go to”+end+“frOm “+start+’’by”type; alert(message); 图3 Firebug脚本调试状态页面 在上面第四行代码中,最后的字串”bv”和变量type之间应该有 加号连接,否则浏览器在加载该段代码时将报错。 3.8比较运算符误写成赋值运算值 请看下面的例子: var score=90; 在调试过程中每执行一步,若有HTML更新会立即应用于页 面,开发者可以马上观察到变化的效果是否正确,还可以根据变量值 的更新,判定程序是否按预计的结果执行并能准确找出错误发生的 位置。若没有进入预设断点,则说明程序没有执行到相应代码,应检 查代码进行重新设置。问题解决后想删除该断点,可以直接单击原断 点位置,或在面板中取消选择,如下图所示: if(score=1 00){ alert(“CongratuIations,you got full mark.”); )else{ alert(“Your score is”+score): ) 粗略看上面的代码,我们可能会认为页面的提示框应该显示 Your score is 90。但事实并非如此,因为if语句的判断条件错误地 将比较运算符(==)写成了赋值运算符(:),致使无论score变量为何 除此之外,Firebug还可以执行任何JavaScript程序片段,在 值都会显示Congratulations,you got full mark。虽然程序不会报 console面板的输入区域输入任意JS代码,点击Run,即可执行该区 错,但运行结果却是不正确的。 域内的所有代码,这个可以帮助开发者测试程序片段,例如存在某种 3.9保留字作为变量名 图4 Firebug断点查看页面 特征的原始数据,需要对它们进行计算过滤等操作,产生新的数据以 很多单词对于JavaScript是有特殊意义的,这些保留宇或关键 供后续使用,我们可以先写个程序片段测试一下算法和过滤条件的逻 字不能作为变量的名字来使用,例如:break,delete,return,class, 296
ICP—AES光谱法测定铝一铍中间合金各元素含量 崔爽周兵赵世卓 (东北轻合金有限责任公司 摘要:采用ICP—AES法直接测定铝一铍中间合金各元素的含量。用盐 别于400mL烧杯中,分别加入Be元素,按分析方法操作,在规定的 酸、硝酸混合酸溶解试样,通过分析条件的优化选择,确定了仪器的最佳工作 仪器条件下测定。统计谱线强度。分析试验结果而知,铝基体对铍的 参数和分析线。相对标准偏差小于1.5%,方法准确、快速,实现了多种元素 影Ⅱ向很小,但铝基体对其他一些元素有影响,由于基体增加引起强度 的同时测定。 比误差不在5%以内,因此tCP如想测定这些元素,就必须进行基体 关键词:ICP—AES光谱仪分析线铝一铍中间合金 匹配。因此本方法采用纯铝标样加Be标准溶液做工作曲线,使之基 体匹配。 铝合金已广泛用于各个领域,是重要金属材料之一,其化学成分 2.4工作曲线 直接影响其使用寿命和性能。铝一铍中间合金是铝合金生产中的重 选择五个纯铝标样(L20601—1—2、包铝2舟、G202、G204、L。 要原料之一,对于铝一铍中间合金主要考察铍、硅、铁等元素的含 0601—1—4),分别称取0.1000±0.0001g于400mL烧杯中,分别加 量。用ICP—AES法分析铝一铍中间合金的铍及其他元素,具有检出 入铍(2.055%、2.466%、3.014%、3 562%、4.1 1O%o按分析方法操 限低,线性范围宽,精密度高,准确性好,基体干扰少,可以多元素同 作。将系列标;隹工作液分别在仪器工作条件下进行测定,仪器软件自 时测定,分析速度快等优点,是一种较为理想的分析方法。 动绘制标准工作曲线。 1试验部分 2.5检出限 1.1仪器 在仪器工作条件下,标准化后,连续测定基体空白溶液1O次以 美国热电公司生产的 RIS Advantage ER/S全谱直读等离子 其3倍的标准偏差为本方法的检出限。结果见表1 体发射光谱仪。 表1 O引言 1.2试剂 混合酸300mL盐酸(1+1)与50mL硝酸(1+1)混匀。铍 标准溶液:0.1370mg/mL。纯铝标样。氩气:≥99.9%。 1.3分析方法 元素检出限 Fe Cu Mn Mg Zn Ti Ni Be S u g/mL Q0009 0.0006 0.00006 ̄00008 ̄0003 Q0008 Q0009 0.00008 Q0009 2,6精密度试验 选择一个纯铝标样(G202),分别加入不同量铍,按实验方法重 称取O.1000±0.0001g试样于400mL烧杯中,加20mL混合 复测量10次,进行精密度试验,测定结果见表2 酸,加热至试样溶解完全,移入250ml容量瓶中,定容,混匀。 表2 在仪器工作条件下,用设定的标准工作液做标准化;再作 分析元素{ 隹瞳(%) 测定值(%)平均值(%)RS13(%) QC检查;最后测定试样。 本试验中选用L 纯铝标样加Be 4.110%做标准化, G202纯铝标样加Be 3.01 4%做QC检查。 2结果与讨论 2.1仪器工作条件的选择 选择一个铝铍试样,称取0.1 000g,按分析方法操作。 改变工作功率,统计谱线强度;改变雾化器压力,统计谱 线强度;改变冲洗时间,检查试样测定后水中残留的各元素的 量,统计谱线强度;改变长波积分时间,统计谱线强度;改变短 波积分时间,统计谱线强度。 根据以上试验,参考热电公司提供的仪器工作条件的参 考数据,综合考虑铝铍中各元素的具体情况,确定了仪器的工 作条件: 工作功率:1150W;雾化器压力:30.1PSI;辅助气流量: 0 5Umin:泵速:100rpm;每个样品重复次数:3次 冲洗:20S: 长波-10S:短波:5S。 3结论 2_2分析线的选择 ICP—AES法实现了铝一铍中铍、铁等元素的同时测定,并且建 从仪器提供的分析谱线数据库中就各元素的特征谱线中选出强 立了铜、镁、锰、锌、镍元素的分析曲线,在需要时可以考察铜、镁、锰、 度最大的几条谱线,尽可能避开干扰谱线,并结合铝合金中常见元素 锌、钛、镍等元素。方法检出限低,测定简便、快捷,具有良好的准确 的谱线情况,对各特征谱线进行选择。 度,精密度,完全适合生产要求,能够作为分析检测规程应用于生产。 选择一个铝铍试样,称取0.1000g,按分析方法操作,在仪器给 同时与光电光谱仪互相补充,互相校对,更提高了分析准确度和精密 定的参数条件下,几天独立测定,统计谱线强度比及谱线准确度,选 度。 择谱线强度比大、稳定性好、准确度好、无干扰的谱线作为分析线。 参考文献: 2.3基体的干扰实验 [1](IRIS电感耦合等离子体原子发射光谱培训教程》.热电公司著 本试验只做铝基体对铍元素的影Ⅱ向(铝基体对其他元素的影响 [2】《lRlS Intrepid系列ICP实用操作手册》热电公司著 的试验均已做过,这里不再重复)。称取0.000g、0.1 000g铝基体分 [3】《原子光谱分析》邱德仁编著.复旦大学出版社出版 (上接第296页) synchronized等o 4结束语 [1]JavaScript简介http://www.w3schoo1.com.cn4s4s—intro asp 【2]JavaScript调试工具列举http://www.ijavascript cn/gongju avasc巾 t-debugger一84.htm1 综上所述,开发者应熟记JavaScript的常用方法,了解并避免常 法定位错误,解决问题,使JavaScript开发更加轻松,更加高效。 参考文献: 297 见错误,养成良好的编程习惯。一旦出现错误,能够运用多种调试方 0hp/Console [3]Console Panel Firebug Wiki http:∥ge娟rebug com/wiki/index 【4]Nicbolas C.Zakas.High Performance JavaScript.201 0,1 1. 【5]YSIow User Guide http://deveIOper yahoo.com/yslow/help/
版权声明:本文标题:JavaScript调试方法以及常见错误 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1708393081h522455.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论