{"id":13504503,"url":"https://github.com/zthxxx/react-dev-inspector","last_synced_at":"2025-05-13T21:09:52.630Z","repository":{"id":37738552,"uuid":"296251053","full_name":"zthxxx/react-dev-inspector","owner":"zthxxx","description":"jump to local IDE code directly from browser React component by just a simple click","archived":false,"fork":false,"pushed_at":"2025-02-07T22:18:06.000Z","size":26082,"stargazers_count":1211,"open_issues_count":12,"forks_count":68,"subscribers_count":6,"default_branch":"dev","last_synced_at":"2025-04-28T12:16:26.399Z","etag":null,"topics":["dev","fiber","inspector","react","react-inspector"],"latest_commit_sha":null,"homepage":"https://react-dev-inspector.zthxxx.me","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zthxxx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-17T07:25:25.000Z","updated_at":"2025-04-25T08:43:38.000Z","dependencies_parsed_at":"2024-05-08T08:46:20.867Z","dependency_job_id":"b491fbe0-4bc5-456a-a3af-cb69b416fbd3","html_url":"https://github.com/zthxxx/react-dev-inspector","commit_stats":null,"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zthxxx%2Freact-dev-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zthxxx%2Freact-dev-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zthxxx%2Freact-dev-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zthxxx%2Freact-dev-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zthxxx","download_url":"https://codeload.github.com/zthxxx/react-dev-inspector/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311337,"owners_count":21569010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dev","fiber","inspector","react","react-inspector"],"created_at":"2024-08-01T00:00:44.217Z","updated_at":"2025-04-28T12:16:42.302Z","avatar_url":"https://github.com/zthxxx.png","language":"TypeScript","funding_links":[],"categories":["Dev Tools","TypeScript"],"sub_categories":["Debug"],"readme":"\u003ch1 align=\"center\"\u003eReact Dev Inspector\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-dev-inspector\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/npm/v/react-dev-inspector\" alt=\"NPM Version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-dev-inspector\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/npm/dt/react-dev-inspector\" alt=\"NPM Downloads\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://nodejs.org/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/npm/node/react-dev-inspector\" alt=\"Node.js\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/zthxxx/react-dev-inspector/blob/master/LICENSE\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/github/license/zthxxx/react-dev-inspector\" alt=\"License\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Introduction\n\n**react-dev-inspector** is the tool for seamlessly code navigation from browser to IDE.\n\nWith **just a simple click**, you can jump from a React component on the browser to its source code in your local IDE instantly.\nThink of it as a more advanced version of Chrome's Inspector.\n\nSee the document on: https://react-dev-inspector.zthxxx.me\n\n#### Why React Dev Inspector\n\nHave you ever run into any of these issues 🤔:\n\n- You've got to fix some bugs in your team's project, but you have no idea where the heck page/component's code is located.\n- You're eager to dive into an open-source project that interests you, but it's hard to find where the code for the page/component is implemented.\n- You may thinking about a component and want to quickly peek at its code, but don't want to memorize or manually expand those never-ending deep file paths.\n\nThat's exactly why react-dev-inspector was created.\n\n\u003cbr\u003e\n\n### Quick Look\n\nJust check out this demo below and you'll get it in a snap.\n\nShowcase: https://react-dev-inspector.zthxxx.me/showcase\n\n\u003e screen record:\n\n\u003cvideo alt=\"inspector-preview\" src=\"https://github.com/zthxxx/react-dev-inspector/assets/15135943/f88d3644-b603-484c-963a-a7db13036b9b\" loop autoplay muted\u003e\u003c/video\u003e\n\nWanna try out the demo right now? Sure, here is the online demo:\n\n[\n  ![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)\n](https://stackblitz.com/edit/github-x3rkzl?file=package.json,vite.config.ts%3AL17)\n\n\u003cbr/\u003e\n\n## How to Use and Configure\n\nAccording to the working pipeline [below](#how-it-works), the **Part.1** and **Part.2** are what you need configure to use.\n\nBasically, it's includes:\n1. [add the `\u003cInspector/\u003e` component in your page](https://react-dev-inspector.zthxxx.me/docs/inspector-component)\n2. [integrate the middleware in your framework's dev-server](https://react-dev-inspector.zthxxx.me/docs/integration)\n\nCheck the [Documentation Site](https://react-dev-inspector.zthxxx.me/docs) for more details\n\n\u003cbr/\u003e\n\n## How It Works\n\nHere is the working pipeline of `react-dev-inspector`:\n\n[\n  ![Working Pipeline](https://github.com/zthxxx/react-dev-inspector/raw/dev/docs/images/working-pipeline.svg)\n](https://react-dev-inspector.zthxxx.me/docs#how-it-works)\n\n\u003cbr/\u003e\n\n### 0. Inject JSX Source\n\nThe compiler's [`plugin`](https://react-dev-inspector.zthxxx.me/docs/compiler-plugin)\nrecords source path info into React components during development stage.\n\n\u003e **Note:** The **0** of _Part.0_ implies that this section is generally **OPTIONAL**.\n\u003e Most React frameworks offer this feature **_out-of-the-box_**,\n\u003e which means you usually **don't** need to manually configure it additionally.\n\n### 1. Inspector Component\n\nThe react-dev-inspector provide a [`\u003cInspector/\u003e`](https://react-dev-inspector.zthxxx.me/docs/inspector-component) component to reads the source info,\nand sends it to the dev-server when you inspect elements on browser.\n\n### 2. Dev Server Middleware\n\nThe react-dev-inspector provide some [middlewares](https://react-dev-inspector.zthxxx.me/docs/integration) for dev-server in most frameworks to receives source path info from API,\nthen call your local IDE/Editor to open the source file.\n\n\u003cbr/\u003e\n\n---\n\n## Articles about it\n\n- [Chinese] [🎉 我点了页面上的元素，VSCode 乖乖打开了对应的组件？原理揭秘](https://juejin.cn/post/6901466406823575560)\n\n\u003cbr /\u003e\n\n---\n\n## License\n\n[MIT LICENSE](./LICENSE)\n\n\u003e Thanks for @zthxxx @sonacy @sl1673495\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzthxxx%2Freact-dev-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzthxxx%2Freact-dev-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzthxxx%2Freact-dev-inspector/lists"}