Coz of ...
The world is colorful
你在这儿: &
firefox(火狐)如何像ie一样显示javascript错误
来源：网络 &&时间： &&
浏览次数：0
firefox(火狐)&如何像ie(Internet&Explorer)一样显示右下角的javascript错误,我们知道当html页面有js错误时,ie的左下角有个感叹号标志,双击就可以看到哪里的js出错了,这对我们调试和修改js代码十分有用.
firefox(火狐) 要如何像ie(Internet Explorer)一样显示右下角的javascript错误?
我们知道当html页面有js错误时,ie的左下角有个感叹号标志,双击就可以看到哪里的js出错了,这对我们调试和修改js代码十分有用.但在firefox(火狐)下的时候即使页面有错,在左下角也不会出现感叹号,那么怎样才能让firefox(火狐)把错误显示出来呢,火狐下有没有js错误显示机制呢?答案是肯定的.其实很简单只要按ctrl+shift+j键就可以调出来了.firefox(火狐)下叫错误控制台,上面会显示如图所示的错误信息.
按 ctrl+shift+j 快捷键,弹出错误控制台显示页面错误.
&本文链接:&&
----------------------------------------------------------------------------------------------------------------------------
分享本文到:
----------------------------------------------------------------------------------------------------------------------------
关键词:&&&&&&&&
你可能还感兴趣的:
----------------------------------------------------------------------------------------------------------------------------问题：(javascript)页面调试中遇到这两个问题，不知道什么意思
描述:Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# insteadSyntaxError: JSON.parse: unexpected non-digit at line 31 column 19 of the JSON data解决方案1:JSON.parse函数报的错，在预期为数值的地方出现了非数值，是不是你的value不是数值，你却没有加双引号？解决方案2:第一句是警告 用//# 替换 //@第二句语法错误
以上介绍了“(javascript)页面调试中遇到这两个问题，不知道什么意思”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/1013196.html
上一篇： 下一篇：developerWorks 社区
本文详细介绍了在 IE 中进行 JavaScript 调试所用到的工具，并通过一个例子演示了
如何使用这些工具，可以让读者掌握在 IE 上调试 JavaScript 的方法和技巧，加快他们在 IE 上
开发 Web 应用的速度。
, 高级软件工程师,
李波，高级软件工程师，2006 年加入 IBM CDL，一直从事 FileNet P8 BPM 相关产品的开发工作。对 Java 以及 Web 技术有着浓厚的兴趣。
, 高级软件工程师,
张光弟，高级软件工程师，2007 年加入 IBM CDL，一直从事 FileNet P8 BPM 相关产品的开发工作。
虽然越来越多的用户转向使用 FireFox 等非 IE 内核浏览器，但是 Internet Explorer(IE, 6 以及后续版本 )
仍然有着超过 50% 的市场占有率，大部分产品产品都需要支持 IE。不过 IE 缺少像 FireFox 上那么多调试
JavaScript 代码的插件，使得在 IE 上调试 JavaScript 代码比较困难，很多开发人员喜欢通过加入
alert 语句来进行调试，很大程度上降低了开发效率。
本文详细介绍了在 IE 中进行 JavaScript 调试所用到的工具，并通过一个例子演示了如何使用这些工具，
可以让读者掌握在 IE 上调试 JavaScript 的方法和技巧，加快他们在 IE 上开发 Web 应用的速度。IE 上的调试工具
IE 上可选择的 JavaScript 调试工具不多，主要是 Microsoft 脚本编辑器 (Microsoft Script Editor)
以及 IE Developer Toolbar。Microsoft 脚本编辑器
Microsoft 脚本编辑器是 Microsoft Office 中的一个小组件，它是一个很完备的 JavaScript 编辑和调试工具，
提供了丰富的调试功能。如果没有安装的话，可以运行 Office 的安装程序，选择”自定义安装”类型，然后
在自定义安装向导页面，选中“选择应用程序的高级自定义”, 在接下来的高级自定义页面，依次定位到
Microsoft Office-&Office 工具 -&HTML 源文件编辑 -&Web 脚本创作 -& 站点调试，选择“从本机运行全部程序”，
如下图所示。然后按照向导，完成安装即可。图 1. 安装 Microsoft 脚本编辑器如果没有购买 Office 套件，可以从 列表中下载安装 Microsoft Script Debugger。它是免费的，
比 Microsoft Script Editor 更轻量级，缺点是调试功能，特别是跟踪变量的功能还比较原始。
所以在这里我们还是推荐使用 Microsoft 脚本编辑器。
IE Developer Toolbar
IE Developer Toolbar ，是 IE 上的一个插件，用来探究和理解 Web 页面的便捷工具，最主要的功能包括：
查看并修改页面的 DOM 对象；查看选中元素或者标签的各种属性，包括 HTML 和 CSS 属性以及 JavaScript 事件等。
之所以这里要用到它，是因为在一个设计完备的产品中，页面上的很多元素，包括附加在这些元素上的各种事件，
都是在运行时动态创建的，单纯通过查看源代码，很难找到我们要调试的 JavaScript 函数。在这种情况下，
使用 IE Developer Toolbar，只需要通过鼠标选中目标元素，就可以立即帮助我们找到那些在运行时附加在它上面
的 JavaSscript 函数或者事件。
可以从 列表中下载安装 IE Developer Toolbar。安装成功后，会看到它的图标
被加到了 IE 的标准按钮栏上，如下图所示。图 2. IE Developer Toolbar 图标在 IE 中启用脚本调试功能
在我们能够进行 JavaScript 代码调试之前，需要先启用 IE 的脚本调试功能。
在 IE 菜单的工具菜单中，依次点击：Internet 选项 -& 高级 -& 浏览，取消选中"禁用脚本调试 (Internet Explorer)"和
"禁用脚本调试 ( 其他 )"，如下图所示 .图 3. 启用脚本调试功能调试方法被动调试
被动调试，也可以称为自动调试，当 IE 碰到 JavaScript 语法及运行时错误，或者选中了查看 -& 脚本调试器 -& 在下一条语句中断，
IE 会自动弹出一个"实时调试"窗口，让你选择调试器进行调试，我们选择"新实例 Microsoft Script Editor"，然后点击"是"按钮，
就可以进行调试了，如下图所示。不过这种被动调试方式没有可控性，而且我们平时多是调试逻辑而不是语法错误，
这里就不做详细介绍了。图 4. 实时调试对话框主动调试 - 使用 debugger 语句
我们可以在所要调试的某条语句或者函数中，加入 debugger 语句，这样当 IE 执行到这个 语句时，就会弹出实时调试窗口，
让我们进行调试。使用这种调试方法，需要我们知道要在什么地方加入 debugger 语句。我们上面提到，有时候并不是很好确定应该
在哪个函数中加入，这就需要使用 IE Developer Toolbar 来帮助我们进行定位。
下面我们将以一个例子来说明如何使用 IE Developer Toolbar 来定位目标函数，进而使用 MS Script Editor 进行调试。应用示例
如下图所示，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 函数，在这个函数的第一行，我们加入 语句。然后刷新页面，在年龄输入框输入 025，
然后用鼠标点击输入框以外的页面，IE 会弹出“实时调试”对话框，选择“新实例 Microsoft Script Editor”。在打开的窗口中，我们可以看到
脚本在 语句处暂停执行，如下图所示。
图 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. 变量监视窗口
这样我们就很顺利地找到了问题的原因和解决办法。
在 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 函数，在这个函数的第一行，加入 语句。然后点击
“开发人员工具”窗口的“脚本”标签，切换到调试面板，点击“启动调试”按钮，在弹出的对话框选择 “确定”后，“开发人员工具”
窗口会自动弹出，变成独立的窗口。切换到 main.htm 页面，在年龄输入框输入 025，然后用鼠标点击输入框以外的页面，
“开发人员工具”窗口会自动跳出，我们同样可以监视 element.value 和 parseInt(element.value) 的值，以及手动把
parseInt(element.value,10) 加入监视列表，如下图所示。
图 10. 在 IE8 中使用 debugger 语句调试另外我们可以通过设置断点，而不加入 语句来进行调试。在“脚本”面板上“开始调试”按钮右边的文件下拉框，
选择“main.js"，然后第 83 行代码前面单击鼠标，就在 fieldBlur 函数的第一行设置了断点，然后点击“开始调试”按钮，
如下图所示。当我们把鼠标移出年龄输入框后， JavaScript 代码会自动在我们设置的断点处停止执行。
图 11. 在 IE8 中使用断点调试总结
本文以 IE6 为主，介绍了 IE 浏览器上调试 JavaScript 所用到的工具以及调试方法，并在最后介绍了 IE8 在调试脚本方面的改进。
通过阅读本文，读者可以掌握在 IE 上调试 JavaScript 的方法和技巧，提高他们在 IE 上开发 Web 应用的效率。
下载描述名字大小本文用到的示例代码2.4KB
参考资料 阅读并了解可以用在 IE 上的
：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过
栏目，迅速了解 Web 2.0 的相关概念。查看 ，了解更多和 HTML5 相关的知识和动向。下载
，轻量级的 JavaScript 调试工具下载
，探究和理解 Web 页面的便捷工具加入 。查看开发人员推动的博客、论坛、组和维基，并与其他 developerWorks 用户交流。
developerWorks: 登录
标有星（*）号的字段是必填字段。
保持登录。
单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件。
在您首次登录 developerWorks 时，会为您创建一份个人概要。您的个人概要中的信息（您的姓名、国家/地区，以及公司名称）是公开显示的，而且会随着您发布的任何内容一起显示，除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。
所有提交的信息确保安全。
选择您的昵称
当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。昵称长度在 3 至 31 个字符之间。
您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。
标有星（*）号的字段是必填字段。
(昵称长度在 3 至 31 个字符之间)
单击提交则表示您同意developerWorks 的条款和条件。 .
所有提交的信息确保安全。
文章、教程、演示，帮助您构建、部署和管理云应用。
立即加入来自 IBM 的专业 IT 社交网络。
免费下载、试用软件产品，构建应用并提升技能。
static.content.url=/developerworks/js/artrating/SITE_ID=10Zone=Web developmentArticleID=660889ArticleTitle=在 IE 中调试 JavaScriptpublish-date=Javascript 教程
JavaScript 调试
在编写 JavaScript 时，如果没有调试工具将是一件很痛苦的事情。
JavaScript 调试
没有调试工具是很难去编写 JavaScript 程序的。
你的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。
通常，如果 JavaScript 出现错误，是不会有提示信息，这样你就无法找到代码错误的位置。
通常，你在编写一个新的 JavaScript 代码过程中都会发生错误。
JavaScript 调试工具
在程序代码中寻找错误叫做代码调试。
调试很难，但幸运的是，很多浏览器都内置了调试工具。
内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。
有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。
浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。
console.log() 方法
如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值：
c = a + b;
console.log(c);
在调试窗口中，你可以设置 JavaScript 代码的断点。
在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查
JavaScript 变量的值。
在检查完毕后，可以重新执行代码（如播放按钮）。
debugger 关键字
debugger 关键字用于停止执行 JavaScript，并调用调试函数。
这个关键字与在调试工具中设置断点的效果是一样的。
如果没有调试可用，debugger 语句将无法工作。
开启 debugger ，代码在第三行前停止执行。
var x = 15 * 5;
document.getElementbyId(&demo&).innerHTML = x;
主要浏览器的调试工具
通常，浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。
各浏览器的步骤如下:
Chrome 浏览器
打开浏览器。
在菜单中选择工具。
在工具中选择开发者工具。
最后，选择 Console。
Firefox 浏览器
打开浏览器。
访问页面: 。
按照说明 :安装 Firebug。
Internet Explorer 浏览器。
打开浏览器。
在菜单中选择工具。
在工具中选择开发者工具。
最后，选择 Console。
打开浏览器。
Opera 的内置调试工具为 Dragonfly，详细说明可访问页面:/dragonfly/。
打开浏览器。
右击鼠标，选择检查元素。
在底部弹出的窗口中选择"控制台"。
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码