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.