开源了一款开发提效工具—点击页面 dom 自动把鼠标定位到 IDE 源代码位置(支持 vite/webpack/rspack，支持 vue2/vue3/react/preact/solid)

[zhlx]

效果可以看下面的图片：

这是项目地址：code-inspector

你也可以快速体验在线的 demo：

• vue online demo
• react online demo
• preact online demo
• solid online demo

欢迎大家体验，希望对大家有所帮助

[zcf0508]

非常好用！

[sorude]

感觉有点东西，但是没想到一定要这样做的场景👍

[zhlx]

@zcf0508 哈哈哈，在这遇到老哥了，离不开你的开发支持

[zhlx]

@sorude 开发时候用，对于大项目文件层级深、文件数量多，或者接收新项目的场景，要查找页面组件的源码文件是很麻烦的。用这个插件可以一键定位

[sorude]

@zhlx #4 体验一发 点了个小星星

[SaltedFish12138]

**我愿称之为今年最好用插件**
（拜当前项目所赐， 几百个页面，vue 名称混乱、url 配置乱七八糟、页面嵌套错综复杂，找一个页面都要累死，）

[xudashan]

牛牛牛！感谢感谢！

[zhangkun28273455]

使用了一下，确实很方便👍

[MangoCloud]

原理是啥

[Natsuno]

已安装👍

[zhlx]

@MangoCloud 可以看我这篇掘金的文章，有讲大致原理： https://juejin.cn/post/7288238328381587475

[paopjian]

有没有不用 npm 工具安装的方法呢?项目在网络隔离环境里,安装挺麻烦的,可不可以直接 idea 插件这种?

[xiaoxinshiwo]

牛的，已经 star

[zhlx]

@paopjian 暂时不行，因为插件的能力实现上需要参与到项目的编译过程，所以需要和 vite/webpack/rspack 等打包工具结合使用，单纯的 IDE 插件无法参与到打包过程中

[chf007]

哈哈，有想到一块去了。不过你这个只是想快速找到要修改的地方。我之前有想要搞个这个东西，主要出发点是有些文案上线后，总有产品、运营或老板看到后想要变一下。有了这个东西后就可以让想改的人直接定位到相关代码行，让他们自已改(直接打开 gitlab 编辑器或开个云编辑器)，然后保存自动生成合并请求，我只要审一下代码通过一下走流水线发布就行了。

[zhaol]

之前试过一个叫 LocaltorJs 的浏览器插件，也是类似功能，但是定位好像不准，就没用了

[zhaol]

@zhaol 更正 LocaltorJs -> LocatorJs

[zhlx]

@zhaol 嗯嗯我也看过那个，不过他那个需要安装 npm 包 + 浏览器插件，比较麻烦。我这个只需要装一个 npm 包，定位是绝对准确的

[body007]

建议统一下，我用 git 仓库安装，结果配置好了报错，提示包不存在😂

[zhlx]

@body007 感谢帮忙发现问题！之前是分了 webpack 和 vite 两个包，现在统一了，没发现 readme 没改过来 QaQ

[ovos]

有没有 webstorm 版本呀 大佬

[zhlx]

@ovos 支持 webstorm 的，默认只要你运行了 Webstorm 就能自动识别打开，你可以安装试试。如果不能自动识别打开，可以参照这里手动配置一下： https://inspector.fe-dev.cn/guide/ide.html

[FishBear]

明天试试

[cleanery]

好用, 感谢, 已 star