Skip to content

Commit

Permalink
doc: update content
Browse files Browse the repository at this point in the history
  • Loading branch information
blucas.wu committed Nov 7, 2023
1 parent fea5af7 commit ae0c855
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 19 deletions.
21 changes: 10 additions & 11 deletions src/pages/Docs/md/usage-en.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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?" />

Expand Down Expand Up @@ -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.

Expand Down
13 changes: 8 additions & 5 deletions src/pages/Docs/md/usage-ja.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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つの例を見てみましょう:

現代のリモートワークと地域間協力がますます一般的になる中、技術者とテスター間の効果的な協力は非常に重要です。しかし、
Expand All @@ -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="機能概要" />

Expand All @@ -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} />

Expand Down
2 changes: 1 addition & 1 deletion src/pages/Docs/md/usage-ko.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />

Expand Down
4 changes: 2 additions & 2 deletions src/pages/Docs/md/usage-zh.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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` 菜单,点击菜单查看如何在业务项目中配置并集成。

Expand All @@ -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} />

Expand Down

0 comments on commit ae0c855

Please sign in to comment.