结合 click-to-react-component 打造超级爽的 React 调试体验
如果说业务开发中最重要的能力，那定位代码的能力肯定是其中之一。
业务项目一般代码都很多，你拿到一个需求之后，可能改起来不难，但是要定位在哪里改比较难。
特别是接手别人写的代码的时候。
大家都是怎么在不熟悉的项目里定位的代码呢？
很多都学都是搜文案，搜 className。
这样没问题，但如果你用了 styled-component 之类的方案之后，className 都是动态生成的：
而且不少项目都做了国际化，你搜文案会搜到资源包里，而不是组件代码里：
当然，你可以进一步根据国际化的 key 来搜索源码的对应组件。
但这样总归比较麻烦，而且还不一定能搜到准确的位置。
那有什么好的办法可以快速定位代码么？
有，就是 click-to-react-component。
我们创建个项目：
改下 main.tsx：
安装 antd，我们随便写几个页面：
App.tsx：
Aaa.tsx：
Bbb.tsx：
这些都是从 antd 官网复制的 demo 代码。
不用管具体的代码内容，我们只需要看下怎么定位代码。
把开发服务跑起来：
渲染出来是这样的：
如果我们想定位下面卡片的代码，就可以通过搜索文案或者 className：
但复杂项目就不行了。
这时候可以引入 click-to-react-component：
在 main.tsx 引入下：
可能有类型的报错，我们直接 @ts-ignore 忽略好了。
然后打开页面试一下：
可以看到，现在按住 option + 单击，就会直接打开它的对应的组件的源码。
如果按住 option + 右键单击，可以看到它的所有父级组件，然后选择一个组件打开：
这样在页面上看到了啥东西就可以直接打开它的组件代码来改，特别高效。
当然，我们的 demo 比较简单，来看个真实项目里的使用效果：
比如我想改这个登录弹窗的表单，就可以直接定位到对应组件的 Input。
对于大项目的维护来说真的超级方便。
而且如果把 click-to-react-component 和组件调试结合，调试体验会非常爽。
比如我们要调试这个页面，理清这个输入框的内容是哪里来的：
我们先在项目里引入 click-to-react-component
用它来定位这个输入框的源码在哪：
添加调试配置后启动 debug：
然后在刚定位到的组件 return 的地方打个断点：
发现这个 value 是从父组件通过 props 传进来的。
所以要继续去父组件里打断点。
但是 React 组件渲染的时候调用栈里都是 react 源码，找不到父组件在哪。
那怎么办呢？
这时候可以借助 click-to-react-component 展示所有父组件的能力：
按住 option + 右键，点击父组件：
这样就定位到了父组件里渲染这个子组件的源码位置：
这时候发现这个值依然是通过 props 传进来的。
所以我们用同样的方式继续往上找：
定位到了一个自定义 hooks，参数都是这里返回的：
在这里打个断点调试下： 
不断 step into 进入函数内部，最终，我们找到了这个参数的来源：
在 localStorage 里读取了某个 key，key 的名字也调试出来了。
这样我们就达成了调试目标。
整个过程我们根本不需要去理清业务代码的逻辑。
想想看，你是接手这个业务项目的新人，虽然你还没看这些业务代码，但你可以快速定位界面上显示的值的来源，定位到代码在哪里改。
是不是就很高效！
总结
对于业务代码来说，快速定位源码是很重要的。
因为改动可能很简单，但是项目大了定位在哪里改就比较麻烦了。
我们也可以通过搜索文案、className 的方式，但对于用了 styled-component、做了国际化的项目来说，这种方式也不行。
所以更推荐用 click-to-react-component 来快速定位源码。
只要在页面上 option + 单击，或者 option + 右键单击然后选一个组件，就可以直接打开对应组件源码的行列。
结合 vscode 断点调试，可以快速定位某个值的来源：
- option + 点击页面元素定位到源码
- 打断点看一下值的来源
- 如果是来自父组件，那就用 option + 右键查找父组件，直接定位到源码
- 在定位到的父组件源码里打断点
- 不断往上找，直到找到产生这个值的地方，断点调试
这样，就算你不懂这段业务逻辑，也能快速梳理清楚整个流程，并知道在哪里改代码。
#前端#
