React Anchor Cat

React Anchor Cat 是一个开发期调试工具：在页面上选中一个 React DOM 节点，定位到它对应的源码文件、行号和列号，并打开编辑器。

适合用在 Web、Electron、Tauri 项目的开发环境里。

功能

• 鼠标悬停 React DOM 节点时显示源码位置
• 点击节点后打开编辑器，例如 VS Code
• Mac 使用 Option + A 启动定位；其他系统通常是 Alt + A
• Escape 停止定位
• - 上探到最近的父级源码节点
• 支持 Web、Electron、Tauri
• 支持自定义打开方式和快捷键

注意：源码定位依赖 React debug source 信息。React 开发构建通常可用；生产构建通常不可用，除非你的项目在编译阶段额外注入源码信息。

安装

npm install react-anchor-cat

Web 使用

默认入口就是 Web 版：

import { installWebReactLocator } from "react-anchor-cat";

installWebReactLocator({
  editorUrl: "vscode://file/{fileName}:{lineNumber}:{columnNumber}",
});

也可以显式从 react-anchor-cat/web 引入：

import { installWebReactLocator } from "react-anchor-cat/web";

建议只在开发环境启用：

if (import.meta.env.DEV) {
  installWebReactLocator();
}

Electron 使用

import { installElectronReactLocator } from "react-anchor-cat/electron";

installElectronReactLocator({
  editorUrl: "vscode://file/{fileName}:{lineNumber}:{columnNumber}",
});

如果启用了 contextIsolation，建议在 preload 暴露一个打开外链的方法：

import { contextBridge, ipcRenderer } from "electron";

contextBridge.exposeInMainWorld("electronAPI", {
  openExternal: (url: string) => ipcRenderer.send("react-anchor-cat:open", { url }),
});

主进程里打开编辑器：

import { ipcMain, shell } from "electron";

ipcMain.on("react-anchor-cat:open", (_event, payload) => {
  if (typeof payload?.url === "string") {
    shell.openExternal(payload.url);
  }
});

如果要注入到外部页面，可以使用全局脚本：

import { buildElectronInjection } from "react-anchor-cat/electron";

const js = buildElectronInjection({
  coreScriptUrl:
    "file:///absolute/path/to/node_modules/react-anchor-cat/dist/electron/react-anchor-cat.global.js",
  editorUrl: "vscode://file/{fileName}:{lineNumber}:{columnNumber}",
});

webContents.executeJavaScript(js);

Tauri 使用

import { installTauriReactLocator } from "react-anchor-cat/tauri";

installTauriReactLocator({
  editorUrl: "vscode://file/{fileName}:{lineNumber}:{columnNumber}",
  invokeCommand: "react_anchor_cat_open",
});

Rust 侧提供 command：

#[tauri::command]
async fn react_anchor_cat_open(url: String) -> Result<(), String> {
    open::that(url).map_err(|error| error.to_string())
}

并注册：

tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![react_anchor_cat_open])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");

配置

三个入口都支持 editorUrl 和 shortcut：

installWebReactLocator({
  editorUrl: "vscode://file/{fileName}:{lineNumber}:{columnNumber}",
  shortcut: {
    start: "Alt+KeyA",
    stop: "Escape",
    parent: "-",
  },
});

editorUrl 支持这些占位符：

• {fileName}
• {lineNumber}
• {columnNumber}
• {srcPath}
• {componentName}

自定义打开方式

Web：

installWebReactLocator({
  openUrl: (url, source) => {
    console.log(source.fileName, source.lineNumber);
    window.open(url, "_blank");
  },
});

Electron：

installElectronReactLocator({
  ipcChannel: "open-editor",
  ipcPayload: (url, source) => ({
    url,
    file: source.fileName,
    line: source.lineNumber,
    column: source.columnNumber,
  }),
});

Tauri：

installTauriReactLocator({
  invokeCommand: "open_editor",
  invokePayload: (url, source) => ({
    url,
    file: source.fileName,
    line: source.lineNumber,
    column: source.columnNumber,
  }),
});

也可以在任意环境中完全接管：

installWebReactLocator({
  openUrl: async (url, source) => {
    await customOpen(url, source);
  },
});

Core

如果你想自己封装宿主环境，可以使用底层 core：

import { createReactLocator } from "react-anchor-cat/core";

const locator = createReactLocator({
  openUrl: (url) => window.open(url, "_blank"),
});

locator.start();

发布内容

这个包发布到 npm 时只应该包含：

• dist/
• README.md
• assets/logo-transparent.png
• package.json

不应该包含：

• packages/*/src
• packages/browser-extension
• scripts
• tsconfig.json
• .backup
• node_modules