From ae0c855314c3a7b9fe3070eb812ef50f0d679eb2 Mon Sep 17 00:00:00 2001
From: "blucas.wu" <blucas.wu@huolala.cn>
Date: Tue, 7 Nov 2023 17:57:37 +0800
Subject: [PATCH] doc: update content

---
 src/pages/Docs/md/usage-en.mdx | 21 ++++++++++-----------
 src/pages/Docs/md/usage-ja.mdx | 13 ++++++++-----
 src/pages/Docs/md/usage-ko.mdx |  2 +-
 src/pages/Docs/md/usage-zh.mdx |  4 ++--
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/pages/Docs/md/usage-en.mdx b/src/pages/Docs/md/usage-en.mdx
index 8470f31f..970d7e15 100644
--- a/src/pages/Docs/md/usage-en.mdx
+++ b/src/pages/Docs/md/usage-en.mdx
@@ -15,10 +15,10 @@ export const githubUrl = import.meta.env.VITE_GITHUB_REPO;
 <HeaderLink level={2} slug="introduction" children="Introduction" />
 
 <b>PageSpy</b> is a remote debugging tool for web project. Based on encapsulation
-of native web APIs, it filters and transforms the parameters of native methods
-when called, and converts into messages with specific format for consumption by
-the debugger client. The debugger presents ui in an interactive devtools-like for
-easy viewing after receives the message data.
+of native web APIs, it filters and transforms the parameters of native methods when
+called, and converts into messages with specific format for consumption by the debugger
+client. The debugger presents ui in an interactive devtools-like for easy viewing
+after receives the message data.
 
 <HeaderLink level={2} slug="when-to-use" children="When to use?" />
 
@@ -65,24 +65,23 @@ configure and integrate in the business project by click the menu.
 
 - Console Panel: show the `console.<log | info | warn | error>` log data, support execute code；
 
-<Image width="90%" style={{margin: '0 auto'}} src={consoleImg} />
+<Image width="90%" style={{ margin: '0 auto' }} src={consoleImg} />
 
 - Network Panel: show the request of `fetch` | `XMLHttpRequest` | `navigator.sendBeacon`;
 
-<Image width="90%" style={{margin: '0 auto'}} src={networkImg} />
+<Image width="90%" style={{ margin: '0 auto' }} src={networkImg} />
 
 - Page Panel: show the current pageview and HTML node tree；
 
-<Image width="90%" style={{margin: '0 auto'}} src={pageImg} />
+<Image width="90%" style={{ margin: '0 auto' }} src={pageImg} />
 
-- Storage Panel: show the cache of `localStorage` | `sessionStorage` | `cookie`；
+- Storage Panel: show the cache of `localStorage` | `sessionStorage` | `cookie` | `indexedDB`；
 
-<Image width="90%" style={{margin: '0 auto'}} src={storageImg} />
+<Image width="90%" style={{ margin: '0 auto' }} src={storageImg} />
 
 - Systems Panel: show the userAgent info and some APIs compatibility.
 
-<Image width="90%" style={{margin: '0 auto'}} src={systemImg} />
-
+<Image width="90%" style={{ margin: '0 auto' }} src={systemImg} />
 
 Besides of above, you will get the realtime notification when there have new data or data changed.
 
diff --git a/src/pages/Docs/md/usage-ja.mdx b/src/pages/Docs/md/usage-ja.mdx
index fe084118..8590be5f 100644
--- a/src/pages/Docs/md/usage-ja.mdx
+++ b/src/pages/Docs/md/usage-ja.mdx
@@ -18,7 +18,10 @@ export const githubUrl = import.meta.env.VITE_GITHUB_REPO;
 
 <HeaderLink level={2} slug="when-to-use" children="いつ使用するか" />
 
-<u>*ローカルでのコンソールデバッグができないシナリオは、すべて **PageSpy** が活躍できる場面です*</u>
+<u>
+  *ローカルでのコンソールデバッグができないシナリオは、すべて **PageSpy**
+  が活躍できる場面です*
+</u>
 ！以下の2つの例を見てみましょう：
 
 現代のリモートワークと地域間協力がますます一般的になる中、技術者とテスター間の効果的な協力は非常に重要です。しかし、
