LocatorJS is a Chrome Extension that lets me click on a component that I see on my locally running app and open its code in my VSCode. With just one simple click.
Locator is solving one simple problem: when developing React web app on “localhost”, I see some component, and I want to quickly find where it is in the codebase. Sometimes I do it so often that it gets really annoying, especially in a codebase that I don't know so well. The operation usually is not so slow; I can try to find some HTML classes that match with something in the codebase, or I can copy some text on the page and paste it into the editor's search. But with Locator, I can do it much faster than with any way I was used to. It is so fast that I use it in many cases where I know exactly where the part is in the codebase.
A couple of months ago, when I created the first version, LocatorJS was a Babel plugin that had to be installed to a project I wanted to use it on. But the Babel plugin had some inconveniences. So now I have released LocatorJS Chrome Extension that solves them.
The new LocatorJS is not dependent on Babel, so it works with other modern build tools like ESBuild or SWC, and there is no need to add it to the project codebase. For most of the modern codebases, it just works. You only need to install the extension to your browser.
It works with any editor that supports protocol URL handlers. It has predefined link templates for VSCode, Webstorm, and Atom, and you can customize the links to any other editor (including cloud-based editors and websites).
For example, on locatorjs.com website, I set it to link to its repo on Gihub.com.
In the background, Locator uses the same API as React Developer Tools, and it takes its information about the original position of the component in the codebase. That means it will work only in development environments that expose such information.
Most React-based Frameworks/Boilerplates such as Next.js, Vite, or Create React App include such information with a Babel plugin or its alternative. Specifically, in the Babel ecosystem it is babel-preset-react preset that adds babel-plugin-transform-react-jsx-source for development environments. If you don't have such plugin, it should be easy to add it, or you can add our Babel plugin that does a very similar thing but also includes full LocatorJS into the project.
I have published it as open-source under an MIT license, so feel free to fork, modify and send pull requests.
Also, I have kept the original Babel plugin version in the same repo, so it is possible to run it in a production environment. For example, as a demo on locatorjs.com.
And you can get the extension on Chrome Web Store
Top comments (0)