update README

README.md

@@ -14,13 +14,19 @@
 
 基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成格式规范的消息供调试端消费；调试端收到消息数据，提供类控制台可交互式的功能界面将数据呈现出来。
 
+[![主页](./.github/assets/home.jpg)](https://huolalatech.github.io/page-spy-web)
+
 ## 何时使用？
 
-<u>任何无法在本地使用控制台调试的场景，都是 **PageSpy** 可以大显身手的时候！</u>一起来看下面的两个例子：
+<u>任何无法在本地使用控制台调试的场景，都是 **PageSpy** 可以大显身手的时候！</u>一起来看下面的例子：
+
+- 本地调试 H5、Webview 应用：以往有些产品提供了可以在 H5 上查看信息的面板，但移动端屏幕太小操作不便、显示不友好，以及信息被截断等问题；
+- 远程办公、跨地区协同：传统沟通方式如邮件、电话、视频会议等，沟通效率不高、故障信息不全面，容易误解误判；
+- 用户终端上出现白屏问题：传统定位问题的方式包括数据监控、日志分析等，这些方式依赖排障人员要理解业务需求场景、技术实现；
 
-**节省沟通成本，提升协同效率**：在现代远程工作和跨地区合作变得越来越普遍的背景下，技术人员和测试人员之间的有效协同变得异常重要。然而，传统的沟通方式如邮件、电话、视频会议等存在沟通效率不高、故障信息不全面、误解误判等。PageSpy 提供项目运行现场供技术人员在调试端查看，测试人员不用再频繁的通过文字、截图、录屏等方式向技术人员提供故障信息。
+此类问题的共同点是开发者无法像使用控制台一样查看运行信息。
 
-**精准高效排障，避免大海捞针**：当应用在用户的终端上出现白屏或其他类似致命问题时，快速定位、精准排障并修复问题一直是技术人员面临的难题。传统定位问题的方式包括数据监控、日志分析等，这些方式不仅会耗费大量的时间和精力来分析和诊断问题，还极度依赖排障人员非常理解业务需求场景、技术实现。PageSpy 将错误信息直接呈现给技术人员，排除一切信息干扰，show the code!
+对此 PageSpy 提供项目运行现场供技术人员在调试端查看，在远程协同场景中，测试人员不用再频繁的通过文字、截图、语音、录屏等方式向技术人员提供故障信息。
 
 ## 如何使用？
 
@@ -62,7 +68,14 @@ $ npm install -g @huolala-tech/page-spy-api
 
 有问题可以使用微信扫码进群。
 
-<img src="https://public-assets-v.huolala.cn/images/page-spy-wechat-group.jpg" alt="微信群" width="300" />
+<div style="display: flex; gap: 12px; flex-wrap: nowrap; overflow: auto">
+  <img src="https://public-assets-v.huolala.cn/images/page-spy-wechat-group.jpg" alt="微信群" width="260" />
+  <img src="./.github/assets/group-1.jpg" alt="微信群" width="260" />
+</div>
+
+## Roadmap
+
+点击查看 [Roadmap](https://github.com/orgs/HuolalaTech/projects/1)。
 
 ## 如何贡献代码？
 

README_EN.md

@@ -12,20 +12,28 @@ English | [中文](./README.md)
 
 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.
 
+[![Home](./.github/assets/home-en.jpg)](https://huolalatech.github.io/page-spy-web)
+
 ## When should I use?
 
 <u>It's **PageSpy** show time whenever you can't debug code with local devtools!</u> Let's see the following instances:
 
-**Save communication time, improve collaboration efficiency**: Telecommuting and cross-regional collaboration becoming more and more common,effective collaboration between programmers and testers become extremely important. However, traditional communication such as email, telephone, and video conferencing suffer from inefficient communication, incomplete issue information, and misunderstanding or misjudgment, etc. PageSpy provides project runtime info for technicians to view at the debugger client, and testers no longer need to provide issue information to technicians frequently by text, screenshot, and recording screen.
+- Debugging of H5 or webview app locally: in the past, some products provided panels that could display information on H5, but the small screens of mobile devices make it inconvenient for operation, and the display is not user-friendly. Issues such as information being truncated are also common.
+- Remote work and cross-regional collaboration: traditional communications such as emails, phone calls, and video conferences are inefficient, and fault information is not comprehensive, making it prone to misunderstandings and misjudgments.
+- White screen issues on user devices: traditional approaches to troubleshooting, such as data monitoring and log analysis, depend on troubleshooters understanding business requirements and technical implementations.
+
+The commonality among these issues is that developers cannot view runtime information as easily as they can using the console.
 
-**Accurately troubleshoot to avoid looking a needle in the ocean**: When an application has a white screen or other similar fatal problems on the user's device, it has always been a difficult problem for technicians to quickly locate the error, accurately troubleshoot and fix it. Traditional methods of locating problems include data monitoring and log analysis, which not only consume a lot of time and energy to analyze and diagnose problems, but also rely heavily on technicians to understand business scenarios and code implementation.PageSpy presents the error message directly to the technician, eliminates other interference, just shows the code!
+To address this, PageSpy provides a live view of the project for technical personnel to inspect on the debugging side. In remote collaborative scenarios, testers no longer need to frequently provide fault information to technical personnel through text, screenshots, voice messages, or screen recordings.
 
 ## How to use?
 
 In order to ensure data security and facilitate your usage, we offer comprehensive, out-of-the-box deployment solutions. Developers can choose any deployment method according to their own situations.
 
 ### Option 1: deploy by docker
 
+> Video tutorial: [Deploy PageSpy with docker](https://youtu.be/LttXrBbVqbI?si=AvcI9Fr1YdmyTCD1)
+
 ```bash
 $ docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:release
 ```
@@ -34,6 +42,8 @@ Once the deployment is successful, you can open the browser and access `<host>:6
 
 ### Option 2: deploy by node
 
+> Video tutorial: [Deploy PageSpy with node](https://youtu.be/Xf7S6TPbYd0?si=J4vc_A-8AekCesUf)
+
 ```bash
 $ yarn global add @huolala-tech/page-spy-api
 
@@ -53,10 +63,14 @@ It will also generate a configuration file called config.json in the running dir
 
 Once the deployment is successful, you can open the browser and access `<host>:6752`, the `Inject SDK` menu will be at the top, and you can find how to configure and integrate in the business project by click the menu.
 
+## Roadmap
+
+Click to see the [Roadmap](https://github.com/orgs/HuolalaTech/projects/1).
+
 ## How to contribute?
 
-Click to see the [Contribution](./CONTRIBUTING_EN.md)
+Click to see the [Contribution](./CONTRIBUTING_EN.md).
 
 ## FAQ
 
-Click to see the [FAQ](https://github.com/HuolalaTech/page-spy-web/wiki/faq)
+Click to see the [FAQ](https://github.com/HuolalaTech/page-spy-web/wiki/faq).