@@ -39,7 +42,7 @@ export const githubUrl = import.meta.env.VITE_GITHUB_REPO;
 
 データの安全性と利便性を考慮して、完全な<a href={`${githubUrl}#how-to-use`} target="\_blank">デプロイメントガイド</a>を提供しています。
 
-ローカルデプロイメントが完了すると、「SDKをインジェクト」メニューが表示され、ビジネスプロジェクトに設定と統合する方法を確認できます。
+ローカルデプロイメントが完了すると、「SDK をインジェクト」メニューが表示され、ビジネスプロジェクトに設定と統合する方法を確認できます。
 
 <HeaderLink level={2} slug="feature-overview" children="機能概要" />
 
@@ -51,15 +54,15 @@ export const githubUrl = import.meta.env.VITE_GITHUB_REPO;
 
 <Image width="90%" style={{ margin: '0 auto' }} src={networkImg} />
 
-- エレメントパネル：現在のページを表示し、HTMLノードツリーを表示します；
+- エレメントパネル：現在のページを表示し、HTML ノードツリーを表示します；
 
 <Image width="90%" style={{ margin: '0 auto' }} src={pageImg} />
 
-- ストレージパネル： `localStorage` | `sessionStorage` | `cookie` キャッシュデータを表示します；
+- ストレージパネル： `localStorage` | `sessionStorage` | `cookie` | `indexedDB` キャッシュデータを表示します；
 
 <Image width="90%" style={{ margin: '0 auto' }} src={storageImg} />
 
-- システムパネル：ユーザーエージェント情報を表示し、APIの互換性を確認します。
+- システムパネル：ユーザーエージェント情報を表示し、API の互換性を確認します。
 
 <Image width="90%" style={{ margin: '0 auto' }} src={systemImg} />
 
diff --git a/src/pages/Docs/md/usage-ko.mdx b/src/pages/Docs/md/usage-ko.mdx
index 50b90405..d113893a 100644
--- a/src/pages/Docs/md/usage-ko.mdx
+++ b/src/pages/Docs/md/usage-ko.mdx
@@ -55,7 +55,7 @@ export const githubUrl = import.meta.env.VITE_GITHUB_REPO;
 
 <Image width="90%" style={{ margin: '0 auto' }} src={pageImg} />
 
-- 스토리지 패널: `localStorage` | `sessionStorage` | `cookie` 캐시 데이터를 확인합니다.
+- 스토리지 패널: `localStorage` | `sessionStorage` | `cookie` | `indexedDB` 캐시 데이터를 확인합니다.
 
 <Image width="90%" style={{ margin: '0 auto' }} src={storageImg} />
 
diff --git a/src/pages/Docs/md/usage-zh.mdx b/src/pages/Docs/md/usage-zh.mdx
index f8468927..fbcda23c 100644
--- a/src/pages/Docs/md/usage-zh.mdx
+++ b/src/pages/Docs/md/usage-zh.mdx
@@ -39,7 +39,7 @@ export const githubUrl = import.meta.env.VITE_GITHUB_REPO;
 
 <HeaderLink level={2} slug="how-to-use" children="如何使用？" />
 
-为了数据安全和方便您的使用，我们提供完整的、开箱即用的<a href={`${githubUrl}#how-to-use`} target="\_blank">部署方案</a>。
+为了数据安全和方便您的使用，我们提供完整的、开箱即用的<a href={`${githubUrl}#如何使用`} target="\_blank">部署方案</a>。
 
 本地化部署完成后，顶部会出现 `接入SDK` 菜单，点击菜单查看如何在业务项目中配置并集成。
 
@@ -57,7 +57,7 @@ export const githubUrl = import.meta.env.VITE_GITHUB_REPO;
 
 <Image width="90%" style={{ margin: '0 auto' }} src={pageImg} />
 
-- Storage 面板: 查看 `localStorage` | `sessionStorage` | `cookie` 缓存数据；
+- Storage 面板: 查看 `localStorage` | `sessionStorage` | `cookie` | `indexedDB` 缓存数据；
 
 <Image width="90%" style={{ margin: '0 auto' }} src={storageImg} />