hdiiegojkjkgaakbdjpoaaadhnddpfdc
Click a component in your browser to instantly open the source in VS Code, WebStorm, Cursor, TRAE, etc. 1. Option+Click(Alt+Click) a component in your browser to instantly open the source in VS Code. 2. Option+RightClick(Alt+RightClick) opens a context menu with the parent components. 3. Support custom configuration to open WebStorm, Cursor, GitHub, etc. 4. Support `data-__source-code-location` - Vue using [vue-click-to-component](https://www.npmjs.com/package/vue-click-to-component) generate. - React using [babel-plugin-transform-react-jsx-data-source-code-location](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-data-source-code-location) generate. 5. Support React `__source` (generated by [@babel/plugin-transform-react-jsx-source](https://babeljs.io/docs/babel-plugin-transform-react-jsx-source)). You can config `Site access` to `On Click` or `On specific sites` for this extension to control click-to-component script inject.
Gimli Tailwind
A DevTools extension enabling smart tools for Tailwind CSS. The professional Devtools extension for Tailwind CSS developers. It lets you view and intuitively edit utility classes. Please note: Gimli Tailwind requires a $49 one-time lifetime license. No subscriptions. You can purchase your license via the extension (includes a 14-day money-back guarantee). ✔️ Autocomplete: Intelligent suggestions for class names. It also supports searching for CSS property names. ✔️ Quickly toggle utility values with Cmd/Ctrl + Click. ✔️ Intuitive UI We don't want to overwhelm developers with options and inputs. Here’s a list of features that enable developers to find relevant utilities quickly: ➤ Variant override: Displays what variant is active. ➤ Inputs are grouped the same way as in the official docs. ➤ Some sections like Grid and Flex will only be visible when relevant. ➤ Active inputs are always shown. ➤ Customizable UI.
React1s
点击页面元素跳转到编辑器 随着 React 项目越来越大，在本地开发时经常会遇到这样一个场景，想改页面上的一个组件，但是比较难去定位到这个组件在源码中对应的位置。本插件无需任何配置，支持 React 项目本地开发时 Option(Alt)+Click 页面上对应元素即可跳转到编辑器对应组件行列。
React Click To Component
React Click To Component, a Chrome extension to open a React component in the editor by clicking on it. React Click To Component, is a Chrome extension to open a React component in the editor by clicking on it. `Option + Click` (on MacOS) or `Alt + Click` (on Linux/Windows) takes you to the code editor The extension also supports TurboPack builds where the project root is not exposed. You'll just need to setup the project root file when prompted. The updated value can be manipulated on the localStorage as required. To see how this works, checkout the repo at and raise any issues on the extension at the GitHub repository. And if you like the extension, star the repo too! Features - Option + Click or Alt + Click on a component to open the file in an editor - Highlight the component name when hovering over it with Option/Alt key pressed - Supports Turbopack builds with manually defined project roots (that can be changed simply by updating the localStorage key clickToReact-projectPath-{HOST}) - Now the extension copies the path to clipboard instead of opening the file, for editors that doesn't support opening file:// URLs. You can set the editor with clickToReact-editor-{HOST} localStorage key.
LocatorJS
LocatorJS Chrome Extension - option-click to code (ReactJS) Click on any component in the browser to open its code in your IDE. Supports React, Preact and SolidJS components. Select your IDE, and then use option-click or alt-click on any website with supported components. ReactJS works in most localhost environments out-of-the-box. Preact, SolidJS and some ReactJS stacks require installation of babel plugin, more info on www.locatorjs.com Extension is completely open-source and available on https://github.com/infi-pc/locatorjs
