javascript断点调试

javascript断点调试一、方法11.断点文件位置打开chrome,找到Sources,在一堆的文件夹里面找到你要调试的js文件,打开它:下面是html前端展示:2.打断点当你运行代码的时候,例如:操作搜索按钮点击事件,出现未知问题。首先,给Sources里面的js文件打断点。点击你要调试的代码的行数,发现行数会被标记为蓝色(chrome),这说明已经成功打断点了,恭喜你成功了第一步。3.断点调试对断点进行调试,首

大家好,又见面了,我是你们的朋友全栈君。

一、方法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 展示的也是实时变量

这里写图片描述


——– 未完待续 ——-

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143427.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • SpringSecurity认证授权学习笔记

    SpringSecurity认证授权学习笔记

  • linux远程开机wol,Wol在线远程开机、唤醒工具使用说明「建议收藏」

    linux远程开机wol,Wol在线远程开机、唤醒工具使用说明「建议收藏」判断主机是否支持远程开机?关机模式下,BIOS的电源管理菜单下有RemoteWakeUp或WakeonLAN选项的电脑才支持远程开机,若无此选项则不支持远程开机(假如RemoteWakeUp开启后不支持远程开机,请咨询硬件提供商。)如何进入bios:当电脑启动时,通过反复按“DELETE”键或“F2”键,进入BIOS设置。通常都是到“PowerManagment”下寻找,”Wake…

  • mac键位的键盘_键盘键位图高清126键

    mac键位的键盘_键盘键位图高清126键mac和Windows在键盘上还是有一些差距的,在习惯了Windows的键位之后还是很难第一时间转换到mac的键位上,为大家整理了一下mac的键位分布,和常用的快捷键。Mac键盘键位分布【F1~12】与传统键盘不同的是,Mac键盘,只是多了几个功能键,可以简单将Mac上的【fn+F112】对应Win上【F112】,其Mac环境上的功能,如下图标注所示。Command键(⌘)Command键是mac独有的一个按键,大多数的快捷组合键都是和它配合使用,相当于Windows下的Ctrl键的功能,但

  • BigDecimal.setScale()方法实用技巧

    BigDecimal.setScale()方法实用技巧方法使用scale()方法用于格式化小数点setScale(1,BigDecimal.ROUND_DOWN)直接删除多余的小数位,如2.35会变成2.3setScale(1,BigDecimal.ROUND_UP)进位处理(无论小数如何),2.35变成2.4setScale(1,BigDecimal.ROUND_HALF_UP)四舍五入,2.35变成2.4(目前最常用的金额处理方法…

    2022年10月20日
  • 海思Hi3798处理器参数,Hi3798芯片详细信息介绍[通俗易懂]

    海思Hi3798处理器参数,Hi3798芯片详细信息介绍[通俗易懂]Hi3798CV200集成4核64位高性能CortexA53处理器、内置NEON加速引擎,强大的CPU处理能力可以满足各种差异化的业务需求。在码流兼容性、在线视频播放的流畅性、图像质量以及整机性能方面保持业界最好的用户体验。支持4K2KP60@10bit超高清视频解码和显示,支持H.265/HEVC、H.264/AVC、AVS+、MVC、MPEG2、MPEG4、VC-1、VP6、VP…

  • webmin的repo

    webmin的repo

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号