浏览器DevTools-源代码(Source)

本节我们将会介绍4种你可能不知道的开发者工具栏中的source的使用方法, 看完本节, 你讲会大大的的提高代码调试能力, 也不用自己mock数据或者请求了, 直接在浏览器中搞定.

1. 断点调试

断点调试是一种帮助我们快速定位和分析我们的程序的方法, 不仅仅可以让我们抛弃在程序中大量使用console的方法,并且它也是我们更加深入javascript语言运行时状态的理解的提升.

说到断点, 我们的程序有哪些断点?

• 代码行 : 暂停特定的代码区域。
• 条件代码行: 暂停特定的代码区域，但仅当其他一些条件为 true 时才暂停。
• 日志点 : 在不暂停执行的情况下将消息记录到控制台。
• DOM :暂停在更改或移除特定 DOM 节点或其子节点的代码上。
• XHR :当 XHR 网址包含字符串模式时暂停。
• 事件监听器: 暂停在事件（如 click）触发后运行的代码。
• 异常 :在抛出已捕获或未捕获异常的代码行暂停。
• 功能 :在每次调用特定函数时暂停。
• 可信类型 :暂停信任类型违规行为。

三种不同类型断点

直接点击代码的侧边栏——直接断点: 中断代码

右键点击侧边栏后,选择条件断点——条件断点: 仅仅会在满足我们添加的条件时执行

右键点击侧边栏后, 选择添加日志点——日志断点: 会在控制台输入一个特殊的日志效果

为DOM元素添加节点

当我们想要了解一个dom元素的生命周期或者是代码对这个元素的影响, 除了使用上面的三种断点直接调试代码来了解页面逻辑外, 我们还可以使用DOM断点来调试:

1. 点击元素标签页。
2. 转到要设置断点的元素。
3. 右键点击相应元素。
4. 将鼠标悬停在划分点上，然后选择子树修改、属性修改或 节点移除。

2. 在浏览器中运行js片段

当我们需要在线上环境中运行一大段代码, 并且我们只是想调试一下这段代码的影响和逻辑, 那么使用代码段就会十分方便, 如图:

3. 直接在浏览器中修改源代码

通常我们需要在本地编辑器中改动好之后,刷新页面才能看到我们想要的效果, 但是我们也可以在浏览器中直接修改本地文件!

除此以外, 我们还可以通过工作区选项倒入本地的开发文件来修改

4.模拟响应文件(抛弃Mock吧…)

众所周知, 作为一名前端开发我们除了需要在本地自己进行页面+交互逻辑的开发以外, 我们还需要发起请求获取后端的数据, 而当业务发生改变, 对应接口出现新增/删除/改变导致我们可能需要等待后端的排期才能拿到数据进行调试, 在此之前, 我们就可以使用浏览器自带的tools来替换对应接口的标头和内容 ,如下:

在开启chrome读取文件的权限后,我们刷新页面,发现 原先的请求的响应内容已经被替换掉了并且在我们选择的文件夹下面多处了一个文件, 这个就是刷新页面后被响应的文件

我们不仅可以替换js响应, 还可以替换json响应内容, 还可以是 HTTP 响应标头