vue 浏览器调试 样式如何定位样式_浏览器断点调试-程序员的必修课

一、源码调试/debugger方法

1.1控制台调试按钮介绍

f0869db41cdc75033dab39c0b1b14ca0.png
9b8a383c2e7abe83abbb69fb8de9bc09.png

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

75d021881b79542b0e82dd5708d1c562.png

Pause script execution停止断点调试

d6dc451b5d2b9494861b4d1f37b353da.png

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

257c2a519ba59e6f3a49b500fd9d602c.png

step into next function call进入函数内部、单步执行下一个函数调用

1b684b2af9e2978c8fe134ae870149a9.png

step out of current function call跳出当前函数调用

99e1b2f7d4e2eb9ede192ed9216b116e.png

Step快捷F9

a0e1d2d182418fd29c02d289a763a751.png

停用断点Deactive breakpoints

54a68bf22f0537b5e33b4932a41f3704.png

暂停断点Pause on exceptions

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

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

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

824c382c6a2d423fde54420a23984d34.png

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

则会进入下图的js里:

f1483266cd514e9c1fa09456747140ae.png

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

64dd4e99ec8b40224aad9af2f47c004f.png

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

二、打断点的情况调试

2.1操作方法

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

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

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

efb2b1212cb5bcec95404e3ec2d28497.png

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

1f3cb25be3cf7271e2f40632d8d9c5b7.png

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

cf6830b293d369fd23145661386da347.png

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

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

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

bc36c281ce8351b60f0877ff7a13f032.png

2.2 断点调试过程的收益

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

bb8d1ff93748b5b2ca510e54658a6252.png

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

1d0ef343c7c14b9508870b876a47c3bd.png

2.3 断点调试案例

ebab02bdacebb3f20b3c9b712bac0eb6.png

法一

1.在227行打上断点

2.点击加载更多按钮

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

4.用鼠标选中i++

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

d87ff24e785dab74ddb4584f49e75ffb.png

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

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

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

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

4.按enter回车键即可

三、不打断点调试

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

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

9f6e6131449eaf47e3c4773624a6bab1.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.通过打断点找问题的方法很重要

6a08e531b13daef6d53c51d2d476a2ab.png

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

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

102e85cf4f5c7678a2159cb2a5082ada.png

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

8f4c551631fbd83bddf24e3a0c35db4f.png

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

5818858e1c628ad689222287320f2f09.png

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

4fefd3938f7f02a8c2f1de30d5550ebd.png

4.分析问题:

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

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

六、注意事项

Debugger实战篇

Bug

f38e7e69e07ab1c77541fe1732a8485e.png

复现Bug

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

定位Bug对应的函数方法

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

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

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

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

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

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

271e4ccceaf96963798f9b4d4ae885bb.png

注意:

debugger后点击对应样式,如果样式在界面没出来,就点击 为 复原界面样式

在页面中先点出对应面貌

63ce6c49e8bd6b4557498554ff6c421c.png

再进入控制台,点击对应debugger的功能位置就会跳入debugger;

比如这个例子中是点击对应的背景颜色更改才触发这个功能;

820263ddcad71db547322bb9804acf59.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/564771.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python: ufunc ‘bitwise_xor‘ not supported for the input types,....

错误: ufunc bitwise_xor not supported for the input types, and the inputs could not be safely coerced to any supported types according to the casting rule safe 原因: 错误使用 ^ 解决: 将使用的 ^ 全部改为 ** &#xff0c…

https open api_Web上的分享(Share)API

我认为Web Share API非常酷,简而言之,它会利用您所使用的平台上的原生共享功能(如果该平台支持的话)。我喜欢这个:远远不止这些东西:为什么?Web Share API只是几行代码。简单!没有图像,没有重量…

Java多对多关系示例

使用集合不仅可以表示一对一的关系,也可以表示多对多的关系。例如,一个学生可以选多门课程,一门课程可以有多个学生参加,那么这就是一个典型的多对多关系。 要完成上面要求,首先应该定义两个类,分别是学生…

无季节效应的非平稳序列分析(一)

目录 Cramer分解定理(1961年提出) 差分 R语言函数 diff 例题: 过差分: 小结 Cramer分解定理(1961年提出) 任何一个时间序列 都可以分解为两部分的叠加:其中一部分是由多项式决定的确定性趋势成分&a…

求一个任意实数c的算术平方根g的算法设计思想_算法复习第四篇——贪心法

公元2020年5月5日,距离算法考试仅剩4天。一、知识归纳1.设计思想只根据当前已有的信息就做出选择,而且一旦做出了选择,将来无论如何都不能更改不从整体最优考虑,所做的选择只是在某种意义上的局部最优这种选择并不总能获得整体最优…

安装百分之80卡住_关注丨男子翻越高铁站台丢命,家属向铁路部门索赔80万!法院这样判...

去年3月,一名男子翻越高铁站台被卡住致死引发广泛关注。事发后,其家属将铁路部门告上法庭,索赔80余万元。日前,法院宣判:死者杨某擅自闯入危险区域负全责,其父母要求铁路部门赔偿的诉请被驳回。事件还原201…

ARIMA模型的介绍

