Using SolidJS Dev-Tools Locator Feature
Tags: solidjs, tooling, tutorial, webdev
Published: 2022-08-19 10:18:12

In my [previous article](https://dev.to/mbarzeev/taking-solidjs-dev-tools-for-a-spin-44m2) I went through how to get the SolidJS Dev-Tools up and running with your application. I covered the **Debug** feature which allows you to debug the reactivity graph, and also the **Logger** which lets you log more specific events within the framework (like effect re-executing etc.)

In this post I’m going to dive into the [Locator](https://github.com/thetarnav/solid-devtools/tree/main/packages/locator#readme) feature which is supposed to allow “locating components on the page, and going to their source code in your IDE.”

***

## The Babel Transform Plugin
Before I do that I wanna fix something which kinda bugged me before and also acts as an enabler for the Locator to work. If you remember, when opening the debugger you had a lot of “weird” names to the signals, which looked like “s606947053”:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02clgbkdktqjfhqlrd2j.png) 

As @thetarnav (the dev-tools project’s maintainer) mentioned to me, there is a solution for that which involves a Babel plugin that extracts the given name so it can later be parsed by the debugger. Let’s give it a go -

Following the [docs](https://github.com/thetarnav/solid-devtools/tree/main/packages/transform#readme) I’m installing the Babel plugin:

`yarn add -D @solid-devtools/transform`

(Notice I’m installing it as a dev dependency)

Next I will add the required configuration to my project’s vite config, like so:

```javascript
import {defineConfig} from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtoolsPlugin from '@solid-devtools/transform';
 
export default defineConfig({
   plugins: [
       devtoolsPlugin({
           jsxLocation: true,
           name: true,
       }),
       solidPlugin(),
   ],
   build: {
       target: 'esnext',
       polyfillDynamicImport: false,
   },
});
```

Since I don’t have a store here I’m not using the “wrapStores” option, but only the `jsxLocation` and the `name`. Refreshing the application and I can see names of my signals - 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtdlriphc0af9extpg69.png) 

Yep, here is “cursor” and bufferGap”. Noice. 
Moving on to the Locator feature…

## The Locator
So now that we got better names for signals it is time to check out the Locator feature.
As I mentioned before, you need to have the babel transform plugin set, with the `jsxLocation` enabled.

The [docs](https://github.com/thetarnav/solid-devtools/tree/main/packages/locator#enable-the-locator-plugin) say to “configure it by calling useLocatorPlugin with some options”, which is great but the question remains - where?!
I will go with what I think makes the most sense, that is the project’s entry point, which now looks like this:

```javascript
import 'solid-devtools';
import {render} from 'solid-js/web';
 
import './index.css';
import App from './App';
import {useLocatorPlugin} from 'solid-devtools';
 
useLocatorPlugin({
   key: "shiftKey"
   targetIDE: 'vscode',
});
 
render(() => <App />, document.getElementById('root'));
```

And after refreshing, when I’m holding the shift-key I see the related component I’m hovering on:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rgoks3hi7e8k3o8edn6.png) 

That’s nice, and when clicking it BOOM!, my VSCode IDE is opened at the right place for the highlighted component.
If you open and inspect the elements on the page, you will see that each relevant one has a `data-source-loc` attribute to it which holds the file path, line and column of the source code:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qp80k703fpe64xtuen7.png)  

Sweet :)

## Dev Mode
You would probably want things like the Locator executing only when developing a feature, and not on production. Solid has this nice [“DEV” feature](https://www.solidjs.com/docs/latest/api#dev) that you can query and make decisions according to.
If we would like to use the Locator plugin only in dev, you should probably do this:

```javascript
import 'solid-devtools';
import {render} from 'solid-js/web';
import {useLocatorPlugin} from 'solid-devtools';
import {DEV} from 'solid-js';
import {isServer} from 'solid-js/web';
import './index.css';
import App from './App';
 
if (DEV && !isServer) {
   console.log('In DEV mode');
   useLocatorPlugin({
       targetIDE: 'vscode',
   });
}
 
render(() => <App />, document.getElementById('root'));
```

## Wrapping up
Well… the Locator allows you to quickly navigate to your component. You can also have a callback there and do whatever you want with the given arguments. Aside from that, just seeing the component real name on the browser when you hover it is enough for you to get started quickly. 
Code can be found in [this GitHub repo](https://github.com/mbarzeev/solid-js-lab).

As always, if you have any comments or questions, be sure to leave them in the comments below.

*Hey! If you liked what you've just read check out <a href="https://twitter.com/mattibarzeev?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">@mattibarzeev</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> on Twitter* :beers:

<small><small><small>Photo by <a href="https://unsplash.com/@johnmcclane?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Andres Siimon</a> on <a href="https://unsplash.com/s/photos/investigate?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></small></small></small>