如何在网页中调试JavaScript

供稿:hz-xin.com     日期:2024-05-23
如何调试html网页中的js代码

以谷歌浏览器Chrome为例(火狐类似),说下前端打“断点”:
一、按F12快捷键打开Chrome控制台,点击“Sources”选项卡,如图:

二、刷新当前网页,代码执行到“断点”处会停住,如上图蓝色区域;
三、按F8快捷键可以在不同的断点之间切换、按F10快捷键程序代码会一步步执行,这样就能很方便定位到错误区域,排查错误。
说明:火狐浏览器的操作方法和谷歌类似,当然界面略有不同。

JavaScript被称作以原型(prototype)为基础的语言。这种语言有很多特色,比如动态和弱类型,它还有一等函数(first class function)。另一个特点是它是一个多范型(multi-paradigm)语言,支持面向对象、声明式、函数式的编程风格。
JavaScript在这技术高速发展的同时变得非常受欢迎。因为受欢迎JavaScript也改进了许多,修改JavaScript脚本有很多事要做。这次我们为开发者带来了几个非常有用的JavaScript调试工具。
1)Drosera
可以调试任何WebKit程序,不仅仅是Safari浏览器。

2)Dragonfly
源代码视图有语法高亮,可以设置断点。强大的搜索功能,支持正则表达式。

3)Getfirebug
可以在任何网页编辑、调试和实时监视CSS、HTML和JavaScript。

4)Debugbar

5)Venkman
Venkman是Mozilla的JavaScript调试器名称。它旨在为以Mozilla为基础的浏览器(Firefox, Netscape 7.x/9.x and SeaMonkey)提供一个强大的JavaScript调试环境。

以IE8浏览器为例,接下来重点介绍并演示如何使用浏览器自带的开发人员工具调试JS程序。(该工具快捷按钮为F12)
1、在工具->Internet选项->高级,去掉“禁用脚步调试(Internet Explorer)”项的勾选。

2、去掉“显示友好http错误信息”项的勾选。最后点击应用,确定按钮。

3、预览表单,当要执行的js程序出现错误时,浏览器会给出提示。

4、在给出的错误提示窗口中,选择“是(Y)”按钮,进入IE浏览器自带的开发人员工具脚本调试界面。

5、根据JS调试信息可以知道,当前JS报错是由于没有找到指定对象“dat”而导致的。我们需要在表单设计器中,修改JS程序并保存。因演示效果的需要,在本例中是没有设置id值为dat的单行输入框控件的,本例中第二个单行输入框控件的id值是data2。修改后的JS代码。

6、将其改成值data2后,再进行测试不会出现JS报错信息,程序得以正常执行。

7、本例只是演示了如何利用IE自带的开发人员工具进行简单的调试工作,如需了解其他调试及排查技巧,请参阅网络及相关书籍进行学习。

我们首先从代码本身讨论一下:插入alert进入代码是最常见的方式,可以提示变量的值、类型,函数参数,对象属性。如果你用分支代码以支持分别做不同的事,你可以使用confirm来强制执行指定的分支功能。如果你想能够剪切粘贴结果可使用prompt。 要想得到更详细的错误报告你可以使用 window.onerror或try..catch语句。这会让代码直接运行,不会因某个错误而终止挂起,从而在代码执行完成后报告出所有的错误。 有些错误在我们不知不觉中进入我们的代码,并且难于发现。我们要严格遵守代码约定,如用分号显式地结束语句而不是用分号插入;总是使用花括号把控制结构括起来如if, if..else, switch, while, do..while, for, for..in语句; 使用圆括号来表示优先而不是靠运算符本身的优先等组;使用统一的详细的命名规则;使用统一的代码缩进规则让源码更易读;使用显式的类型声明避免自动类型或者采别的方式达到同样效果;对于不同的浏览器有些简便的方式(特别是 ie),尽量使用符合标准语法的代码……。通过以上方式减少这些难以发现的错误产生。 可以通过 js lint来运行代码,它可以检测某些潜在的错误。 以上是我们通过代码本身做的事。下面我们看看在浏览器中代码的检测 使用多个不同类型的浏览器测试你开发的角本。在windows环境中,至少要用到 ie6w、op7以及moz。在mac机中,要至少用到 saf、op7、ie5m和moz。如果存在代码在一个或多个浏览器中不起作用,要看看换些不同的代码能否解决。如果还不行,就要根据不同浏览器做一个分支执行代码。 在 ie中一定要启用错误报告。如果使用的是 windows,可以利用 Microsoft Script Debugger。如果需跟踪一个错误,你可以利用角本中的debugger关键字控制角本在调试模式下执行。推荐主要使用 ie 测试,用 op7 或 moz 来调试。 在 Op7 当中,一定要启用 在JavaScript Console 中 JavaScript 错误报告。Op7 的 JavaScript Console 远比 ie 错误报告要好些,拥有更好的代码跟踪功能,更容易看到函数调用来源。并且可以报告出正确的错误行,不同于 iew 。 在 moz 中有很多工具。可利用 Mozilla JavaScript Console,它可以报告错误和警告,并且允许做简单的角本赋值。可以启用严厉警告提示出许多潜在错误位置。可以使用 DOM Inspector 显示 document 树,stylesheets 树,computed styles,JavaScript 对象。可以用 Venkman (Mozilla JavaScript Debugger)获取更高级的 JavaScript 调试工具。可供使用的有 Ian Hickson's JavaScript Evaluation Sidebar 或者 Jesse Ruderman's JavaScript Environment、view scripts bookmarklet、JavaScript Shell 或者 view variables bookmarklet 或者 ViewScripts bookmarklet 。 在 konq 当中,靠自己的力量要更多些,使用一些源代码的技巧。

