断点调试

图标

豆瓜

豆瓜网

豆瓜网专栏

首发
豆瓜 图标 2020-07-24 08:53:18

一、源码调试/debugger方法

1.1控制台调试按钮介绍

20190201-1.png

button-0.pngResume script execution恢复断点调试、常用在一个方法调用多个js文件(适用冗长js代码使用)、点击这个会直接跳转到下一个断点(逐过程执行)

button-1.pngPause script execution停止断点调试

button-2.pngstep over next function call逐语句执行,每点击它一次,js语句就会往后执行一句,快捷键-F10

button-3.pngstep into next function call进入函数内部、单步执行下一个函数调用

button-4.pngstep out of current function call跳出当前函数调用

button-5.pngStep快捷F9

button-6.png停用断点Deactive breakpoints

button-7.png暂停断点Pause on exceptions

彩蛋:在控制台中输入$(this),即可得到我们所点击的对象——加载更多按钮元素。

注:进入jquery、vue这样的文件时,用button-2.png加速跳出,同时注意到最好慢点点击。不然出来之后点快了容易跳过要进入的函数。跳出来之后应继续使用进入函数按钮跳进函数内部看信息。


1.2 逐过程执行和逐语句执行区别详解

20190201-2.png

假设上图我只在227行打了个断点,然后一直点击逐语句执行”按钮到229行,这时如果再点击一次“逐语句执行”

则会进入下图的js里:


20190201-3.png

我们不可能一直使用“逐语句执行”按钮,这样你会发现你按了大半天还在库文件里面绕,那就该用“逐过程执行”按钮。


20190201-4.png

我除了在227行打了一个断点,同时还在237行打了一个断点,当我们运行到229行时,直接单击“逐过程执行”按钮, js直接跳过了库文件,运行到了237行。


二、打断点的情况调试

2.1操作方法

1.在谷歌浏览器中用Command+option+F打开全局搜索,然后搜索对应页面/事件。

技巧:要看某个函数首先找到这个函数的入口,最好先找入口事件,从页面最初渲染的函数进去才好一步步往下走。打断点时在函数内部打,不要在外部打断点!

初始化函数常为生成一个DOM...


20190201-5.png

全局搜索对应函数之后,直接点进去


20190201-6.png

2.在合适的地方打断点后,即可刷新页面了。注意是 状态下


20190201-7.png

3.1会自动跳到函数内部,然后通过 按钮不断按函数顺序执行,每次执行函数之后都能看到相应函数的含义,直到函数执行结束。

3.2有时候刷新无效,本质是断点没有触发事件,那个事件可以是鼠标移入移出点击或点击事件等,所有要在界面中进行对应操作就会跳入断点调试阶段。当然也可能上一个函数有错误,导致程序不能执行到断点位置。

4.执行到最底层时:执行栏显示为灰色无法点击


20190201-8.png


2.2 断点调试过程的收益

1.具体看某个变量的系数就把鼠标放在上面


20190201-9.png


2.可看每次过程执行之后对应的提示


20190201-10.png


2.3 断点调试案例

20190201-11.png

法一

1.在227行打上断点

2.点击加载更多按钮

3.单击一次“逐语句执行“按钮,js代码执行到228行

4.用鼠标选中i++

5.选中以后,鼠标悬浮在目标上方,你就看到上图的结果。


20190201-12.png

法二、在控制台输出i的值

1.按照第一种方法执行到第三步

2.打开和sources同一级栏目的console

3.在console下方的输入栏里输入i

4.按enter回车键即可


三、不打断点调试

1.没打断点的情况下,点击入口函数,再点击 按钮进入了函数内部。

2.通过 按钮不断按函数顺序执行,每次执行函数之后都能看到相应函数的含义,直到函数执行结束。


20190201-13.png


四、总结

4.1 有无打断点的区别

1.没打断点时在console输入i,i只是一个局部变量,浏览器会把所有的js全部解析完成,console并不能访问到局部变量,只能访问到全局变量,所以console会报错i未定义。

2.当js打上断点时,console解析到了局部变量i所在的函数内,这时i能够被访问。


五、断点调试实战

小程序断点调试实例(重点介绍--打断点的思路)

1.首先看动态效果图、发现一个规律:第一次点击的新闻详情没问题,控制台正常输出对应的index,但是点击的第二个却会报错

。VM207:1 Setting data field "collected" to undefined is invalid.

2.全局搜索找到collected相关的代码片段

3.通过打断点找问题的方法很重要


20190201-14.png

4.分别在三处不同地点打断点看效果

第一处:页面初始化onLoad函数中(制作步骤效果、分析效果)


20190201-15.png

第二处:(制作步骤效果、分析效果)


20190201-16.png

进入调试发现postCollected=undefined,这就是问题所在。


20190201-17.png

第三处:收藏按钮函数中(制作步骤效果、分析效果)


20190201-18.png

4.分析问题:

postsCollected是一个缓存数组,其中每一个新闻的index数据在缓存状态中是独立的

使用if(postsCollected)会导致第一次点击后缓存里面就被加入一个index的数值了,那么点击另外一条新闻之前postsCollected就已经为真了,那么


六、注意事项

本博客主要用于个人学习记录,断点调试章节部分参考文档:https://www.cnblogs.com/mqfblog/p/5397282.html

如有侵权请联系删除!


Debugger实战篇

Bug


20190201-19.png


复现Bug

配置界面,添加数值统计样式,然后点击背景颜色更换。观察DOM结构变化。


定位Bug对应的函数方法

1.问同事这个功能写的对应页面,页面有功能注释的话就搜索这个功能的注释,这里通过搜索“数值统计”找到了相应功能的函数。

2.没人知道页面的情况看这个页面结构,通过每一步操作页面结构的HTML变化来判断这个功能的触发引起了哪些页面结构的变化,通过变化产生或固有的id和class在项目中全局搜索,看到相关函数功能就在这个函数内部debugger;

3.如果不在项目中全局搜索id和class,在开发者模式-Source-JS文件夹下的每一个JS文件中找功能函数

4.debugger之后点击触发这个界面上功能的位置,看debugger会不会跳进去,不能跳进去就在另外一个有可能的功能函数中debugger;

补充:实在没有头绪时在开发者模式-Source-JS文件夹下的每一个JS文件中搜索相应函数做判断,找到关键函数就在其内部打断点,看是否有效果。

看代码在开发者模式中看会快很多,也方便做笔记。


本文由豆瓜网专栏作家 豆瓜 投稿发布,并经过豆瓜网编辑审核。

转载此文章须经作者同意,并附上出处(豆瓜网)及本页链接。

若稿件文字、图片、视频等内容侵犯了您的权益,请联系本站进行 投诉处理

相关搜索

断点调试
图标 图标

豆瓜

豆瓜网

豆瓜网专栏

  • 断点调试

    图标
    豆瓜 图标 · 今天 08:53:18 · 0浏览
  • poweroff

    图标
    豆瓜 图标 · 今天 08:52:41 · 5浏览
  • javalist使用方法

    图标
    豆瓜 图标 · 今天 08:52:06 · 7浏览
  • 全部评论

    豆瓜

    豆瓜网

    豆瓜网专栏

  • 断点调试
  • poweroff
  • javalist使用方法
  • matlab画三维图
  • 茅台叫停贴牌酒怎么回事
  • 我来说两句