谷歌浏览器调试工具中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 当前事件监听断点列表
谷歌浏览器调试工具中sources面板相关推荐
- 谷歌浏览器开发调试工具中Sources面板 js调试等 完全介绍
这次分享的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板.通常只要是开发遇到了js报错或者其他代 ...
- chrome开发者工具功能拾遗:Sources面板篇
本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能.也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工 ...
- bootstrap 隐藏元素_Bootstrap中折叠面板的样式内容
Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容,控制内容的可见性.它是一个灵活的插件,使用少量的类(来自必需的过渡插件),以方便切换行为. 运作方式 插件用 ...
- 为什么本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效?
2019独角兽企业重金招聘Python工程师标准>>> 为什么本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效?新手学习js或jquery时,一般是在本地调 ...
- elementUI中折叠面板箭头图标位置调整
工作中有时设计图要求实现折叠面板需求,element官网给出的示例中,面板展开收起的箭头图标是在最右面,如图所示: 但由于设计需要,需要将箭头放在最左边,通过f12代码调试发现header是flex布 ...
- 计算机中通道的基本功能,Photoshop中各个面板的基本功能介绍 -电脑资料
各个面板的基本功能介绍如下: 图层面板:用于控制图层的操作,可以进行混合图像.新建图层.合并图层以及应用圈层样式等操作, 通道面板:用于记录图像的颜色数据和保存蒙版内容.在通道中可以进行各种通道操作, ...
- ubuntu 20.04中sources.list文件恢复系统默认源
前言 ubuntu 20.04中sources.list文件恢复系统默认源 小白学习,误该后改不回来,找了很久才找到,做个记录 一.sources.list文件恢复系统默认源 1.进入编辑 sourc ...
- axure内联框架和动态面板_Axure中动态面板和母版有什么区别
Axure(http://www.axurechina.cc/)软件中有很多组件,而我们最常用的Axure中动态面板和母版有什么区别呢? 一:动态面板组件从字面上理解是一个动态的.由面板组成的一个组件 ...
- Axure中动态面板和母版有什么区别
Axure(http://www.axurechina.cc/)软件中有很多组件,而我们最常用的Axure中动态面板和母版有什么区别呢? 一:动态面板组件从字面上理解是一个动态的.由面板组成的一个组件 ...
最新文章
- 我的LDAP使用手记(Fedora-ds) 备忘用
- 2019年第十届蓝桥杯国赛B组试题G-排列数-next_permutation枚举,模拟
- 前端学习(648):转换为boolean
- QT —— 应用程序发布
- cookie 在线人数列表_前端学习随笔2 在线简历
- Mysql8.0 的sql修改成 Mysql7.X的sql
- 最近使用计算机的记录,windows7查看最近使用记录
- (37)VHDL实现RS触发器
- 用wxDraw.js制作酷炫的小程序canvas动画『wxDraw 小程序界的zrender』
- CreateThread,_beginthread与AfxbeginThread之间的区别
- 分布式事务之两阶段提交
- java实现推荐算法实例_从技术角度分析推荐系统案例
- win10更改了用户名后远程登录还要用原来的用户名怎么修改
- JAVA 身份证校验与统一社会信用代码校验
- 【RPA学习天地:版本解读】艺赛旗iS-RPA2021.2版本亮点
- 跟着b站大学学习C语言--哔哩大学计算机学院
- 如何设计一个聊天机器人?谈谈聊天机器人技术栈
- 任正非在荣耀送别会上的讲话(泪奔)
- 沈阳二本计算机工资,想进国家电网?这两所二本超过很多985!
- SAP中分配和分摊的区别
热门文章
- 小雨伞java jdk_Java 获取JDK和平台OS的基本信息
- express加密密码时报错 Error [ERR_CRYPTO_HASH_FINALIZED]: Digest already called
- 如何提高工作效率--慢思考
- 总结一: 如何提高效率
- PageHelper 分页插件
- 爬虫(12,13)selenium练习 12306案例
- linux查询ulimit参数,Linux ulimit 参数
- vue项目px转vw教程链接
- FBEC2021 | Unity大中华区平台技术总监杨栋:从Unity引擎出发,助推元宇宙技术实现
- 原生js设置div隐藏或者显示_用js控制div的显示与隐藏