feat: support devtools #18

README.md

@@ -222,6 +222,7 @@ const value = await acquireVsCodeApi().getState();
 | recommended | `boolean` | `true` | This option is intended to provide recommended default parameters and behavior. |
 | extension | [ExtensionOptions](#ExtensionOptions) |  | Configuration options for the vscode extension. |
 | webview | `boolean` \| `string` \| [WebviewOption](#WebviewOption) | `__getWebviewHtml__` | Inject html code |
+| devtools | `boolean` | `true` | Inject script code for [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) or [vue-devtools](https://devtools.vuejs.org/guide/standalone) debugging |
 
 **Notice**
 
@@ -240,6 +241,13 @@ Inject [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extensi
 - vite build
   - extension: Inject `import __getWebviewHtml__ from '@tomjs/vite-plugin-vscode-inject';` above the file that calls the `__getWebviewHtml__` method If is string, will set inject method name. Default is `__getWebviewHtml__`.
 
+**devtools**
+
+During development, support standalone development tool applications for `react` and `vue`, enabled by default.
+
+- `react`: inject `<script src="http://localhost:8097"></script>`, support [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools)
+- `vue`: inject `<script src="http://localhost:8098"></script>`, support [vue-devtools](https://devtools.vuejs.org/guide/standalone)
+
 ### ExtensionOptions
 
 Based on [Options](https://paka.dev/npm/tsup) of [tsup](https://tsup.egoist.dev/), some default values are added for ease of use.

README.zh_CN.md

@@ -226,6 +226,7 @@ const value = await acquireVsCodeApi().getState();
 | recommended | `boolean` | `true` | 这个选项是为了提供推荐的默认参数和行为 |
 | extension | [ExtensionOptions](#ExtensionOptions) |  | vscode extension 可选配置 |
 | webview | `boolean` \| `string` \| [WebviewOption](#WebviewOption) | `__getWebviewHtml__` | 注入 html 代码 |
+| devtools | `boolean` | `true` | 注入 script 代码用于 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) 或 [vue-devtools](https://devtools.vuejs.org/guide/standalone) 调试 |
 
 **Notice**
 
@@ -245,6 +246,13 @@ const value = await acquireVsCodeApi().getState();
 - vite build
   - extension: 在调用 `__getWebviewHtml__` 方法的文件上方注入 `import __getWebviewHtml__ from '@tomjs/vite-plugin-vscode-inject';` 如果为字符串，则设置注入方法名，默认为 `__getWebviewHtml__`。
 
+**devtools**
+
+开发阶段，支持 `react` 和 `vue` 的独立开发工具应用，默认开启。
+
+- `react`: 注入 `<script src="http://localhost:8097"></script>`，支持 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools)
+- `vue`: 注入 `<script src="http://localhost:8098"></script>`，支持 [vue-devtools](https://devtools.vuejs.org/guide/standalone)
+
 ### ExtensionOptions
 
 继承自 [tsup](https://tsup.egoist.dev/) 的 [Options](https://paka.dev/npm/tsup)，添加了一些默认值，方便使用。
@@ -292,6 +300,8 @@ const value = await acquireVsCodeApi().getState();
 
 ## Debug
 
+### 扩展调试
+
 通过 `vscode` 运行 `Debug Extension` 调试，调试工具参考 [官方文档](https://code.visualstudio.com/docs/editor/debugging)
 
 `launch.json` 配置如下：
@@ -368,6 +378,10 @@ const value = await acquireVsCodeApi().getState();
 }
 ```
 
+### 网页调试
+
+可以使用 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) 和 [vue-devtools](https://devtools.vuejs.org/guide/standalone) 的独立应用调试 `webview`
+
 ## 示例
 
 先执行以下命令安装依赖，并生成库文件：

examples/react/package.json

@@ -36,6 +36,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/vscode": "^1.93.0",
     "@types/vscode-webview": "^1.57.5",
+    "@vitejs/plugin-react": "^4.3.3",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "cross-env": "^7.0.3",
     "typescript": "~5.5.4",