分享
 
 
 

减轻&#106avascript测试和调试负担

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

像JSP、ASP.NET、ColdFusion这样的Web开发平台提供了大量强大服务器端开发选项。但是,它们并没有否定用JavaScript进行客户端的Web开发。

JavaScript同时提供了逻辑和用户接口功能,减轻了服务器端处理的负载。尽管我们已经使用它有多年了,但是它的开发工具还是有点落后。现在就让我们仔细看看JavaScript的开发和调试选项。

开发工具

如果你习惯使用诸如Visual Studio或者NetBeans这样的集成开发环境(IDE),那么你就一定很熟悉各种调试选项,包括代码单步调试、设置断点,以及监视变量等。在监视代码执行或者追踪错误时,这些都是不可或缺的工具。不幸的是,这些工具在JavaScript开发人员中并不是十分普及。

调试

应用程序开发中的一个重要步骤是追踪脚本或者代码中的错误。这包括隔离代码段,一行一行地分析它们。在使用JavaScript的时候,你可以使用在开发工具大发展之前用过的方法。

在这种情况下,最常用的一种JavaScript函数是警报信息框。你可以用它来检查保存在变量/对象里的值,并与循环一起使用来查看对象的内容。

举个例子,列表A里的HTML代码没有按照预期的效果执行:

以下是引用片段:

<html><head>

<title>JS Test</title>

<script language="JavaScript">

function validate() {

var doc = document.forms[0];

var flag = true;

if (doc.fullName.value = '')

flag = false;

if (doc.contactNumber.value = '')

flag = false;

if (flag) doc.submit()

else alert('Enter values before submitting.');

}

</script></head>

<body>

<form id="frmTest">

Name: <input name="fullName" type="text" /><br />

Address: <input name="contactNumber" type="text" /><br />

<input type="button" value="Submit" onclick="validate();" />

</form></body></html> 按理说,它会在表单被真的提交之前验证在两个文本字段里输入的值。

这个表单总是不管输入的值是什么就被提交,所以我们可以使用警报语句在脚本执行期间检查值的内容。列表B里的脚本就使用了警报语句来监视变量的值:

以下是引用片段:

<html><head>

<title>JS Test</title>

<script language="JavaScript">

function validate() {

var doc = document.forms[0];

var flag = true;

alert('Script starting, flag = ' + flag);

alert('Script starting, Full name = ' + doc.fullName.value);

alert('Script starting, Contact number = ' + doc.contactNumber.value);

if (doc.fullName.value = '') {

alert('First check, Full Name is empty.');

flag = false;

}

if (doc.contactNumber.value = '') {

alert('Second check, Contact Number is empty.');

flag = false;

}

if (flag) {

alert('Validation successful, document will be submitted.');

doc.submit()

} else {

alert('Enter values before submitting.');

} }

</script></head>

<body><form id="frmTest">

Name: <input name="fullName" type="text" /><br />

Address: <input name="contactNumber" type="text" /><br />

<input type="button" value="Submit" onclick="validate();" />

</form></body></html> 如果你执行这段脚本,很明显if语句总是为“真”。如果更加仔细地看一看,你会注意到这里使用的是分配操作(=)而不是等于(==)。经过这两个改变,脚本就会按预期的结果执行了。

这个错误很常见,尤其是当开发人员在诸如VB.NET和其他句法上存在差异的语言之间轮流转换时。我们现在快速浏览更多几个常见的错误:

JavaScript对大小写敏感,所以变量名、JavaScript语句,以及类似的内容必须使用正确的格式/大小写。所以要按照统一的方式给你的对象、变量和函数命名。

在代码中使用逗号。除了for语句外,JavaScript把逗号用作变量的分隔符。

JavaScript要用大括号来定义一段语句。

字符串必须放在引号(单引号或者双引号)之间。

用alert函数进行调试对于开发人员来说很常见,但是现在有很多其他的选项来监视脚本,包括浏览器和IDE。

虽然Internet Explorer是最流行的浏览器,但是它对JavaScript调试的支持还显得相当初级。如果发生JavaScript错误,会有一个错误(信息)窗口显示。(大多数JavaScript错误的)错误消息还远不能让人满意,但是它们至少能够让你知道发生了什么错误。这些消息包括一个行号(尽管它从来都没有与真正的错误行相对应,但是它确实让你离错误行比较近了)。

此外,它还能够调用外部应用程序进行调试(比如Visual Studio,如果安装了的话)或者检查代码。注意:你可以从“工具|选项(Tools | Options)”里启动JavaScript的调试功能。

基于Mozilla的浏览器也提供了选择的机会。Firefox带有一个JavaScript控制台,用来显示当前页面上脚本的(错误、警告、信息等)消息。它会明确地显示发生错误的代码,并用箭头指示哪里出现了错误。

Netscape和Opera也带有JavaScript控制台。有些浏览器还有用于调试的专用句法。一个典型的例子是Opera,它支持将输出送到控制台的opera.postError()命令。Safari浏览器的“调试(Debug)”菜单让你可以启动JavaScript错误的记录,这样它们就会出现在控制台里。

IDE选项

你还可以通过自己习惯的IDE调试基于浏览器的应用程序。Visual Studio就是这样一个例子,它能够让你通过它调试Internet Explorer应用程序。你必须在Web服务器(IIS)启动调试功能,这要按照下面的步骤进行:

在调试模式(Debug|Start)启动Web应用程序。

应用程序在一个浏览器窗口里启动。返回到Visual Studio客户端。选择“调试|窗口|运行文档(Debug | Window | Running Documents)”。

当前运行的应用程序会出现在“运行文档”窗口里。你可以选择Web窗体,在JavaScript代码里设置断点。

返回Web窗体,使用应用程序;执行会在插入的任何JavaScript断点处停止。

Visual Studio不是唯一支持调试的IDE。例如,Dreamweaver有它自己的JavaScript调试器,让你调试句法和逻辑错误、设置断点、监视变量、进行代码单步调试。它的一个非常好的特性是会用简单几句话解释JavaScript的错误。

你还可以使用单独的JavaScript调试工具。一个典型的例子是SplineTech的JavaScript HTML Debugger,它是一个功能完备的开发工具。如果你使用Eclipse IDE,那么JSEclipse就是Eclipse的一个用于JavaScript开发的插件。

用于调试的其他语言

JavaScript已经发展成为进行Web客户端编程的标准语言。它有大量的语言资源,但是对开发的支持并不完备。大多数使用JavaScript的开发人员更倾向于用原来的方法进行调试,但是现在有很多工具来减轻测试和调试的负担。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有