chore(doc): add live reload & elements inspect intro

Cyunong · Sep 10, 2021 · 92f95fa · 92f95fa
1 parent 8ed429d
commit 92f95fa
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -23,18 +23,23 @@ Hippy is now applied in 27+ [Tencent](http://www.tencent.com/) apps such as Mobi
 
 ### Preparing environment
 
+Run `git clone https://github.com/Tencent/Hippy.git`
+
+> Hippy repository applies [git-lfs](https://git-lfs.github.com/) to manage so,gz,otf,png,jpg files, make sure you have installed [git-lfs](https://git-lfs.github.com/) first.
+
+
 For macOS developers:
 
-1. [Xcode](https://developer.apple.com/xcode/) with iOS sdk: build the iOS app.
-2. [Android Studio](https://developer.android.com/studio) with NDK: build the android app.
-3. [Node.JS](https://nodejs.org/en/): run the build scripts.
+* [Xcode](https://developer.apple.com/xcode/) with iOS sdk: build the iOS app.
+* [Android Studio](https://developer.android.com/studio) with NDK: build the android app.
+* [Node.JS](https://nodejs.org/en/): run the build scripts.
 
 [homebrew](https://brew.sh/) is recommended to install the dependencies.
 
 For Windows developers:
 
-1. [Android Studio](https://developer.android.com/studio) with NDK: build the android app.
-2. [Node.JS](https://nodejs.org/en/): run the build scripts.
+* [Android Studio](https://developer.android.com/studio) with NDK: build the android app.
+* [Node.JS](https://nodejs.org/en/): run the build scripts.
 
 > Windows can't run the iOS development environment so far.
 
@@ -141,3 +146,4 @@ Hippy is [Apache-2.0 licensed](./LICENSE).
 [Hippy Eco-System](https://github.com/hippy-contrib)
 
 [Taitank Layout Engine](https://github.com/Tencent/Taitank)
+
diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -25,18 +25,22 @@ Hippy 是一个新生的跨端开发框架，目标是使开发者可以只写
 
 ### 准备环境
 
+运行 `git clone https://github.com/Tencent/Hippy.git`
+
+> Hippy 仓库使用 [git-lfs](https://git-lfs.github.com/) 来管理 so,gz,otf,png,jpg 文件, 请确保你已经安装 [git-lfs](https://git-lfs.github.com/)。
+
 macOS 用户需要以下软件：
 
-1. [Xcode](https://developer.apple.com/xcode/) 和 iOS SDK: 用以编译 iOS 终端 app。
-2. [Android Studio](https://developer.android.com/studio) 和 NDK: 用以编译 Android app。
-3. [Node.JS](http://nodejs.cn/): 用以运行前端编译脚本。
+* [Xcode](https://developer.apple.com/xcode/) 和 iOS SDK: 用以编译 iOS 终端 app。
+* [Android Studio](https://developer.android.com/studio) 和 NDK: 用以编译 Android app。
+* [Node.JS](http://nodejs.cn/): 用以运行前端编译脚本。
 
 我们推荐使用 [homebrew](https://brew.sh/) 来安装依赖。
 
 Windows 用户者需要以下软件:
 
-1. [Android Studio](https://developer.android.com/studio) 和 NDK: 用以编译 Android app。
-2. [Node.JS](http://nodejs.cn/): 用以运行前端编译脚本。
+* [Android Studio](https://developer.android.com/studio) 和 NDK: 用以编译 Android app。
+* [Node.JS](http://nodejs.cn/): 用以运行前端编译脚本。
 
 > Windows 用户受条件所限，暂时无法进行 iOS app 开发。
 

diff --git a/docs/guide/debug.md b/docs/guide/debug.md
@@ -10,10 +10,14 @@ Hippy中运行的JS代码可以来源于本地文件(local file)，或者远程
 
 # 项目初始化
 
-1. 项目根目录运行命令 `npm install` 安装前端依赖。
-2. 项目根目录运行命令 `lerna bootstrap` 安装前端每一个 package 依赖。（Hippy 采用 [Lerna](https://lerna.js.org/) 管理多JS仓库，如果出现 `lerna command is not found`, 先执行 `npm install lerna -g`）
-3. 项目根目录运行命令 `npm run build` 编译前端 SDK 包。
-4. 选择一个前端范例项目来进行编译，项目根目录运行 `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。
+1. 运行 `git clone https://github.com/Tencent/Hippy.git`
+
+   !> Hippy 仓库使用 [git-lfs](https://git-lfs.github.com/) 来管理 so,gz,otf,png,jpg 文件, 请确保你已经安装 [git-lfs](https://git-lfs.github.com/)。
+
+2. 项目根目录运行命令 `npm install` 安装前端依赖。
+3. 项目根目录运行命令 `lerna bootstrap` 安装前端每一个 package 依赖。（Hippy 采用 [Lerna](https://lerna.js.org/) 管理多JS仓库，如果出现 `lerna command is not found`, 先执行 `npm install lerna -g`）
+4. 项目根目录运行命令 `npm run build` 编译前端 SDK 包。
+5. 选择一个前端范例项目来进行编译，项目根目录运行 `npm run buildexample -- [hippy-react-demo|hippy-vue-demo]`。
 
 # 终端环境准备
 
@@ -78,10 +82,54 @@ Android 使用了 [adb](//developer.android.com/studio/command-line/adb) 的端
 
 9. 当 JS 文件发生改动时，自动编译会执行，但是终端却无法获知 JS 文件已经发生改变，点击界面上的`小圆点`，选择弹出菜单中的 `Reload` 重新加载 JS 代码。
 
+# Elements 检查能力
+
+> Android 最低支持版本 2.9.0
+
+Hippy 实现了节点和属性从前端到终端的映射，可以在 Chrome Inspector 上进行 Elements 的可视化检查。
+
+<img src="https://user-images.githubusercontent.com/12878546/132838547-40ab9e10-ba93-4bc4-86b0-6babba020d03.png" alt="Inspect Elements" width="70%"/>
+<br />
+<br />
+
+# Live-Reload 能力
+
+> 最低支持版本 2.9.0
+
+当开发者修改了前端代码后，我们可以通过 `live-reload` 能力帮助我们在代码变更时自动重载业务实例，步骤如下：
+
++ webpack 配置文件在 entry 末端引入 `@hippy/hippy-live-reload-polyfill`
+
+```javascript
+module.exports = {
+  mode: 'development',
+  entry: {
+    index: ['regenerator-runtime', 'index.js', '@hippy/hippy-live-reload-polyfill'],
+  }
+}
+```
+
++ 启动调试 server 增加 `--live` 参数，这时候会启动一个 `38999` 端口的 Websocket
+
+```json
+{
+   "scripts": {
+      "hippy:debug": "hippy-debug --live"
+   }  
+} 
+```
+
++ 对于 Android 调试，打开 `Enable Live Reload` 开关
+
+<img src="https://user-images.githubusercontent.com/12878546/132832119-b1b7e042-da9d-4792-a21c-ff4773f3cca0.jpg" alt="Android Debug" width="25%"/>
+<br />
+
++ 对于 iOS 调试，业务代码启动后会自动监听
+
 # 框架日志输出
 
 无论是 hippy-react 还是 hippy-vue 都将和终端通讯的信息进行输出，包含了前终端的节点操作、事件收发。这些日志对于业务调试其实很有帮助，可以让开发了解到前端框架是如何将代码转译成终端可以理解的语法，当遇到问题时应先检查框架通信日志，基本可以定位到大部分问题。
 
 如果需要关闭日志，可以在 hippy-react 的 new Hippy 启动参数中增加 `silent: true`，或者 hippy-vue 项目的入口文件中，开启 `Vue.config.silent = true;`。
 
-   ![Communication Info](//static.res.qq.com/nav/hippydoc/img/inspectDebugInfo.png)
+<img src="//static.res.qq.com/nav/hippydoc/img/inspectDebugInfo.png" alt="Communication Info" width="60%"/>
diff --git a/examples/android-demo/res/index.android.js b/examples/android-demo/res/index.android.js
diff --git a/examples/android-demo/res/vendor.android.js b/examples/android-demo/res/vendor.android.js
diff --git a/examples/hippy-react-demo/package.json b/examples/hippy-react-demo/package.json
@@ -11,7 +11,7 @@
     "serve": "webpack-dev-server --mode=development --config ./scripts/hippy-webpack.web.js",
     "build": "webpack --mode=production --config ./scripts/hippy-webpack.web.js",
     "hippy:local-debug": "node ../../packages/hippy-debug-server/index.js --live",
-    "hippy:debug": "hippy-debug",
+    "hippy:debug": "hippy-debug --live",
     "hippy:dev": "webpack --config ./scripts/hippy-webpack.dev.js",
     "hippy:vendor": "webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
     "hippy:build": "webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js"

diff --git a/examples/hippy-vue-demo/package.json b/examples/hippy-vue-demo/package.json
@@ -13,7 +13,7 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "hippy:local-debug": "node ../../packages/hippy-debug-server/index.js --live",
-    "hippy:debug": "hippy-debug",
+    "hippy:debug": "hippy-debug --live",
     "hippy:dev": "webpack --config ./scripts/hippy-webpack.dev.js",
     "hippy:vendor": "webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
     "hippy:build": "webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js"

diff --git a/examples/ios-demo/res/index.ios.js b/examples/ios-demo/res/index.ios.js
diff --git a/examples/ios-demo/res/vendor.ios.js b/examples/ios-demo/res/vendor.ios.js