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

简介

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

组成

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

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

案例

在这里插入图片描述
发现点击按钮无效 接下来我们打开调试器,
在这里插入图片描述
然后我们选中的这个按钮元素,找到他的点击事件,点进去代码所在位置如下图
在这里插入图片描述
在20行打个断点。当然还有其它进来源码的操作,比如你在console选项卡有个报错信息,点击报错信息也会进入源码位置,再比如你在本地代码中在某一行输入了debugger,当程序运行到这时也会进如源码。

接下来 咱们继续。我们再次点击一下按钮
在这里插入图片描述
我们发现代码已经停在这一行了
接下来我来讲解一下图中圈起来的按钮是什么意思:

  1. 一直运行,直到遇到下一个断点 (Resume)
  2. 执行完该行代码,跳到下一行代码 (stepOver)
  3. 进入函数内(stepInto)
  4. 执行该函数并返回到上一次调用处(stepOut)

接下来我们一步一步看调试结果在这里插入图片描述
发现用的isEmpty 是个引用,该引用指向一个函数,但是一直没有调用,因此一直判断为true
然后对源代码进行修改 然后保存 crtl + s,在进行调试
在这里插入图片描述
发现还是返回ture 于是我们定位在 isEmpty()函数的问题
在这里插入图片描述
然后发现原来是isEmpty()函数返回值写反了,进行如下修改在测试
在这里插入图片描述
发现结果还有问题,于是我们继续测试,并监听结果值
在这里插入图片描述
发现结果值是字符串相加,于是我们得查看getNumber函数
在这里插入图片描述
发现确实是返回了字符串,因此修改源码继续测试
在这里插入图片描述
发现计算结果正确了,但是为空的时候显示的字符串没出来,继续调试
在这里插入图片描述
发现为空判断是根据原始获得的值来判断的继续修改代码如下
在这里插入图片描述
至此问题已经解决。

小编说的都是一些基础用法,等大家用多了,就能快速的定位代码了。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-devtools是一个用于调试Vue.js应用程序的浏览器扩展工具。它可以帮助开发人员检查组件层次结构、状态、事件和性能等方面的信息。\[1\] 要安装Vue-devtools,首先需要从GitHub上下载并编译安装。可以使用以下命令克隆Vue-devtools的GitHub仓库:git clone https://github.com/vuejs/vue-devtools.git。然后,找到下载的文件夹路径。\[2\] 安装完成后,进入该文件夹下的node_modules文件夹,找到vue-devtools文件夹。在该文件夹下的vender文件夹中,修改manifest.json文件中的persistent为true。最后,将vender文件夹拖至谷歌浏览器的扩展程序中即可。重启浏览器扩展程序后,就可以使用Vue-devtools了。\[3\] Vue-devtools的使用可以帮助开发人员更好地调试Vue.js应用程序。它提供了一些功能,如查看组件层次结构、检查组件的状态和属性、监视事件和性能等。通过使用Vue-devtools,开发人员可以更方便地进行Vue.js应用程序的调试和优化。\[1\] #### 引用[.reference_title] - *1* *3* [vue-devtools的安装与使用](https://blog.csdn.net/weixin_43843572/article/details/124980771)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [下载、编译、安装、使用 vue-devtools](https://blog.csdn.net/weixin_59916662/article/details/127358896)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值