前端 debug 与 调试 技巧

Debug

常用 debug 方式

• chrome breakpoint

  直接在 source 中打断点

• chrome conditional breakpoint

  在上面的基础上设置条件断点

• chrome logpoint

  执行到断点时执行你写的代码,但是不暂停

• console.log

  最常见的 dubug

• 二分法

  很常见的 debug

• SSR debug

  禁用 js 后 debug

• chrome EventListener breakpoints

  在 source 面板中,可以对某一个事件打断点

• chrome xhr breakpoints

  可以对网络请求打断点

如何找到是谁阻止了冒泡

重写 stopPropagation 方法

const prevStopPropagation = MouseEvent.prototype.stopPropagation
MouseEvent.prototype.stopPropagation = (...args) =>{
    console.trace('stopPropagation')
    prevStopPropagation.call(this,...args)
}

如何找到是哪个函数改变了某个值

例如找到是哪个改变了 width

let prevWidth = element.width
Object.defineProperty(element, 'width',{
    get:()=>{
        return prevWidth
    },
    set:(newVal)=>{
        console.trace('width')
        prevWidth = newVal
    }
})

注意

• 当在调试有 sourcemap 的代码时可能看到的变量不是实际变量,此时可以在 setting -> preferences -> Sources -> Enable JavaScript source maps 设置不使用 sourcemap

排查性能问题

Fps 监视器

首先可以使用 fps 监视器实时监视帧率变化

步骤

1. 测试网页是否存在掉帧现象。

2. 判断是什么操作影响了帧率，缩小范围。

Performance 面板

可以记录一段时间内的 帧数 以及 内存占用 变化

步骤

1. 找到在什么时候出现了掉帧现象

2. 找到导致掉帧现象的函数

3. 在下方可以看到各个函数的执行耗时

4. 进行针对性优化

同时也可以看到内存的变化，辅助内存泄漏的判断。

Memory 面板

可以记录某一时刻的内存占用详细信息

步骤

1. 点击 take a shot 来记录当前时刻的内存占用

2. 执行可能会导致内存泄漏的操作

3. 再次点击 take a shot 来记录此时的内存占用

4. 进行占用分析

Application 面板

主要是当前网站存储的数据，包括 cookies、IndexedDb、localStorage、sessionStorage。

Btw：一般来说当你的电脑打不开而别人的能打开时都是因为有本地缓存，在 application 面板中清理缓存能大概率解决问题。

NetWork 面板

主要是网络请求，可以排查和网络请求有关的问题。