谷歌调试器------Source

本文介绍了Source选项卡的构成和功能,包括源码区域的断点设置,调试信息中的变量监控,以及如何通过断点进行代码调试。通过案例分析了如何解决点击事件无效的问题,涉及到函数调用、变量检查和代码修改,强调了熟练使用这些工具能帮助开发者快速定位和修复代码问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简介

Source选项卡,该说不说意味着你的头发量,会使用的人赚的钱可以买自己喜欢的东西,不会的人,只能用来去植发了😂
该项选卡可以帮助你快速定位问题,观察程序运行的情况

组成

接下来我们看下面这张图
在这里插入图片描述
source选项卡主要由以上这个区域组成,左侧是你页面加载所需的整个资源。中间部分为源码区域,最右侧就是调试信息了。

  1. 源码区域
    • 最左侧的序号部分,每一个序号都可以点击,点击时会在这一行加一个断点信息,再次点击时,就会取消改行的断点。
    • 断点:就是当代码运行到该行时,则会停止运行,需要你进行操作才继续执行。
  2. 调试信息区域
    • breakpoints这个选项显示源码区域打断点的信息
    • Scope 区域 ,这个区域包含当前所有可用的局部变量,全局变量以及闭包的变量,并且实时更新。
    • Watch 学过vue的小伙伴,应该很容易理解,就是一个监听器,监听你想看的值或者是表达式,并且是实时更新的
    • 其他几个区域小编还没怎没用过。

案例

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值