# 前端调试的一些没卵用的技巧

**Repository Path**: samuelsue/frontend-debugging-tricks

## Basic Information

- **Project Name**: 前端调试的一些没卵用的技巧
- **Description**: 平时工作中的一些总结的东西
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-16
- **Last Updated**: 2022-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端调试的一些没卵用的技巧

## 1. 追溯js修改DOM元素的style

使用MutationObserver监听dom元素的属性变化

```javascript
    const boxNode = document.querySelector('div.box');
    const observer = new MutationObserver((mutations)=>{
      console.log(mutations);
      // 可以断点调试，查看callStack找到引发变化的代码
    })
    if(boxNode){
      observer.observe(boxNode,{
        attributes: true,
        childList: true, // 子元素也监听
        attributeFilter: ['style'] //
      })
    }
    // ===========test=========================
    setTimeout(()=>{
      boxNode.style.backgroundColor = 'pink';
    }, 2000)
```

## 2. 计算屏幕帧率(比Date.now精度高)

```javascript
const titleNode = document.querySelector('#title');
let prev;
// 展示代码
const throttleShow = (() => {
    let prev = 0;
    return (frame) => {
        const now = Date.now()
        if (now - prev > 500) {
            titleNode.innerHTML = `当前屏幕刷新率为(Hz):${frame}`;
            prev = now
        }
    }
})()
// 使用performance.now()进行高精度计时
const getNow = () => window.performance.now()
// const getNow = () => Date.now()
const calcFrame = () => {
    if (!prev) {
        prev = getNow()
    } else {
        const now = getNow()
        const frame = (1000 / (now - prev)).toFixed(0);
        throttleShow(frame);
        prev = now;
    }
    requestAnimationFrame(calcFrame);
}

calcFrame();
```