javascript断点调试

一、方法1

1.断点文件位置

打开chrome，找到Sources，在一堆的文件夹里面找到你要调试的js文件，打开它：

下面是html前端展示：

2.打断点
当你运行代码的时候，例如：操作搜索按钮点击事件，出现未知问题。

首先，给Sources里面的js文件打断点。点击你要调试的代码的行数，发现行数会被标记为蓝色（chrome），这说明已经成功打断点了，恭喜你成功了第一步。

3.断点调试（快捷键f8）

对断点进行调试，首先观察我们标记的断点，在点击事件内部，这个时候我们应该怎么做才能触发这些断点？

是的，去触发它，点击搜索按钮，触发这个方法，这样断点才会被执行到。

下图就是点击搜索按钮，我们先不在时间选择器上输入值，点击搜索，触发断点，进入调试状态。

下面是调试状态时的一些实时数据显示，在最右侧的状态栏中，scope -> local，看到一些信息，otime是断点150行的调试信息，这里显示是undefined对吧，这个是因为我们没有在时间选择器上输入有效值。

下面接着调试，这次输入时间。这时再看，在scope -> local 展示的信息，是我们想要得到的otime的变量，而在断点150行，也会看到有信息展示。

当然，我们可以用另外的方法去看这个时候otime的值，在控制台中(console)输入你想要查看的变量，回车，会看到你想要的结果。

4.逐语句执行（快捷键f10）

我们会看到在调试界面的上方，有个悬浮框，首先看最右边的按钮。

鼠标悬浮，会出现一段英语step over next function call（单步执行函数调用），可以理解为逐步执行或者逐语句执行，点击这个按钮。

我点击两次之后，会发现调试进行到了152行，右侧的scope -> local 展示的也是实时变量

——– 未完待续 ——-

javascript断点调试相关推荐

JavaScript 断点调试技巧
大家好,我是若川.最近组织了源码共度活动:1个月,200+人,一起读了4周源码,参与的小伙伴都表示收获很大.如果感兴趣可以点击链接扫码加我微信 ruochuan12.之前推荐过很多次调试文章,说明调试 ...
不依赖浏览器控制台的JavaScript断点调试方法
随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决.然而对于一些特殊情况仍然无法享受到浏览器的强大调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经 ...
javascript断点调试方法
http://www.blogguy.cn/show-728-1.html
JavaScript断点调试与console.log(..)输出不一致
此情况多出现在对象赋值前后进行console.log(-) 打印结果会随机
Chrome 中的 JavaScript 断点设置和调试技巧
你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用 ...
JavaScript：断点调试
断点调试可以帮助我们查看代码运行过程. 同时,当你运行代码的时候,可能会出现bug,那么断点调试也可以让我们更好的排错. 所以,断点调试能力非常重要,只有学会了断点调试,才能学会自己修复bug的能力. ...
ajax请求必须打断点才能成功,Jquery等待ajax执行完毕继续执行（断点调试正常，运行异常）...
以前写过一个程序,发现用断点调试的时候,一步步的运行,程序是可以的,但是去了断点程序就出现了问题. $(document).ready(function(){ var arra=new Array() ...
大型前端项目的断点调试共享化和复用化实践
作者:enoyao,腾讯工程师背景随着我们项目越来越大,我们有可能需要维护很多的模块,我们腾讯文档 Excel 项目大模块有 10 几个,而每个大模块分别有 N 个小模块,每个大模块下的小模块都有 ...
Javascript的调试利器：Firebug使用详解
copy from: http://blog.csdn.net/tianxiaode/archive/2007/09/02/1769152.aspx Javascript的调试,是开发Web应用尤其是 ...

javascript断点调试

一、方法1

javascript断点调试相关推荐

最新文章

热门文章