In the Web development of DeepSeek Harness, production build artifacts are minified and bundled, so clicking UI elements at runtime often does not directly map to a specific source code location. This makes debugging and modifying the UI inconvenient. dsh-frontend-inspector solves this pain point by reading the runtime dsh.client bundles through Host extension points, providing production-grade “click to view source” capability.

This is the @lovstudio/dsh-frontend-inspector plugin maintained by Lovstudio. It does not patch or rebuild files inside the DeepSeek Harness repository; instead, it uses an external Vite process to read a clean code checkout and maps compiled JSX back to the original .tsx files through the Lovinsp toolchain.

Core Features

The plugin supports two runtime modes, and the specific behavior depends on the current environment:

  1. Source checkout mode: Requires a local DeepSeek Harness code checkout. In this mode, Source Maps provide exact TypeScript file, line, and column numbers; clicking opens the source directly in the editor.
  2. npx mode: No local checkout is required. In this mode, only plugin bundles are marked; the markers originate from //#region file markers in lib/client.js, providing file-level location; clicking opens the source on GitHub by default.

In either mode, the core interaction remains the same: hold the shortcut key and click the element.

Install and Enable

Run the following command in the terminal to install the plugin:

npx @deepseek-ai/dsh plugin --profile web add -w github:lovstudio/dsh-frontend-inspector#v0.1.7

After installation, the DeepSeek Harness Web process automatically detects the environment and selects the corresponding mode when it starts.

Typical Usage

Shortcut Actions

In the DSH Web interface:
* Source mode: Hold Shift+Option (Shift+Alt on Windows) and move the mouse to highlight an element; clicking opens the source in the editor by default.
* npx mode: Hold Shift+Option and click to copy the source URL; hold Command (Ctrl on Windows) and click to open the corresponding file directly on GitHub.

Source Mode Steps

If you have a local Harness code checkout:
1. Ensure that pnpm run build has been run in the Harness project root directory.
2. Run npx @deepseek-ai/dsh plugin --profile web add -w github:lovstudio/dsh-frontend-inspector#v0.1.7.
3. Start the Web service.
4. In the browser, hold the shortcut key and click an element to jump to the local editor.

npx Mode Steps

If you install only using npx:
1. Run npx @deepseek-ai/dsh plugin --profile web add -w github:lovstudio/dsh-frontend-inspector#v0.1.7.
2. Start the Web service.
3. The plugin automatically annotates plugin bundles and uses //#region markers to resolve source locations.

Use Cases and Notes

  • Use cases: Developers who need to quickly locate the source code of DeepSeek Harness Web interface components, or who need to inspect plugin source code when a local development environment cannot be configured.
  • Permission note: The plugin runs with the permissions of the current DSH process; ensure that you have read access to the target repository.
  • Generated files: Generated files, Vite cache, and Lovinsp state are kept in the DSH_HOME/cache/frontend-inspector directory.
  • npx mode limitation: In npx mode, markers only cover plugin bundles and only content resolved from //#region markers in lib/client.js.

Summary

dsh-frontend-inspector maps runtime DOM elements back to source locations through Lovinsp bridging and Host extension points. Without modifying the Harness repository, it enables seamless navigation from the Web UI to the source editor.

GitHub repository