docs: add option page

GrinZero · Dec 9, 2024 · d582324 · d582324
1 parent b325626
commit d582324
Show file tree

Hide file tree

Showing 10 changed files with 1,073 additions and 1,057 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -82,9 +82,3 @@ import { register } from 'node-network-devtools'
 const unregister = register()
 unregister()
 ```
-
-## 📚 文档
-
-如果遇到任何问题，可以尝试清理`request-centre.lock`文件
-
-![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.jparrowsec.cn%2FGrinZero%2Fnode-network-devtools&labelColor=%237fa1f7&countColor=%23697689)
diff --git a/apps/web/docs/.vuepress/config.js b/apps/web/docs/.vuepress/config.js
@@ -6,21 +6,21 @@ export default defineUserConfig({
   lang: 'en-US',
   base: '/node-network-devtools/',
 
-  title: 'VuePress',
-  description: 'My first VuePress Site',
+  title: 'Node Network Devtools',
+  description: `In Chrome devtools debugger NodeJs's Request`,
 
   theme: defaultTheme({
     logo: 'logo.png',
     contributors: true,
-    navbar: ['/', '/get-started'],
+    navbar: ['/', '/options', '/get-started'],
     locales: {
       '/': {
         selectLanguageName: 'English',
-        navbar: ['/', '/get-started']
+        navbar: ['/', '/options', '/get-started']
       },
       '/zh/': {
         selectLanguageName: '简体中文',
-        navbar: ['/zh/', '/zh/get-started']
+        navbar: ['/zh/', '/zh/options', '/zh/get-started']
       }
     }
   }),

diff --git a/apps/web/docs/README.md b/apps/web/docs/README.md
@@ -26,9 +26,12 @@ features:
     details: Install and use it in seconds.
   - title: 🛠️ No Proxy
     details: Free proxy competition and trouble.
+  - title: 😊 WebSocket Support
+    details: Support WebSocket debugging
+  - title: 🔍 Support network request stack tracking
+    details: Support network request stack tracking
+  - title: 📦 Compatibility
+    details: Compatible with low version NodeJs
 
 footer: MIT Licensed | Copyright © 2024 Node Network Devtools Community
 ---
-
-At present, it is in the early stage, although the basic functions are already available, there are still many interesting areas to explore and explore.
-This is an open source project, and we look forward to your participation and contribution if you are interested.
diff --git a/apps/web/docs/get-started.md b/apps/web/docs/get-started.md
@@ -4,52 +4,48 @@ Node Network Devtools is a network debugging tool that integrates Chrome Devtool
 
 ## Install
 
-<CodeGroup>
-  <CodeGroupItem title="pnpm">
+::: code-tabs
+
+@tab pnpm
 
 ```bash:no-line-numbers
-pnpm add node-network-devtools
+pnpm add -D node-network-devtools
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="yarn">
+@tab yarn
 
 ```bash:no-line-numbers
-yarn add node-network-devtools
+yarn add -D node-network-devtools
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="npm" active>
+@tab npm
 
 ```bash:no-line-numbers
-npm i node-network-devtools
+npm i -D node-network-devtools
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
+:::
 
 ## Usage
 
 Node.js programs that support both ESM and CommonJS standards only need to introduce and call the 'register' method in the entry file.
 
-<CodeGroup>
-  <CodeGroupItem title="typescript">
+::: code-tabs
+
+@tab typescript
 
 ```typescript
 import { register } from 'node-network-devtools'
 register()
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="javascript" active>
+@tab javascript
 
 ```javascript
 const { register } = require('node-network-devtools')
 register()
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
+:::
+
+If you want to use options, you can go to [options](./options.md) to see the details.
diff --git a/apps/web/docs/options.md b/apps/web/docs/options.md
@@ -0,0 +1,65 @@
+# Options
+
+## RegisterOptions
+
+The `RegisterOptions` interface is used to configure the registration options for the network debugger. Below are detailed descriptions of each option and their default values.
+
+### Example
+
+Here is an example of using `RegisterOptions`:
+
+```typescript
+import { RegisterOptions } from 'packages/network-debugger/src/common'
+
+const options: RegisterOptions = {
+  port: 5270,
+  serverPort: 5271,
+  autoOpenDevtool: true,
+  intercept: {
+    fetch: true,
+    normal: true
+  }
+}
+
+// Use options to register the network debugger
+registerNetworkDebugger(options)
+```
+
+### port
+
+- **Description**: Main process port
+- **Default value**: `5270`
+
+### serverPort
+
+- **Description**: CDP server port for Devtool
+- **Link**: [devtools://devtools/bundled/inspector.html?ws=localhost:${serverPort}](devtools://devtools/bundled/inspector.html?ws=localhost:${serverPort})
+- **Default value**: `5271`
+
+### autoOpenDevtool
+
+- **Description**: Whether to automatically open Devtool
+- **Default value**: `true`
+
+### intercept
+
+- **Description**: Options for intercepting specific packets. If set to `false`, the packet will not be intercepted.
+
+#### intercept.fetch
+
+- **Default value**: `true`
+
+- **Description**: Whether to intercept globalThis.fetch
+
+#### intercept.normal
+
+- **Default value**: `true`
+
+- **Description**: Whether to intercept requests made by http/https basic packages
+
+#### intercept.undici
+
+- **Default value**: `false`
+- **Options**:
+  - `fetch`: `false` or `{}`, not intercepted by default. Used to intercept `undici.fetch`
+  - `normal`: `false` or `{}`, not intercepted by default. Used to intercept `undici.request`
diff --git a/apps/web/docs/zh/README.md b/apps/web/docs/zh/README.md
@@ -26,9 +26,12 @@ features:
     details: 安装，然后在几秒钟内接入完成
   - title: 🛠️ 无代理机制
     details: 无需困扰于代理冲突和麻烦
+  - title: 😊 WebSocket 支持
+    details: 支持 WebSocket 的调试
+  - title: 🔍 支持网络请求堆栈跟踪
+    details: 支持网络请求堆栈跟踪
+  - title: 📦 兼容性
+    details: 兼容低版本 NodeJs
 
-footer: AGPL-3.0 Licensed | Copyright © 2024 Node Network Devtools Community
+footer: MIT Licensed | Copyright © 2024 Node Network Devtools Community
 ---
-
-目前处于早期阶段，虽然基本功能已经可用，但是仍有很多有趣的地方可以开拓和探索。  
-这是一个开源项目，非常期待感兴趣的你可以参与贡献。
diff --git a/apps/web/docs/zh/get-started.md b/apps/web/docs/zh/get-started.md
@@ -4,52 +4,48 @@ Node Network Devtools 是一款软集成了 Chrome Devtools 的网络调试工
 
 ## 安装
 
-<CodeGroup>
-  <CodeGroupItem title="pnpm">
+::: code-tabs
+
+@tab pnpm
 
 ```bash:no-line-numbers
