在 IE 中调试 JavaScript（3）应用示例

look_w

应用示例       如下图所示，main.htm( 所有的代码都可以在 下载部分中获得 ) 是一个用来显示个人信息的页面。           这些信息存储在一个 XML 文件 (data.xml) 中，           使用 JavaScript(main.js) 进行 XSLT 转换 (data.xsl)，来生成页面内容 .
图 5. 应用示例                在“年龄”字段的输入框里面，我们只允许输入 0-9 的数字。但是我们可以发现，如果输入 025，在焦点从输入框移出后，                数字会变成 21，这种行为是不正确的，我们可以想到问题应该出在该输入框的 onblur 事件的代码里面。               
                那么 onblur 事件对应到哪个函数里面呢？页面上的大部分元素，包括年龄输入框，都是在页面加载后，由 JavaScript 动态生成的，                查看页面的源文件并不能帮我们找到这个函数。这时候就用到 IE Developer Toolbar 了。               
定位目标函数       点击 IE 标准按钮工具栏上 IE Developer Toolbar 的图标，IE Developer Toolbar 的界面就出现在页面的底部。           点击 IE Developer Toolbar 界面左上角的“单击选择元素”图标 , 然后点击年龄输入框，           在 IE Developer Toolbar 的属性 (Attribute) 面板，就可以看到 onblur 对应的函数了，如下图所示。          
图 6. 使用 IE Developer Toolbar 定位目标函数调试代码       通过查找，我们在 main.js 里面找到 fieldBlur 函数，在这个函数的第一行，我们加入 debugger; 语句。然后刷新页面，在年龄输入框输入 025，           然后用鼠标点击输入框以外的页面，IE 会弹出“实时调试”对话框，选择“新实例 Microsoft Script Editor”。在打开的窗口中，我们可以看到           脚本在 debugger; 语句处暂停执行，如下图所示。          
图 7. 使用 Microsoft Script Editor 进行调试按两次 F10 键 ( 逐过程单步执行 )，代码将执行到 element.value = parseInt(element.value); 语句。分别选中 element.value 和 parseInt(element.value)，                然后点击右键菜单中的“添加监视”项，通过对比它们的值，可以看到问题出在 parseInt 函数：字符串“025”被转换成了 21。通过查询函数手册，                发现我们没有给 parseInt 函数指定转换的基数 10，这样“025”被当作八进制数处理了。为了验证，我们可以在“监视 %1”面板，                手动加入 parsetInt(element.value, 10)，可以看到转换后是正确的了。               
图 8. 变量监视窗口                这样我们就很顺利地找到了问题的原因和解决办法。