Chrome DOM断点之实现源码追溯

前言：

DOM断点，相信绝大多数的前端同学是知道这一个知识点的，但很多可能停留在技术的表面；

下面我用代码的方式一步一步来讲解如何在实际过程中，使用DOM断点的方式来来实现追溯源码

步骤：

1.首先我们通过 create-react-app新起一个react的脚手架；

2. 将App.js 文件替换成如下代码：

import { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
    const [show, setShow] = useState(true);
 
    useEffect(() => {
        setTimeout(() => {
            setShow(false)
        }, 2000)
    }, [])
 
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.jscode> and save to reload.
        p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        a>
        {
            show && <p>你的牧游哥！p>
        }
      header>
    div>
  );
}
 
export default App;

3. 我们现在看一下视图的gif:

由于不能放置gif, 我们看一下代码逻辑就能看出来，“你的牧游哥！”文字 在停留2秒钟又消失了。

分析：

如果这个脚手架已经发布到域名上去了，那么我们该如何定位出隐藏代码的具体位置，从而分析出隐藏的具体原因是什么呢？

解决：

其实chrome有一个很强大的功能,  找到DOM元素，然后右键，有一个发生中断的条件，分别是子树修改、属性修改和移除节点；这边解释一下：

子树修改：如果当前DOM元素的子节点发生改变，比如移位、或者子节点的属性被修改，都会触发chrome的debugger程序；

属性修改：如果当前DOM元素的任意属性发生改变，也会触发chrome的debugger程序；

移除节点：如果当前DOM元素的子节点被删除了，也会触发chrome的debugger程序；

如上图所示，这种场景下，我们勾选子树修改和移除节点；再次刷新页面；

紧接着，我们走到下图的断点位置，此时断点的代码是react的源码， 

如下图所示，我们可以通过调用堆栈的方式向上追溯，找到我们所需要的demo源码文件位置，并打开源码文件。

 此时就找到了demo的具体代码咯。

如果本文对你有用，请动动小手帮忙点赞 + 关注，感谢！

参考分享链接：你真的会使用DOM断点吗？_哔哩哔哩_bilibili