怎么在浏览器中调试JS代码

JavaScript08

怎么在浏览器中调试JS代码,第1张

在浏览器中调试JS代码的方法

Chrome浏览器

按F12或是"设置"--》“工具”--》“开发者工具”,即可打开chrome的调试工具。

关于这个工具的用法,请参考“怎么使用chrome调试工具”。这里主要讲怎么使用source这个选项来调试JS代码。下图source选项的窗口。

0怎么使用chrome调试工具

下图中1为source选项卡,2是在小窗口中选中source选项,3是当前页面的原代码,这个需要自己确定,一般会是index或是比较具体的jsp的名称。双击3中的页面,右边的窗口中会出现页面的原代码,如下图4. 点击5,会格式化代码,是代码有合理换行,比较清晰。

下面就是具体的调试了。

在下图1中,先通过元素定位找到一个按钮,查看原代码,找到它点击后的JS方法,然后在source窗口查询,如图2中的1,定位到该方法,在方法的第一行代码的左边,单击,窗口上会出现3这样的箭头,表示断点设置在这里。4是一些控制,包括继续执行,暂停执行,跳入,跳出等。5显示的是当前所有的断点的信息。

在页面上点击按钮,页面会进入下图所示的状态,表示进入JS方法中的断点了。代码执行会停在断点处。1上面的继续按钮,可以是JS方法继续执行,也可以使用3上面的继续按钮。代码停在2中的代码行,这时可以将鼠标悬停在变量上来查看变量值,也可以在console中打印输出。点击3上的执行下一行可以执行下一行,也可以跳入某个方法或是跳出。点击继续,代码会跳到下一个断点或是完成调试。

FireFox浏览器。

按F12或是“设置”--》"开发者"--》“Web控制台”

FireFox和chrome的调试方法是一样的,只是浏览器的调试窗口和按钮位置有少许区别,请参照chrome浏览器的调试方法就可以。下面是FireFox的调试窗口截图。

1、首先使用Firefox火狐浏览器打开需要调试页面,也可以在开发工具设置火狐浏览器来打开:

2、在打开的Firefox浏览器中按F12键,接着就会打开“开发者工具”了:

3、此时选择“调试器”选项,然后选择需要调试的JS文件,接着就可以在需要调试的位置加入断点进行调试:

4、按F11或者F10单步调试JS,这里F11和F10的区别是F11调试,单步执行进入调用的其它函数;而F10调试单步执行,是不进入调用的其它函数的。当然也可以单机页面上相应的按钮进行调试。以上就是用Firefox调试网页的过程:

ie浏览器有一个内置的工具

可以用来调试js代码。

具体在:

工具栏--->

开发者工具

---->

脚本

----->启动调试

打开以后,操作网页上的相关JS代码,如果有报错误的话,就会有相应的错误提示,和代码执行时的中断位置...