目录 ARIMA模型结构 随机游走模型(random walk) 举例: ARIMA模型的性质 小结 ARIMA模型结构 使用场合:差分平稳序列拟合 模型结构 则有: 随机游走模型(random walk) 模型结构: Karl Pearson(1905)在《自然》杂志上提问:假…

java斗地主游戏

使用java实现斗地主小游戏。 程序分析: 1、创建扑克牌的实体类Poker,设置四个参数:花色、数字、牌值(判断大小)、是否地主牌,实现getset方法和构造方法; 2、创建玩家的实体类Player&#xff0…

为什么总是封板又打开涨停_警惕!如果股票涨停板反复打开说明了什么?

股市禁忌“三进三出”:“三进”为:一是“高位进”,这就是我们常说的追涨。犯有这种错误的投资者,喜欢在股票已经有了很大的涨幅后买进,其买进的依据往往是股票已经放量突破了历史高点或突破了某个高点阻力位等&#xf…

python中表示空类型的是_python中怎么表示空值

首先了解python对象的概念 python中,万物皆对象,所有的操作都是针对对象的。 那什么是对象?5是一个int对象,‘oblong是一个str对象,异常也是一个对象,抽象一点是,人,猫,够…

动态背景登录

前端动态背景登录 效果演示 完整代码 首先我们要导入jquery.js包 html代码 <!doctype html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge,chrome1&qu…

ARIMA模型的建模和预测

目录 基本过程&#xff1a; 1.Green 函数递推公式 2.ARIMA模型的预测 例题 小结 基本过程&#xff1a; 1.Green 函数递推公式 ARIMA模型 也可写成 确定 设 则可得Green函数递推公式 2.ARIMA模型的预测 原则&#xff1a;最小均方误差预测原理 传递形式&#xff1a; 预测…

python画画用哪库好_数据可视化哪款工具更好用?对比7款Python 数据图表工具的性能...

更多腾讯海量技术文章&#xff0c;请关注云加社区&#xff1a;https://cloud.tencent.com/developer/column 作者&#xff1a;CDA数据分析师 摘要&#xff1a;Python 的科学栈相当成熟&#xff0c;各种应用场景都有相关的模块&#xff0c;包括机器学习和数据分析。数据可视化是…

jsp论坛网站模版_网站被降权了?看看这些解决方法,或许有帮助哦

点击标题下「蓝色微信名」可快速关注在前面的文章中&#xff0c;笔者已经给大家介绍了网站被降权的因素。那么当遇到降权的问题该怎么办呢&#xff1f;接下来&#xff0c;笔者就结合本身经历过的网站降权来给大家介绍一下补救措施。1、造成网站首页降权的原因&#xff1a;服务器…

ARIMA模型之疏系数模型

目录 1.疏系数模型的定义 2.拟合ARIMA疏系数模型函数 例题&#xff1a; 小结 1.疏系数模型的定义 ARIMA(p,d,q)模型是指d阶差分后自相关最高阶数为p&#xff0c;移动平均最高阶数为q的模型&#xff0c;通常它包含pq个独立的未知系数: 如果该模型中部分自相关系数 ,1≤j<…

动画分享菜单

制作一个动画分享的菜单 效果演示 注意&#xff1a;在我们的程序开始之前我们一定要导入jquery.js架包并且找到如图所示的矢量图标。 完整代码 html代码 <!DOCTYPE html> <html> <head> <meta http-equiv"Content-Type" content"text/…

java 双向链表_23张图!万字详解「链表」,从小白到大佬

链表和数组是数据类型中两个重要又常用地基础数据类型&#xff0c;数组是连续存储在内存中的数据结构&#xff0c;因此它的优势是可以通过下标迅速的找到元素的位置&#xff0c;而它的缺点则是在插入和删除元素时会导致大量元素的被迫移动&#xff0c;为了解决和平衡此问题于是…

安庆机器人编程选_安庆市首届中小学机器人创客竞赛举行 460名选手比智慧拼创新 科技感满满!...

机器人熟练完成“奥林匹克火种”采集、点燃、传递等动作;“小狗皮皮的智能家园”、智能停车场、多功能智能小车等创意智能作品巧思新奇……11月28日&#xff0c;在2020年安庆市中小学机器人创客竞赛活动现场&#xff0c;可谓科技感满满&#xff0c;炫酷十足。本次比赛由市教育体…

有季节效应的非平稳序列分析之因素分解

目录 6.1 因素分解理论 6.2因素分解模型 6.2.1因素分解模型的选择 6.2.2趋势效应的提取 简单中心移动平均的良好属性 R语言中&#xff0c;使用filter函数可以做简单移动平均 6.2.3 季节效应的提取 6.2.4 X11季节调节模型 X11模型分析步骤&#xff1a; ​ 确定性…

python变量的使用_python – 如何在变量中使用冒号(:)

你想要一个 slice() object&#xff1a; index slice(0, 2) print(somelist[index]) slice()模拟您可以在[start&#xff1a;stop&#xff1a;stride]预订语法中指定的start,stop和stride值作为对象. 从文档&#xff1a; Return a 07001 object representing the set of indic…