【源码】基于 React 和 Chrome 扩展的代码定位开发工具

项目简介

本项目是基于 React 和 Chrome 扩展开发的代码定位开发工具，借助特定 Babel 插件，可有效提升 React 开发者的开发效率与体验。

项目的主要特性和功能

1. 支持快速定位页面代码、切换测试环境，可在控制台安装 npm 包。
2. 按下控制键并鼠标右键点击，能查看当前组件的所有父/子组件列表，点击即可跳转至编辑器。
3. 解决了当前页面与 content - script 间的 CSS 污染问题。
4. 开发模式下具备 Chrome 扩展热更新功能。
5. 采用 React 开发 Chrome 扩展。

安装使用步骤

假设用户已下载本项目的源码文件。 1. 安装插件：解压源码文件，进入 dist 目录，安装其中的 Chrome 扩展插件。 2. 启动开发：在项目根目录执行 yarn start 命令，此时 dist 目录下的文件可热更新，且会自动刷新当前页面。 3. 使用工具：在 Chrome 浏览器里，通过控制键 + 鼠标右键查看组件的父/子组件列表并跳转编辑器；也能在控制台使用命令安装 npm 包。 4. 构建打包：若要打包为生产版本，在项目根目录执行 yarn build 命令，将生成的 dist 目录作为插件包安装。

注意：使用该项目需要一定的 React 开发经验和 Chrome 扩展开发知识，使用前建议熟悉相关技术和工具。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】