Guidebook

# Network

# 如何查看资源请求的上游和下游？

按住shift键，鼠标hover在请求上，可以查看请求的上游和下游，如下图所示，hover在common.js上，可以看到有一个绿色请求、一个红色请求。其中绿色请求表示common.js的上游请求，即谁触发了common.js请求，红色请求表示common.js的下游请求，即common.js又触发了什么请求。

# 断点调试

https://zh.javascript.info/debugging-chrome#debugger-ming-ling

  • 下一步（Step）”：运行下一条指令，快捷键 F9**。**

  • 跨步（Step over）”：运行下一条指令，但 不会进入到一个函数中**，快捷键** F10**。**

  • “步入（Step into）”，快捷键 F11**。**

​ 和“下一步（Step）”类似，但在异步函数调用情况下表现不同。

只需要记住“下一步（Step）”命令会忽略异步行为，例如 setTimeout（计划的函数调用），它会过一段时间再执行。而“步入（Step into）”会进入到代码中并等待（如果需要）。详见 DevTools 手册 (opens new window)。

  • shift + F11 Step out of current function 退出函数，断点出移至下一行

# 如何在微信小程序中打断点

在小程序sources中打断点，找到对应js文件，右键选中某一行

image-20220124155106523

# Ignore Library Code While Debugging

https://dilshankelsen.com/ignore-library-code-while-debugging-browser/

调试时跳过代码库

chrome framework ignore list （苹果浏览器中可能名称叫BlackBox）

# Framework Ignore List

支持正则表达式

# 如何调试项目中的node_modules

我在阅读vue源码时，需要console.log打印来调试一下，首先去node_modules对应包下的package.json查看main字段，该字段代表了包的入口文件。

但是我们一般用的是脚手架项目，所以是module字段

关于package.json 中的 Module 字段是干嘛的 (opens new window)

# 使用performance减慢渲染

在调试过程中，可以使用 Performance 接口来模拟较慢的渲染。

你可以使用 performance.now() 方法获取当前时间，然后在渲染代码中添加一个循环，检查时间是否已经达到预期，如果还没有达到，就继续进行循环。这样可以模拟较长的渲染时间。

const start = performance.now();
const duration = 1000; // 设置渲染持续时间为1秒

while ((performance.now() - start) < duration) {
  // 渲染代码
}
1
2
3
4
5
6

# CSS class debug-浏览器调试CSS

classname变化时调试

https://blog.csdn.net/zxxzxx23/article/details/90705073

# Memory面板

image-20240111152207297

面板中的shallowSize和RetainedSize代表什么

Shallow size：对象的直接内存总数，直接内存是指对象自身占用的内存大小。 Retained size：对象的最大保留内存，保留内存是指对象被删除后可以释放的那部分内存。

(closure)：使用函数闭包的对象

(array, string, number, regexp)：一系列对象类型，其属性指向Array/String/Number/Regexp。

# 浏览器调试监控变量和闭包

image-20240903203620696

在调试时可以通过scope中watch某个变量或闭包来达到监控的目的

# 使用Performance Monitor面板监控页面性能

参数说明：

  • CPU useage -- 当前 CPU 占用情况。
  • JS Heap size -- 堆内存使用情况。
  • DOM nodes -- DOM 节点数量
  • JS event Listeners -- js 事件监听器的数量
  • Documents -- 实时文档资源的数量
  • Document frames -- 页面上活动框架的数量（iframe 和 workers）
  • Layout/sec -- 浏览器必须重新布局 DOM 的速率
  • Style recalc/sec -- 浏览器必须重新计算样式的速率

# 关于hover显示的元素如何调试

hover显示的元素，一旦鼠标离开就会隐藏。我们就看不到dom结构了

# 🔧 方法一：暂停在调试器里

  1. 打开 DevTools → Sources 面板。
  2. 勾选 Pause on DOM mutation（在 Chrome 叫 DOM 断点）。
    • 在 Elements 里右键 body → Break on → Subtree modifications。
    • 这样当 Popover 插入 DOM 时会自动暂停。
  3. 此时 Popover 出现，JS 被暂停，你就能在 Elements 面板里展开它，不会消失。

# 🔧 方法三：用延迟冻结页面

  1. 当 Popover 出现时，按下快捷键 F8 (或 ⏸ Pause script execution)。
    • 会立刻冻结 JS，不会再触发隐藏逻辑。
  2. 然后就能慢慢在 Elements 里查看结构。

单点登录 →