Chrome设置断点的各种姿势
Chrome设置断点的各种姿势
最近在翻看Chrome devtools的文档,刚看到了关于断点调试这里,感觉发现了新大陆-。- 本文记录一下如何在Chrome上设置断点,以及可以设置哪些断点,并不涉及具体调试相关的操作。
在JavaScript代码中设置断点
刚工作时被leader安利了Chrome浏览器,那时一说到调试,就知道这一个操作 以为在行号上单击一下就是打断点,就是会调试了:)
当然这也是最最基本的打断点的方式了,当然了,相较于 调试全靠alert 已经高端很多了。
首先需要打开Devtools
切换到Source
页签,然后在左侧file navigation
中找到我们要设置断点的文件并打开。
在打开的页面上单击对应的行号即可设置断点。
同时也可以通过在行号上右键点击Add breakpoint
来设置断点。
当断点触发时,整个页面会处于暂停状态,并会切换到Source页签断点处方便调试,直到终止该断点调试后页面才会继续运行。
设置断点的行号上会显示一个蓝色的矩形来告诉你这里有一个断点。
P.S. 当一个表达式跨行时,添加的断点会默认下移到该表达式结束后的一行
在JavaScript代码中设置条件断点
当知道了如何在行号上单击来添加断点,已经能满足最最最基本的调试了。
但如果遇到一些特殊情况,断点添加起来不是那么的舒服的时候要肿么办呢?
比如说我写了一个循环,该循环会执行10
次,可是我发现程序在第8
次执行时的结果并不是我想要的。(不禁回想起刚工作时,有类似的问题,我当时的处理方式就是一手托腮,另一只手放在F8键上,狂按数十下后正襟危坐,开始调试)
显然,Chrome
已经帮我们想到了这种场景,我们可以通过添加一些条件断点来避免一些无意义的断点。
我们可以通过右键行号,选择Add conditional breakpoint
来添加一个带有条件的断点。
这是我们会看到界面上多出了一个输入框,并提示我们将在XXX行设置一个只会满足下列表达式的时候才会暂停的断点-.-
结合上边的场景,我们就在输入框中键入如下表达式,当循环计数器count
全等于8
时,会暂停页面并进入调试。
回车确认后我们就得到了一个金黄色的矩形来标识。
删除或禁用JavaScript断点
删除断点的方式,选择菜单栏中的Remove breakpoint
。
禁用断点的方式,选择菜单栏中的Disable breakpoint
或者直接在设置了断点的行号上单击即可。
或者我们也可以通过debugger
模块来统一管理所有的断点。
点击断点对应的复选框可以禁用断点,右键选择Remove breakpoint
也可删除断点。
以及一些对断点的其他操作也可以通过右键菜单来实现,禁用激活所有的断点之类的。
在DOM元素上设置断点
断点不仅仅可以设置在JS代码上,还可以在DOM元素上设置断点 刚刚看到时我都惊呆了,没想到竟然还有这种操作。
我们可以设置三种断点
-
subtree modifications
子节点内容的的修改删除新增(子节点的属性修改不会触发,当前节点的修改不会触发) -
attribute modifications
当前节点的属性修改删除新增 -
node removal
当前节点被移除
我们需要切换到Elements
页签,在想要添加断点的DOM节点上右键点击,在最下边的Break on
菜单项可以找到这三个选项
当我们的脚本触发了DOM的修改时,devtools
会直接跳转到Source
页签并定位到修改DOM的那行代码上
同时我们还可以通过debugger
模块来管理所有的DOM断点,
可以看到所有的DOM断点,以及他们所监听的类型,
也可以进行一键删除之类的操作。
XHR请求的断点
我们可以通过debugger
下的XHR Breakpoints
来管理XHR
请求相关的断点。
点击➕新增一个断点,我们可以选择输入一个链接地址,当一个XHR
请求的链接与所输入的值匹配时,便会中断进程进入断点。
或者我们可以选择直接回车,监听所有的XHR
请求
P.S.如果想要监听XHR
请求的某个状态,可以参考下文
各种事件的断点
用了这个再也不用担心多人开发时找不到事件处理的代码写在哪里了。
这里边可以监听的事件挺全的。。就是勾选复选框即可,当触发某个事件时,便会跳转到对应的代码中去。
截图展开部分就是XHR
请求周期的各种状态事件
异常断点
当代码出现异常时,我们会在Console
页签看到错误提醒,并可以通过后边的锚点找到对应的文件以及定位到出错的代码行。
但是这时代码已经抛出了异常,我们可以通过设置异常断点,在抛出异常前进入断点进行调试。
点击debugger
上边的的这个小图标,就可以设置在程序抛出异常时进入断点。(灰色为禁用-.-悬浮icon会有提示)
小记
只想说,Chrome
真的很强大。
平时能用到Chrome Devtools
的功能也是少之又少。
仅仅一个打断点就能搞出这么多花来,很期待接下来能够在文档中发现什么。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微服务[学成在线] day07:课程管理开发
- 微服务[学成在线] day08:FastDFS 实现课程图片管理
- 【MySQL入门】之细说脏读、幻读及不可重复读
- 微服务[学成在线] day09:Eureka、Feign、课程预览实现
- 【MySQL入门】之MySQL数据库的锁机制(一)
- 【MySQL入门】之MySQL数据库的锁机制(二)
- 【MySQL】删库别着急跑路(一)--Xtrabackup的原理及使用
- 微服务[学成在线] day11:基于 ElasticSearch 构建搜索服务
- 【MySQL】删库别着急跑路(二)--mysqldump的使用
- 【MySQL】删库别着急跑路(三)--binlog2sql闪回工具的使用
- 微服务[学成在线] day10:课程发布、ElasticSearch
- MySql监控分析视图-sys schema
- 如何使用PyMysql操作MySQL数据库?
- 【redis】部署及参数详解(吐血整理,建议收藏)
- 【MySQL性能调优】-关于索引的那些事儿(一)