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

 我来答

2个回答

#合辑# 面试问优缺点怎么回答最加分？

新新岁岁年d
2017-09-29 · 超过77用户采纳过TA的回答

知道答主

回答量：225

采纳率：0%

帮助的人：101万

我也去答题访问个人页

关注

展开全部

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控制台”

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