谷歌浏览器调试工具中sources面板

本文导读:断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,谷歌浏览器Chrome开发工具中的Sources面板,提供了非常方便的断点调试的功能。

Sources面板是chrome developer tool中的断点调试面板。我们打开Sources面板后其实会在界面中看到如下内容

 

一、区域1

(1)、表示网站文件目录树,它的功能有些类似于Resources面板,主要是显示网页加载的脚本文件:例如css, js等资源文件

(2)、双击选中文件,该文件内容会在区域2中显示,如果你选中的是js文件,那么你可以在区域2种单击行号进行断点调试,只要js执行到了你所标记的这一行,它会停止向下执行并且等待你的命令

(3)、区域1的导航条上有三个tab切换选项,他们都存有不同域名和环境下的js和css文件

 

 

二、区域2

 

(1)、左侧所选文件的具体内容展示区

(2)、如果打开的JS文件,可以单击这个区域的最左侧,可以给相应的JS设置断点进行调试

 

 

三、区域3

这一模块有俩个可切换区域:

 

scope :显示当前断点的作用域


watch :点击+号可添加你所需要监控的变量或者表达式

 

 

四、区域4

 

(1)、断点调试的各个功能键如图

在上图蓝色圆圈中数字,它们分别代表:


1、停止断点调试
2、不跳入函数中去,继续执行下一行代码(F10)
3、跳入函数中去(F11)
4、从执行的函数中跳出
5、禁用所有的断点,不做任何调试
6、程序运行时遇到异常时是否中断的开关

 

(2)、下面这块的功能说明

1、Call Stack 显示当前断点的环境调用栈,就是从该函数起,逐级追寻调用到他的函数名。


2、Breakpoints 当前js断点列表,“点击区域2的行号列”即完成在当前行添加/删除断点操作,添加的每个断点都会出现在此处,双击列表中断点就会定位到内容区的断点上;当某个断点在执行的时候对应的信息会高亮。

3、DOM Breakpoints 当前DOM断点列表列表

[1]、在DOM元素上添加断点,进而达到调试的目的

[2]、DOM断点的添加流程为:打开Elements面板——定位到相关DOM节点——单机鼠标右键,弹出侧边栏——鼠标移动到Break on...上,选择相应选项subtree modifications/attributes modifications/node removal即可。


4、XHR Breakpoints 当前xhr断点列表,可以通过“XHR Breakpoints”右侧的“+”号为异步断点添加断点条件,当异步请求触发时的URL满足此条件,JS逻辑则会自动产生断点。

输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求,输入内容就相当于 URL 的过滤器。如果什么都不填,那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。


5、Event Listener Breakpoints 事件监听器断点设置处

事件监听器断点,即根据事件名称进行断点设置。当事件被触发时,断点到事件绑定的位置。事件监听器断点,列出了所有页面及脚本事件,包括:鼠标、键盘、动画、定时器、XHR等等。


6、Event Listeners 当前事件监听断点列表

 

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
谷歌浏览器Chrome)是一款流行的网络浏览器,它内置了强大的开发者工具,其包括用于打断点调试的功能。在JavaScript开发,打断点是一种非常有效的调试技术,它允许你在代码的特定行暂停执行,以便查看和分析程序状态。 以下是使用Chrome浏览器打断点调试的基本步骤: 1. **设置断点**: - 打开开发者工具:按F12或右键点击页面并选择"检查"(Inspect)。 - 在源代码面板Sources)找到你想设置断点的文件和行号。 - 点击行号左侧的空白区域,或者直接双击该行,就可以设置断点。断点图标变为红色表示已启用。 2. **运行调试模式**: - 通常情况下,你需要在开发者工具选择" Sources",然后运行你的应用或脚本,它会在遇到断点时暂停。 3. **单步执行**: - 程序在断点处暂停后,你可以使用控制台工具(Console)的"Step Over"、"Step Into"和"Step Out"按钮来逐步执行代码,观察变量变化。 4. **检查变量值**: - 在暂停时,你可以查看当前执行上下文的变量值,包括在Watch(监视)面板自定义的变量。 5. **断点条件**: - Chrome还支持设置断点条件,即只有当某个表达式的结果为真时才会暂停,这对于复杂的逻辑调试非常有用。 6. **条件断点和行条件断点**: - 你还可以设置行条件断点,只有满足特定条件时才会执行到那行。 7. **断点管理和移除**: - 你可以随时编辑、删除已设置的断点,以适应调试需求的变化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值