Inspect in VSCode

This is a simple extension for deno/fresh projects that allows you to inspect your components’ source code in VSCode. This repository includes a sample site to show how it works. Activate the extension with backquote (`) and click on any component. Your browser will attempt to navigate to the source code file in your project.

Demo gif showing inspect to vscode

This is a native feature in live, the upcoming deno-native CMS.

Usage

Start the project:

cd example/
deno task start

Go to https://localhost:8080

Now hit the backquote key (`) and click on any DOM Element while the project is open in VSCode. Your browser should navigate to VSCode and open the correct file and line.

Implementing in your project

Add "inspect_vscode": "https://deno.land/x/inspect_vscode/" to your import_map.json file.
Create islands/InspectVSCode.tsx:

/** @jsx h */
import { h } from "preact";
import { useEffect } from "preact/hooks";
import { DomInspector } from "inspect_vscode/InspectVSCode.tsx";

declare global {
  interface Window {
    inspectVSCode: DomInspector;
  }
}

export default function InspectVSCode() {
  useEffect(() => {
    window.inspectVSCode = new DomInspector(document.body);
  });
  return <span></span>;
}

Create routes/inspect-vscode.ts:

import { handler as InspectVSCode } from "inspect_vscode/inspect-vscode.ts";

export const handler = InspectVSCode;

Import islands/InspectVSCode.tsx in a route and render it.

Done!

How this works

It’s really quite simple!

First, the client-side script activates the hover.

When an element is clicked, its outerHTML is sent to the server as a POST to /inspect-vscode.

The route handler then parses the outerHTML and greps the first complete HTML element.

If that fails — which happens when the element is formatted in multiple lines — we fallback to greping the longest attribute. This generally works.

Known Limitations

Better implementations for multi-line search are welcome. Right now, we’re using grep for wider compatibility. There is no native tool for multiline regex search in MacOS and I wouldn’t want to require installing a new package for that.
Twind syntax (tw`…`) is not supported — in fact, any transformation on the element causes grep to fail. I would welcome a PR which adds support for transformed HTML by using fuzzy search, something like https://deno.land/x/fzf@v0.5.1
Components which are very similar might not be detected precisely: the first occurence will be found every time.