-pnpm add node-network-devtools
+pnpm add -D node-network-devtools
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="yarn">
+@tab yarn
 
 ```bash:no-line-numbers
-yarn add node-network-devtools
+yarn add -D node-network-devtools
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="npm" active>
+@tab npm
 
 ```bash:no-line-numbers
-npm i node-network-devtools
+npm i -D node-network-devtools
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
+:::
 
 ## 使用
 
 支持 esm 和 commonjs 标准的nodejs程序，只需要在入口文件中引入并调用`register`方法即可。
 
-<CodeGroup>
-  <CodeGroupItem title="typescript">
+::: code-tabs
+
+@tab typescript
 
 ```typescript
 import { register } from 'node-network-devtools'
 register()
 ```
 
-  </CodeGroupItem>
-
-  <CodeGroupItem title="javascript" active>
+@tab javascript
 
 ```javascript
 const { register } = require('node-network-devtools')
 register()
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
+:::
+
+如果需要使用选项，可以前往 [选项](./options.md) 查看详细说明。
diff --git a/apps/web/docs/zh/options.md b/apps/web/docs/zh/options.md
@@ -0,0 +1,65 @@
+# 选项
+
+## RegisterOptions
+
+`RegisterOptions` 接口用于配置网络调试器的注册选项。以下是各个选项的详细说明及其默认值。
+
+### 示例
+
+以下是一个使用 `RegisterOptions` 的示例：
+
+```typescript
+import { RegisterOptions } from 'packages/network-debugger/src/common'
+
+const options: RegisterOptions = {
+  port: 5270,
+  serverPort: 5271,
+  autoOpenDevtool: true,
+  intercept: {
+    fetch: true,
+    normal: true
+  }
+}
+
+// 使用 options 进行网络调试器的注册
+registerNetworkDebugger(options)
+```
+
+### port
+
+- **描述**: 主进程端口
+- **默认值**: `5270`
+
+### serverPort
+
+- **描述**: CDP 服务器端口，用于 Devtool
+- **链接**: [devtools://devtools/bundled/inspector.html?ws=localhost:${serverPort}](devtools://devtools/bundled/inspector.html?ws=localhost:${serverPort})
+- **默认值**: `5271`
+
+### autoOpenDevtool
+
+- **描述**: 是否自动打开 Devtool
+- **默认值**: `true`
+
+### intercept
+
+- **描述**: 拦截特定数据包的选项。如果设置为 `false`，则不会拦截该数据包。
+
+#### intercept.fetch
+
+- **默认值**: `true`
+
+- **描述**: 是否拦截 globalThis.fetch
+
+#### intercept.normal
+
+- **默认值**: `true`
+
+- **描述**: 是否拦截 http/https 基础包发出的请求
+
+#### intercept.undici
+
+- **默认值**: `false`
+- **选项**:
+  - `fetch`: `false` 或 `{}`，默认不拦截。用于拦截`undici.fetch`
+  - `normal`: `false` 或 `{}`，默认不拦截。用于拦截`undici.request`
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -11,12 +11,12 @@
     "update-package": "pnpm dlx vp-update"
   },
   "devDependencies": {
-    "@vuepress/bundler-vite": "2.0.0-rc.13",
-    "@vuepress/theme-default": "2.0.0-rc.32",
+    "@vuepress/bundler-vite": "2.0.0-rc.18",
+    "@vuepress/theme-default": "2.0.0-rc.65",
     "vue": "^3.4.0",
-    "vuepress": "2.0.0-rc.13"
+    "vuepress": "2.0.0-rc.18"
   },
   "dependencies": {
-    "vuepress-theme-hope": "2.0.0-rc.48"
+    "vuepress-theme-hope": "2.0.0-rc.62"
   }
 }