# react source code debug 过程

clone react sourcecode

[how to contribute](https://legacy.reactjs.org/docs/how-to-contribute.html)

切到分支17.9.2

```bash
yarn build react/index,react-dom/index --type=UMD
# 不需要 yarn install
```

```bash
# chrome dev tool 选中元素
# you can click on a DOM element, when you click on a DOM element, “== $0” appears after it.
# $0 等效 document.querySelector 选中的元素
```

## $0

dev tool 源代码，按esc，出现控制台，可以打印源代码运行过程中设置的变量 \`$[0.xxx](http://0.xxx)\`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681286447452/6e4df1f6-0bab-4334-93f0-da35da0f3ae8.gif align="center")

## 鼠标悬浮方法名上，显示详情，显示方法跳转链接

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681286570146/adb90505-f9b9-4bf4-9bd6-bc40966302d9.gif align="center")

## breakpoints 右键，可以 disable 所有 breakpoints

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681286771351/a159974b-482f-48bb-9bcf-8a939f34124a.gif align="center")