search

vivipure / TIL

Today I learned
0 stars 0 forks source link

Chrome Devtools 指南 #27

Open vivipure opened 2 years ago

vivipure commented 2 years ago

Debug

在平时开发时，使用 Chrome Devtools 可以快速调试我们的程序，定位问题。

一. 断点

1. 1 代码断点

代码断点标识了代码暂停的位置，代码运行时，遇到断点就会停止执行。

如何进入：

  1. 在 console 中打印对应函数名，点击就可以进入到函数的内部，添加断点就可以进行Debugging.
  2. 使用log， 通过log 堆栈，进入对应的代码
  3. 代码debugger, 在打开 devtools 时执行代码会自动暂停
  4. 在 Ctrl Shfit F中搜索关键字，找到相关逻辑并进入

断点除了直接断点，也可以添加条件断点，当代码符合某个逻辑才暂停。可以根据具体场景进行使用

1.2 DOM 断点

当JS操作DOM时，会更改DOM的属性或者结构，Devtools 提供 DOM断点，在DOM变化时进入断点逻辑

如何使用： 选中元素，右键选择 break on, 选择对应场景。

subtree modifications ：后代变化

attribute modifications ： 属性变化

node removal ： 节点删除

1.3 XHR 断点

我们可以通过主动添加 XHR断点， 根据接口地址添加断点，当浏览器发送该请求时，就能进入当前逻辑内。

除此之外我们也可以通过 Network -> 请求 -> Initiator 中查看代码堆栈进入对应逻辑

1.4 事件断点

在Elements 中选中具体元素，然后找到属性 EventListers ，找到对应事件，进入到代码逻辑中添加断点。

也可以在 Sources 中直接选中对应事件，然后勾选断点。当对应事件触发时，即触发断点

二. 调试

设置断点后就是调试代码，了解代码实际运行时的逻辑。

快捷键：

  1. F10 按行步进
  2. F11 进入到当前函数内部
  3. F12 跳出当前函数

2.1 Watch

Watch 中可以监听变量的值，在处理一些循环时，我们可以讲关注的变量添加到 Watch 中方便我们查看变量变化

2.2 Scopes

当前代码执行处所在的作用域，可以查看当前可以访问到的变量值

2.3 Call Stack

执行堆栈，可以通过执行堆栈精确定位到代码触发的位置

三. 改动代码

有些调试场景并不在本地，而是在网路上。当我们想直接改动代码来调试逻辑时，我们可以通过以下步骤实现代码的改动

  1. Sources -> Overrides 选择本地文件夹
  2. 在代码中进行改动，然后保存，代码会保存到 Overrides 指定文件夹中
  3. 刷新，代码断点就会走本地JS逻辑，我们也可以在本地JS中进行修改

总结

通过 Devtools 进行Debug 不仅方便我们快速定位问题。熟练掌握能力后，对于常见的前端逆向推导，也十分有益处。

调试时注意函数入口和出口，观察变量变化。通过二分法快速断点，可以快速定位异常位置。

vivipure commented 2 years ago

Network

TODO