react-inspector
vite-plugin-vue-inspector
react-inspector | vite-plugin-vue-inspector | |
---|---|---|
2 | 3 | |
133 | 634 | |
- | - | |
2.5 | 6.9 | |
about 1 year ago | 3 days ago | |
TypeScript | Vue | |
- | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-inspector
-
Ask HN: How do you relate rendered HTML to the TypeScript file it came from?
There is a nifty SvelteKit plugin called Svelte Inspector[1] that lets you select an element in the browser and open the source file in you IDE. It doesn't always get the line number perfectly, but it's pretty good.
I think it is based on https://github.com/webfansplz/vite-plugin-vue-inspector
And this seems to be a similar tool for React: https://chrome.google.com/webstore/detail/react-inspector/gk...
There is also React Dev Tools: https://chrome.google.com/webstore/detail/react-developer-to...
If none of those suit your needs, I think most of them are open-source. So modify as needed~
[1]: https://joyofcode.xyz/svelte-inspector
-
Published Chrome extension for streamlined React development🎉
GitHub: https://github.com/hand-dot/react-inspector
vite-plugin-vue-inspector
-
Ask HN: How do you relate rendered HTML to the TypeScript file it came from?
There is a nifty SvelteKit plugin called Svelte Inspector[1] that lets you select an element in the browser and open the source file in you IDE. It doesn't always get the line number perfectly, but it's pretty good.
I think it is based on https://github.com/webfansplz/vite-plugin-vue-inspector
And this seems to be a similar tool for React: https://chrome.google.com/webstore/detail/react-inspector/gk...
There is also React Dev Tools: https://chrome.google.com/webstore/detail/react-developer-to...
If none of those suit your needs, I think most of them are open-source. So modify as needed~
[1]: https://joyofcode.xyz/svelte-inspector
-
Better DX in Vue apps with Vite Devtools
You can also use the "Inspector" feature to inspect the DOM tree and see which component is rendering it. Click to go to your editor of the specific line. Making it much easier to make changes, without the requirement of understanding the project structure thoroughly. (This feature is implemented based on the vite-plugin-vue-inspector)
-
[Vite Plugin] Jump to local IDE source code while click the element of browser automatically.
vite-plugin-vue-inspector
What are some alternatives?
apollo-client-devtools - Apollo Client browser developer tools.
vite-plugin-pwa - Zero-config PWA for Vite
devtools-ds - UI components, libraries, and templates for building robust devtools experiences.
vite-plugin-webfont-dl - ⚡ Webfont Download Vite Plugin - Make your Vite site load faster
unplugin-vue-components - 📲 On-demand components auto importing for Vue
vike - 🔨 Flexible, lean, robust, community-driven, fast Vite-based frontend framework.
vscode-vite - One step faster for Vite in VS Code ⚡️
vite-plugin-inspect - Inspect the intermediate state of Vite plugins
vite-plugin-md - Markdown with Vue for Vite
vue-firebase-template - This is what i think can be a complete stack for a production grade project using Typescript + Vite + Vue + Firebase
vite-plugin-vue-devtools - Vite + Vue DevTools = DX 🔥
router - 🚦 The official router for Vue.js