专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

使用chrome调试工具解决问题(四)

ins518 2024-11-19 05:07:58 技术文章 15 ℃ 0 评论

在chrome中断点调试

下面是谷歌官网关于断点调试的Demo: Get Started Debugging JavaScript with Chrome DevTools,页面上写两个数,然后两个数相加求和,结果有问题,通过断点的方式来查找解决问题

源代码(Sources)选项卡

1:表示我们整个页面所加载出来的资源,包括jS,包括CSS,包括页面,包括图片,全在这里边;top表示我们整个页面,整个页面下它加载了一些资源;googlechrome.github.io表示资源所在的域,域下边是资源的文件结构。

2:显示这个资源的内容。

3:展示的是断点信息

4:当代码运行到断点位置的时候,展示它目前所能使用的所有的局部变量以及全局变量,以及壁包产生的东西。

开始调试

根据观察我们发会发现,这个错误是我点击了这个按钮之后产生的

按如上图1~4步定位到按钮的点击事件。

在这个函数第一句代码打上一个断点,再点击求和按钮,程序会停在第一句话。

上面这个按钮表示:执行完这一行代码,把这一行代码全部执行完,跳到下一行代码;

上面这个按钮表示:一步步看每行代码详细执行过程;

上面这个按钮表示:把这个函数立即执行完,回到上层调用;

上面这个按钮表示:恢复运行,直到遇到下一个断点,如果说没有遇到断点,那就运行结束。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表