# 同事用Compose写的Ui，怎么找代码在哪里？

一个阳光明媚的早晨，有个产品需求从天而降，说要在这个弹窗上加个文案：

<img src="https://i.imgur.com/OSD5pd0.jpg" width="200"/>

> 当然这个页面过分简单，只是举了个Demo

即然要接盘别人写的代码，首先，就得**根据UI把对应的代码**找出来。再品一品。

<img src="https://i.imgur.com/VBZNyET.jpg" width="200"/>

**但是！！！**

这个弹窗是写在哪里了呢？

最快的方法，就是群里找同事问问：

“谁见过这个代码\[通常还带一个狗头\] ？”

<img src="https://i.imgur.com/TMVG9et.jpg" width="230"/>

然后答案就来了～

**但是！！！**

万一这段陈年老码，已经隐世多年，无人知晓了呢？

<img src="https://i.imgur.com/72sIEUr.jpg" width="200"/>

只能使出搜索大法，看看Ui附近都出现了哪些**字符串**，赶紧**全局搜一搜**。

终于搜到了，才下眉头，却上心头。

居然只是个资源id，还要顺藤摸瓜地找上去。

<img src="https://i.imgur.com/k8ygeZy.jpg" width="200"/>

**但是！！！**

万一根本搜不到呢？这个弹窗居然是张可配的图片！

遇到是非固定文本的Ui怎么办呢？

甚至想看Dialog有多少个引用的心都有了？

<img src="https://i.imgur.com/hO7Qp4c.jpg" width="200"/>

**不怕！！！**

说时迟，那时快，果断打开了一个找代码神器：

<img src="https://i.imgur.com/xMcixYY.jpg" width="320"/>

只要**手指点击**屏幕上要找的元素，面板上就会出现**Ui的层级**以及对应的**代码位置**！

好家伙，果然是个图片:smiley:～

这里看到 `Image` 所在的位置是 `DemoDialogFragment.kt` 的57行～

在IDE里面打开看看：

<img src="https://i.imgur.com/8bPGscb.png" width="520"/>

成功的找到了Ui对应的代码! 接下来就可以磨刀霍霍了。

有了这个工具，再也不怕老板问我今天干了啥，

我只能说正在深入了解业务体系，并做好充分的心理建设，顺便熟悉下代码。

<img src="https://i.imgur.com/Q1EK43m.jpg" width="230"/>

回想起当年接入这个工具的时候，就只需要在 `build.gradle` 中声明：

dependencies { //在mavenCentral
    debugImplementation "io.github.yvescheung:Uinspector:2.0.10"
    // 如果有用Jetpack compose，要加这个
    debugImplementation "io.github.yvescheung:Uinspector-optional-compose:2.0.10"
    // 如果要支持 Glide 等额外的属性，要加这个
    debugImplementation "io.github.yvescheung:Uinspector-optional-glide:2.0.10"
    // 还有其他一些扩展库，可以在github上面查看... 
}

然后就完事了！不需要写任何代码，就可以在通知栏中开启这个工具！

除了 `Jetpack compose` 以外，普通的 `Android View` 也可以用它来找所在的`Fragment`。

如果对实现原理有兴趣的话，就到[github](https://github.com/YvesCheung/UInspector)上看看吧。

一个阳关明媚的早晨，要开始去写弹窗了。告辞。

<img src="https://i.imgur.com/dvsa8cQ.jpg" width="340"/>