建议使用火狐浏览器。安装firebug。
安装后,按F12,打开firebug
找到脚本,启用脚本。
找到要调试的JS文件
在需要断点的地方,鼠标点下左侧
会出现一个红点
执行到这里的时候,就会进行调试了

以firefox浏览器为例(firebug):按【F12】进入script选项卡



在ie8+,chrome同样是按【F12】



F12 右边出现调试的

为什么开网页总是出现调试?
答:1、打开浏览器,找到菜单栏的‘工具(T)'-->‘Internet 选项(O)’打开。2、在“Internet 选项”窗口找到‘高级’选项卡。3、在‘高级’选项卡中滚动条一直往下拉,找到“禁用脚本调(Internet Explorer)”和“禁用脚本调试(其它)”前面打上对钩。确定即可。

java 在调试的时候如何查看类中的静态变量值
答:首先进入调试模式(以Eclipse为例),在右上角进入(添加调试模式)点击图示按钮 选择Debug 成功进入调试模式 在需要观察的类中的静态变量值处打上断点,以下是打断点的方法:如图,在左边那一块蓝色区域(变量所在行),鼠标双击可设置断点,再双击可取消 进入调试模式:在上边的菜单栏中选择调试模式 选中...

...bom,DOM这些是什么,有什么联系,还有我的JavaScri
答:首先说jQuery是一个js库,它封装了很多js的功能,并且将兼容性都给做好了,里面有的功能包括ajax ,dom bom。ajax:这个你自己上网搜索下就知道,这个技术就是能实现页面局部刷新,一般使用场景就是有些数据或者展示的东西没必要页面加载的时候就展示,用户异步加载数据 bom 就是包括window, document,histo...

java中怎么设置一个session在整个web中的时间
答:1、操作系统: 步骤:开始——〉管理工具——〉Inter信息服务(IIS)管理器——〉网站——〉默认网站——〉右键“属性”——〉主目录——〉配置——〉选项——〉启用会话状态——〉会话超时(在这儿设置你要的超时时间,单位分钟)。确定即可。2、ASP.NET应用程序中Session过期时间的设置 在ASP.NET这样...

javaee中怎样把数据库内容显示到网页上并实时增加和删减
答:您好 用JDBC实现CRUD方法 然后在SERVLET/JSP中调用相应的方法就可以实现CRUD(增删改查)了 不过现代编程方法一般都会编DAO(数据访问对象)来封装对数据库的操作 然后编写SERVICE(业务内)来封装业务,并实现事务控制 最后在SERVLET/JSP/STRUTS ACTION中调用SERVICE 这样可以达到松藕合的目的,便于修改、调试、...

如何在移动设备上调试html5开发的网页
答:一、iOS + Safari 1、打开手机web检查器。通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图(点击查看大图),并且你会看到该选项下面对电脑操作的相应描述,照做就好。2.链接电脑(Mac)2.1 先在手机Safari中打开你想调试的网页,并用数据线连接到电脑(我这里是Mac)2.2 再在电脑上...

如何在手机上测试网页如何在手机上测试网页版本
答:只能在线测试界面的视觉效果,不能调试,但是也很好。 1.移动仿真器* 非常好,快速,简单的界面,并支持多种平台。 2.opera迷你模拟器 需要java环境支持,单一平台,opera出品,非常快。 3.网页手机。 iqoo7手机怎么检测屏幕? 1.首先在手机桌面里找到电话 2.在拨号键盘里输入*#558# 3.这时候就进入了手机的工程模式,...

我的java web项目中网页文件里的图片在浏览器中显示不出来
答:下载火狐浏览器,然后安装firebug插件,插件安装好之后然后F12调试一下,看看控制台是否报错,看看报的错是什么错。我怀疑你图片是放在了WEB-INF目录下面,图片放在这个目录下面在浏览器中是访问不到的。。如果你的图片是存放在WEB-INF目录下面的话,那么很简单直接把图片放到与WEB-INF同一级就OK了。

如何将一个HTML页面嵌套在另一个页面中
答:JSP文件需要在基于Java的服务器上运行,比如Apache Tomcat。JSP包含文件的语法是:<%@ include file="footer.html" %>5、客户端包含5。1 客户端包含的利弊客户端包含有两种方式:JavaScript和iframe。让我们先看看两种方法各有什么利弊。两种方法中Javascript生成的页面格式比较好,Javascript可以从一个URL取到页面片断然后...

我的JAVAWEB工程SQL语句在MYSQL中可以正确执行,但是在TOMCAT里却报错...
答:maven项目就clean、install,然后重启项目 重启项目 如果还不行就清除网页缓存 以上是你曾经在idea中输入过错误SQL语句(后来在MYSQL中调试成功了)时首先可以选择的做法 下面是没有修改过的可选做法 查看配置文件,数据库是否连通 查看数据库版本 仔细检查语法,尤其是逗号。