做的网站 v2ex,网络网络建设,免费找图片素材的网站,住房和城乡建设厅焊工证一、源码调试/debugger方法1.1控制台调试按钮介绍Resume script execution恢复断点调试、常用在一个方法调用多个js文件(适用冗长js代码使用)、点击这个会直接跳转到下一个断点(逐过程执行)Pause script execution停止断点调试step over next function call逐语句执行#xff…一、源码调试/debugger方法1.1控制台调试按钮介绍Resume script execution恢复断点调试、常用在一个方法调用多个js文件(适用冗长js代码使用)、点击这个会直接跳转到下一个断点(逐过程执行)Pause script execution停止断点调试step over next function call逐语句执行每点击它一次js语句就会往后执行一句快捷键-F10step into next function call进入函数内部、单步执行下一个函数调用step out of current function call跳出当前函数调用Step快捷F9停用断点Deactive breakpoints暂停断点Pause on exceptions彩蛋在控制台中输入$(this)即可得到我们所点击的对象——加载更多按钮元素。注进入jquery、vue这样的文件时用 加速跳出同时注意到最好慢点点击。不然出来之后点快了容易跳过要进入的函数。跳出来之后应继续使用进入函数按钮跳进函数内部看信息。1.2 逐过程执行和逐语句执行区别详解假设上图我只在227行打了个断点然后一直点击逐语句执行”按钮到229行这时如果再点击一次“逐语句执行”则会进入下图的js里我们不可能一直使用“逐语句执行”按钮这样你会发现你按了大半天还在库文件里面绕那就该用“逐过程执行”按钮。我除了在227行打了一个断点同时还在237行打了一个断点当我们运行到229行时直接单击“逐过程执行”按钮 js直接跳过了库文件运行到了237行。二、打断点的情况调试2.1操作方法1.在谷歌浏览器中用CommandoptionF打开全局搜索然后搜索对应页面/事件。技巧要看某个函数首先找到这个函数的入口最好先找入口事件从页面最初渲染的函数进去才好一步步往下走。打断点时在函数内部打不要在外部打断点初始化函数常为生成一个DOM...全局搜索对应函数之后直接点进去2.在合适的地方打断点后即可刷新页面了。注意是 状态下3.1会自动跳到函数内部然后通过 按钮不断按函数顺序执行每次执行函数之后都能看到相应函数的含义直到函数执行结束。3.2有时候刷新无效本质是断点没有触发事件那个事件可以是鼠标移入移出点击或点击事件等所有要在界面中进行对应操作就会跳入断点调试阶段。当然也可能上一个函数有错误导致程序不能执行到断点位置。4.执行到最底层时执行栏显示为灰色无法点击2.2 断点调试过程的收益1.具体看某个变量的系数就把鼠标放在上面2.可看每次过程执行之后对应的提示2.3 断点调试案例法一1.在227行打上断点2.点击加载更多按钮3.单击一次“逐语句执行“按钮js代码执行到228行4.用鼠标选中i5.选中以后鼠标悬浮在目标上方你就看到上图的结果。法二、在控制台输出i的值1.按照第一种方法执行到第三步2.打开和sources同一级栏目的console3.在console下方的输入栏里输入i4.按enter回车键即可三、不打断点调试1.没打断点的情况下点击入口函数再点击 按钮进入了函数内部。2.通过 按钮不断按函数顺序执行每次执行函数之后都能看到相应函数的含义直到函数执行结束。四、总结4.1 有无打断点的区别1.没打断点时在console输入ii只是一个局部变量浏览器会把所有的js全部解析完成console并不能访问到局部变量只能访问到全局变量所以console会报错i未定义。2.当js打上断点时console解析到了局部变量i所在的函数内这时i能够被访问。五、断点调试实战小程序断点调试实例(重点介绍--打断点的思路)1.首先看动态效果图、发现一个规律第一次点击的新闻详情没问题控制台正常输出对应的index但是点击的第二个却会报错。VM207:1 Setting data field collected to undefined is invalid.2.全局搜索找到collected相关的代码片段3.通过打断点找问题的方法很重要4.分别在三处不同地点打断点看效果第一处页面初始化onLoad函数中(制作步骤效果、分析效果)第二处(制作步骤效果、分析效果)进入调试发现postCollectedundefined这就是问题所在。第三处收藏按钮函数中(制作步骤效果、分析效果)4.分析问题postsCollected是一个缓存数组其中每一个新闻的index数据在缓存状态中是独立的使用if(postsCollected)会导致第一次点击后缓存里面就被加入一个index的数值了那么点击另外一条新闻之前postsCollected就已经为真了。六、注意事项Debugger实战篇Bug复现Bug配置界面添加数值统计样式然后点击背景颜色更换。观察DOM结构变化。定位Bug对应的函数方法1.问同事这个功能写的对应页面页面有功能注释的话就搜索这个功能的注释这里通过搜索“数值统计”找到了相应功能的函数。2.没人知道页面的情况看这个页面结构通过每一步操作页面结构的HTML变化来判断这个功能的触发引起了哪些页面结构的变化通过变化产生或固有的id和class在项目中全局搜索看到相关函数功能就在这个函数内部debugger;3.如果不在项目中全局搜索id和class在开发者模式-Source-JS文件夹下的每一个JS文件中找功能函数4.debugger之后点击触发这个界面上功能的位置看debugger会不会跳进去不能跳进去就在另外一个有可能的功能函数中debugger;补充实在没有头绪时在开发者模式-Source-JS文件夹下的每一个JS文件中搜索相应函数做判断找到关键函数就在其内部打断点看是否有效果。看代码在开发者模式中看会快很多也方便做笔记。注意debugger后点击对应样式如果样式在界面没出来就点击 为 复原界面样式在页面中先点出对应面貌再进入控制台点击对应debugger的功能位置就会跳入debugger;比如这个例子中是点击对应的背景颜色更改才触发这个功能
