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)
blank

相关推荐

  • 基于MQTTnet 3.0.12实现MQTT服务器和客户端「建议收藏」

    基于MQTTnet 3.0.12实现MQTT服务器和客户端「建议收藏」基于MQTTnet3.0.12实现MQTT服务器和客户端概述-可看可不看的废话MQTT是啥MQTTnet正文MQTTServer/Broker实现MQTTServer/Broker创建MQTTServer/Broker发布消息MQTTClient实现MQTTClient创建MQTTClient发布消息MQTTClien订阅消息MQTTClien取消订阅消息概述-可看可不看的废话公司基于制造业客户的数据采集需求,在布局自己的数据中台。现在物联网的概念很火,辣条从业7年来一直号称是“自动化

  • java中 servlet和jsp的概念及区别

    java中 servlet和jsp的概念及区别林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka目录一了解Servlet的概念二Servlet技术功能三Servlet技术特点四Servlet生命周期五servlet工作过程六Servlet与JSP区别七Servlet代码结构八Servlet第一个程序一、了解Servlet的概念

  • 试题库管理系统–数据库设计[通俗易懂]

    试题库管理系统–数据库设计[通俗易懂]一、概要设计1.1背景和意义目前,许多高校绝大多数课程还采用考教统一的模式来完成教学过程,这种传统的考试模式在教学到实施考试的过程带有很大的主观随意性和不规范性。另外随着各高校近年来学生规模的扩大,教学任务日益繁重,教师的工作量相应的不断增加。迫切需要计算机辅助教学系统来打破这种传统的教学模式,减轻教师的工作负担,提高教学质量。因此,本文研究设计了一个试题库管理系统,来解决和缓解高校课程

  • ubuntu18.04更新内核_如何查看linux系统内核版本

    ubuntu18.04更新内核_如何查看linux系统内核版本1.查看内核版本2.修改apt源编辑在尾部增加一行/etc/apt/sources.listdebhttp://security.ubuntu.com/ubuntutrusty-securitymain更新apt-getupdate3.查看可更新的内核apt-cachesearchlinux-imageapt-cachesearchlinux|greplinux-headers本次我们更新4.15aptinst…

  • 扩展卡尔曼滤波EKF与多传感器融合

    扩展卡尔曼滤波EKF与多传感器融合ExtendedKalmanFilter(扩展卡尔曼滤波)是卡尔曼滤波的非线性版本。在状态转移方程确定的情况下,EKF已经成为了非线性系统状态估计的事实标准。本文将简要介绍EKF,并介绍其在无人驾驶多传感器融合上的应用。

  • ideavim怎么用_idea常用快捷键图文

    ideavim怎么用_idea常用快捷键图文学了这么久的VIM,当然还是要用在开发上。下面来介绍一下ideavim这个插件。IdeaVim是用于基于IntelliJ平台的IDE的Vim仿真插件。IdeaVim支持许多Vim功能,包括普通/插入/可视模式,动作键,删除/更改,标记,寄存器,一些Ex命令,Vimregexp,通过〜/.ideavimrc配置,宏,窗口命令等。另外还可以自定义ideavim的快捷键,定制专属的快捷键。安装I…

发表回复

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

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