diff --git a/README.md b/README.md
index f848b2d..d868ffe 100644
--- a/README.md
+++ b/README.md
@@ -1,35 +1,57 @@
# ccc-devtools v3.0.0
-Cocos Creator 网页调试工具,运行时查看、修改节点树,实时更新节点属性。
-
-## 预览
-
-![preview](./screenshots/preview.png)
+Cocos Creator 网页调试工具,运行时查看、修改节点树,实时更新节点属性,可视化缓存资源。
## 功能
-1.场景节点树实时显示
-2.搜索节点
-3.节点、组件属性实时显示更改
-4.圈出节点位置
-5.输出节点、组件引用到控制台
+- 场景节点树实时显示,节点、组件属性实时显示更改
-## 使用
+![preview](./screenshots/preview1.gif)
+
+- 可视化缓存资源
+
+![preview](./screenshots/preview2.png)
+
+- 标记场景中节点位置
+
+![preview](./screenshots/preview3.png)
+
+- 输出节点、组件引用到控制台
+
+![preview](./screenshots/preview4.png)
+
+- cc控制台功能扩展
+
+![preview](./screenshots/preview5.png)
+
+## 全局使用
1. 点击 Creator 右上角进入编辑器 resources 目录,再依次进入`static/preview-templates`目录
![t1](./screenshots/t1.png)
-2. 将本项目clone到上面的目录下,**如果使用下载压缩包的方式记得把后缀名-master去掉**
+2. 将本项目clone到上面的目录下,**如果使用下载压缩包的方式记得把后缀名-master去掉**
![t2](./screenshots/t2.png)
-3. 打开`index.jade`,找到`body`里最后一个`div`,在下面添加`include ./ccc-devtools/index.html`,**注意用tab键与上面的div对齐**
+3. 打开 `index.jade`,找到 `body` 将中间部分替换为 `include ./ccc-devtools/index.html`,**注意用tab键对齐**
+ ![t3](./screenshots/t3.png)
-## 已知问题
+## 项目使用
-- 当升级 Cococs Creator 时会清空resources目录,需要重新下载配置,如自定义了一些配置,请做好备份。
-- 开启节点树会增加渲染消耗,非调试阶段请关闭。
+Cocos Creator 从 v2.2 开始新增了自定义网页预览功能。
+
+1. 重复上面的操作步骤,将修改后的 `preview-templates` 目录拷贝到项目根目录
+
+2. 将 `ccc-devtools/index.html` 里所有引用的资源路径 `app/editor/static/preview-templates/ccc-devtools/...` 替换为 `ccc-devtools/...`
+
+3. 重启 Cocos Creator
+
+## 自定义
+
+- 本项目使用了 vue 和 vuetify,可根据 [vuetify 文档](https://vuetifyjs.com/en/getting-started/quick-start/) 对页面进行修改
+
+- 节点、组件显示属性可在 `config.js` 里配置,目前支持 text,number,textarea,color,bool 几种类型
## 需求、更新
@@ -42,17 +64,13 @@ https://github.com/potato47/ccc-devtools
## 贡献指南
- 版本号命名规则 https://semver.org/lang/zh-CN/ ,简单来讲,新功能第二位加一,修复bug第三位加一
+
- 如果新增功能请在README中添加预览截图说明
+
- 记得更新version.json中的版本号
-## 本项目依赖以下开源项目
+## 前人种树
-https://github.com/vuejs/vue
+- https://github.com/vuejs/vue
-https://github.com/ElemeFE/element
-
-https://github.com/iview/iview
-
-https://github.com/FE-Driver/vue-beauty
-
-https://github.com/mrdoob/stats.js
+- https://github.com/vuetifyjs/vuetify
diff --git a/index.html b/index.html
index d9b8588..763bbc7 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
-
-
+
+