| « | November 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | | | | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | | | | | | | |
|
公告 |
| 不倦~ |
| Blog信息 |
|
blog名称:
日志总数:5
评论数量:1
留言数量:0
访问次数:64935
建立时间:2008年3月29日 |
| |
|
 [SVG 学习]调试SVG中的JavaScript脚本——IE篇 
读书笔记
shuiyuan2004 发表于 2008/4/2 17:17:48 |
| 有些JavaScript开发者觉得脚本没什么好调试的，但是现如今，特别是随着Ajax技术的流行，JavaScript的代码动辄成千上万行，如果没有很好的调试手段，会让人很郁闷。 但是JavaScript是一种脚本语言，没有像c#，Java那样拥有优秀的集成开发环境，我们也能在开发环境中设置断点、单步执行调试吗？答案是肯定的。下面将介绍一些相关的调试技术，让JavaScript的调试也变得不再困难！一、传统调试 所谓传统调试，其实是比较“土”的调试方法，是整天抱着“记事本”（或者同类的文本编辑软件，如Emeditor，Notepad++等）写JavaScript代码的开发者最常用的方法。存在，就有它的合理性，对于条件判断型调试而言，这种方式即快速又简便。1、使用alert()函数 使用方法很简单，函数的参数就是你想要显示的内容。执行这个函数后会弹出窗口，窗口可以显示一个变量值，或者你设定的字符串。通常在需要定位一个错误的位置、判断一个函数到底执行与否、显示一个变量值等情况下使用。例如： var a = 10; alert(a); alert("OK"); 你可以在预期出错的位置之前加入该语句，判断错误是否在该位置之后，多次加入，就可以逐渐靠近错误位置了。 在显示变量时，特别是显示与鼠标位置相关的变量时，可以使用（windows.status），例如：windows.status = evt.clientX+“.”+evt.clientY。这样就不会一直弹出窗口，不利于调试。2、使用confirm()函数 该函数会根据你赋予的参数的表达式返回true或者false，从而可以选择不同的分支执行。例如： var a = 3; if(confirm(a==3)) alert("Yes"); else alert("No"); 执行之后，弹出一个窗口，上面显示“a==3”这个表达式的值，即“true”，然后有“Yes”和“No”两个按钮，如下图所示。这个函数有些类似于c#等语言中的断言。500)this.width=500'>图1 使用confirm()函数3、使用prompt()函数 这个函数就更“厉害”了，能够把一个值显示出来，允许你复制、粘贴，然后可以把这个值改变。比如： var a = 3; a = parseInt(prompt("Plese set it",a)); alert(a); 这个例子先是定义了一个整数变量“a”，然后执行“prompt”函数，显示出这个变量，此时你可以更改这个值，“prompt”函数的返回值就是你修改后的值。然后在显示这个值时，已经是你修改后的值了。如图所示：500)this.width=500'> 500)this.width=500'>图2 使用prompt()函数4、其它经验 1)如果出现对象为null或找不到对象，那就是“ID”、“name”的名称错误，或DOM写法不对，请检查错误所在的行。 2)如果错误定位到一个函数的调用上，说明函数体有问题，到函数体内找原因。 3)为了加快错误定位的速度，可以先注释掉一部分代码，逐步检查。 4)IE的错误报告往往准确，比如提示行18错的话，有时候是行19有问题。二、异常处理 从IE5和Netscape6及后续版本开始，JavaScript中也可以像Java、c#等语言那样，用try、catch、finally来作异常处理，而不是让浏览器的错误控制台上显示错误信息。 将可以导致或者抛出异常的语句封装在一个try…catch…finally结构中，先执行try块中的语句，其中包含可能发生异常的代码，如果发生异常，则执行catch块中的代码，而不管是否发生异常，最后会无条件执行finally块的语句。例如：function test(){ try { alert111111();//产生错误 } catch(ex)//异常捕获 { alert(ex.number+"\n"+ex.description); } finally { alert("end"); }} 这个函数执行之后，因为故意把“alert”函数的函数名写错，就必然会引发一个错误。 这时异常被捕捉，每个被抛出的异常都会产生一个Error对象的实例，该对象的引用可以作为catch语句的参数，如以上代码中的“ex”参数。 在调试的情况下，catch块中的语句可以查看该Error对象的属性，以获得更多的信息，在产品发布时，则可以给最终用户提供更加友好的错误信息。 到目前为止，在ECMAScript标准中只有两个属性得到正式认可，即message和name。一些浏览器则实现了更多的属性。 JavaScript 也支持自定义的异常，下面再来看一个例子：function initException(Num,Msg){ this.ErrorNumber=Num;//异常的编号 this.ErrorMessage=Msg;//异常的 描述}function test(){ try { ex=new initException(1,"Created!");//创建异常对象 throw ex;//抛出这个异常 } catch(ex)//异常捕获 { if(ex instanceof initException)//是否为“initException”异常 alert(ex.ErrorNumber+exErrorMessage); else throw ex; } finally { alert("end"); }} 这个例子是抛出自己定义的异常，而自己抛出的异常的属性则可以自己定义多个，本例的异常对象的名字为“initException”，异常属性有两个：异常的编号和异常的描述。 捕捉到异常之后，还可以用instanceof来判断异常类型，这在有很多个异常的时候很有用。 JavaScript不能像Java、c#等语言那样，用多个catch块来捕捉不同的异常，非嵌套情况下，它只能有一个catch块，可以使用关键字“instanceof”来区分不同的异常。PS：如果上面的例子运行时出现其它的错误，可能是由于中文注释引起的，可以试着删除注释看看。三、使用Visual Studio 调试 前面调试的方法总是在浏览器中进行，查看出错的“现场”比较麻烦，我们有时候不只需要知道一个变量的情况，可以是附近变量或者函数传入参数的值，使用 “alert”函数就很不方便了，并且我们希望能够设置断点、单步执行语句。幸好，微软公司的Visual Studio可以帮助我们更好的调试SVG中的JavaScript程序。 我们准备了三个文件：test.htm(包含着SVG文件)、test.svg和test.js（嵌入在SVG文件中的脚本），这也是一个很典型的SVG文件组织形式。 下面先介绍如何在脚本出错后，利用Visual Studio 中的调试器快速定位出错位置。 1）首先需要IE浏览器允许脚本调试。 单击工具菜单(Tools)->Internet选项（Internet Options）->“高级”（Advanced）选项卡。默认“禁止脚本调试（IE）”和“禁止脚本调试（其它）”两项是被勾选的，把这两个勾选去掉。 2）启动Visaul Studio 2003 或 2005，打开要调试的文件“test.js”（一般是Js脚本文件）。 3）在IE 中打开要调试的页面，这里我们打开的是test.htm。此时如果脚本有错误，浏览器就会弹出如下错误提示框：500)this.width=500'>图3 浏览器的错误提示 我们需要吧注册表[HKEY_CURRENT_USER\Software\Microsoft\WindowsScript\Settings]中的 “JITDebug”键的值改为 dword:00000001。浏览器就会弹出图4的对话框，否则不弹出该对话框，无法进行错误定位。500)this.width=500'>图4 调试器的选择 现在调试器，单击“确定”按钮，随后就出现如图5所示的界面，Visual Studio 提示出现一个运行时错误——“Object expected”，错误的代码行高亮显示，这一行笔者故意把函数名写错，导致了错误。500)this.width=500'>图5 定位错误代码 一般我们使用浏览器提供的错误提示报告，往往所提示的代码行数是不正确的，这样不利于我们快速定位到错误所在之处，使我们在定位错误上花了很多时间和精力。现在依靠Visual Studio，能很方便的做到这点。 这种情况的调试是最普通的，可以直接把断点定位到脚本错误的行上，然后通过Watch窗口看本地变量的值来确定错误所在。 那么如何设置断点和单步执行呢？步骤如下： 1）首先需要IE浏览器允许脚本调试。(具体方法上以陈述) 2）设置IE浏览器后，在“查看”（View）菜单下多了一项“脚本调试程序”，其下有两个子菜单“打开”和“在下一条语句中断”，如图6所示：500)this.width=500'>图6 IE浏览器“查看”菜单 3）单击“打开”之后，弹出与图4一样的对话框，选择调试器（据说实践证明Visual Studio 2005无法显示出SVG中的JavaScript代码，但我试了一下，是可以的，不知道是不是因为我打了补丁，因为机子上没装VS.net，所以我这里选用VS2005）。 4）选择调试器后，单击“确定”按钮，将自动进入Visual Studio 2005编辑器。 5）Visual Studio 2005编辑器会自动打开你当前的html运行文件（test.htm）。选择“调试”菜单->窗口->脚本资源管理器（或Ctrl+Alt+N），打开脚本资源管理器如图7所示：500)this.width=500'>图7 脚本资源管理器 6）乍一看，好像没有我们编写的脚本文件test.js，一个个单击脚本块，会找到其中一个就是我们的脚本程序。单击要设置断点的代码行，双击旁边的灰色竖条，或者按“F9”，设置断点，如图8所示：500)this.width=500'>图8 设置断点 7）设置好断点之后，不能刷新要调试的HTML页面，就否则断点会消失。只能事件触发调用需要测试的函数，进入断点（所以，如果函数是注册到SVG 中 onload的事件，必须刷新才能触发的，就无法调试~）。然后再按“F10”单步执行调试，在本地变量监视窗口查看变量情况。 使用Visual Studio 2003的情况也类似。 据说Visual Studio 2008非常完善的支持Javascript的调试以及IntelliSense功能。对JavaScript的代码诱导能力强，可以进行断点跟踪调试，同志们有兴趣可以试试。（VS2008中JavaScript编辑调试器的秘密——http: //www.chinaaspx.com/topics/vs2005/20070811/3490.html） 使用Visual Studio 来调试JavaScript似乎太过奢侈了点。PS：本文大部分内容来自《SVG开发实践》（电子工业出版社，黄凯伟编著） |
|
|