在 IE 中调试 JavaScript（4）在 IE8 中进行调试

look_w

在 IE8 中进行调试       随着在 Web 开发中 JavaScript 重要性的日益增加，微软在 IE8 中直接内置了“开发人员工具”(Developer Tools)。           我们可以把它看作是 IE Developer Toolbar 的加强版，除了我们上面介绍到的 IE Developer Toolbar 的功能，           它还内置了脚本调试和探查器 (Profiler，性能监控器 ) 的功能。所以如果你的产品只需要在 IE8 上进行调试，           那么就不需要在额外安装其他插件和工具了。下面我们就简单介绍一下调试过程。
定位目标函数       在用 IE8 打开 main.htm 页面后，选择“工具”菜单中的“开发人员工具”，或者直接按 F12 键，将弹出“开发人员工具”的窗口。           为了方便选取页面上的元素，可以点击窗口右上角的“固定”图标，来让 “开发人员工具”嵌入到页面的下部。然后点击           左上角的“单击选择元素”图标，接着点击年龄输入框，同使用 IE Developer Toolbar 一样，在“开发人员工具”的属性面板，           就可以看到 onblur 对应的函数了，如下图所示。          
图 9. 在 IE8 中定位目标函数调试代码     与使用“Microsoft Script Editor”一样，我们找到 fieldBlur 函数，在这个函数的第一行，加入 debugger; 语句。然后点击         “开发人员工具”窗口的“脚本”标签，切换到调试面板，点击“启动调试”按钮，在弹出的对话框选择 “确定”后，“开发人员工具”         窗口会自动弹出，变成独立的窗口。切换到 main.htm 页面，在年龄输入框输入 025，然后用鼠标点击输入框以外的页面，         “开发人员工具”窗口会自动跳出，我们同样可以监视 element.value 和 parseInt(element.value) 的值，以及手动把         parseInt(element.value,10) 加入监视列表，如下图所示。          
图 10. 在 IE8 中使用 debugger 语句调试另外我们可以通过设置断点，而不加入 debugger; 语句来进行调试。在“脚本”面板上“开始调试”按钮右边的文件下拉框，                选择“main.js"，然后第 83 行代码前面单击鼠标，就在 fieldBlur 函数的第一行设置了断点，然后点击“开始调试”按钮，                如下图所示。当我们把鼠标移出年龄输入框后， JavaScript 代码会自动在我们设置的断点处停止执行。               
图 11. 在 IE8 中使用断点调试