这里以google浏览器为例，首先运行你的web项目，然后打开F12，F12的调试框可以放到任何位置，这里放到浏览器的下面。
2
选择sources（资源），找到要调试的界面，然后我们双击页面打开，然后找到要调试的位置，打上断点。
3
然后我们点击相关页面元素，让程序运行到我们的断点位置，如下图所示，证明我们的断点起作用了。
4
我们点击上面的类似播放的按钮让程序一步步执行，在此过程中我们可以把鼠标移动到我们想看的变量或者代码位置。
5
当然我们可以通过右侧的Watch检测面板将需要查看的元素或者变量加进去，方便我们看到它的结果。
6
在调试过程中，可能会遇到各种各样的错误，我们可以通过查看console（控制台）的形式进行查看。
在浏览器中调试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、安装OFFICE2、打开WORD，在工具菜单，宏菜单项中MicroSoft脚本编辑器 ，会提示安装。3、安装结束后打开MicroSoft脚本编辑器，在调试菜单，点击安装Debugger调试器。4、安装结束重启操作系统。5、在JS里面添加debugger 语句，既可以在浏览器中调试。PS：脚本编辑器可以设计html页面；要调低浏览器安全级别。
