diff --git a/source/public/index.html b/source/public/index.html
index 3e5a139..dad90ef 100644
--- a/source/public/index.html
+++ b/source/public/index.html
@@ -1,17 +1,18 @@
 <!DOCTYPE html>
-<html lang="">
-  <head>
+<html lang="" style="width: 100%;height: 100%;margin: 0;padding: 0;">
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+</head>
+<body style="width: 100%;height: 100%;margin: 0;padding: 0;">
+<noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
 </html>
diff --git a/source/src/devtools/ccType/ComponentsProperty.vue b/source/src/devtools/ccType/ComponentsProperty.vue
index e848f44..9db21f2 100644
--- a/source/src/devtools/ccType/ComponentsProperty.vue
+++ b/source/src/devtools/ccType/ComponentsProperty.vue
@@ -17,18 +17,24 @@
 <script lang="ts">
 import Vue from "vue"
 import {Component, Prop} from "vue-property-decorator";
+import UiProp from "@/devtools/ccType/ui-prop.vue"
 
-@Component({})
+@Component({
+  components: {
+    UiProp
+  }
+})
 export default class ComponentsProperty extends Vue {
-  name: string = "";
+  name: string = "components";
   isShowComp: boolean = true;
 
+  // @Prop()
+  components = ""
+
   onClickComp() {
     this.isShowComp = !this.isShowComp;
   }
 
-  @Prop()
-  components = ""
 }
 </script>
 
diff --git a/source/src/devtools/ccType/NodeBaseProperty.vue b/source/src/devtools/ccType/NodeBaseProperty.vue
index 588d0a2..0c13664 100644
--- a/source/src/devtools/ccType/NodeBaseProperty.vue
+++ b/source/src/devtools/ccType/NodeBaseProperty.vue
@@ -1,185 +1,199 @@
 <template>
   <div id="app">
-    <div>
-      <ui-prop name="uuid">
-        <span> {{ itemData.uuid }}</span>
-      </ui-prop>
-      <ui-prop name="name">
-        <span> {{ itemData.name }}</span>
-      </ui-prop>
-      <!--坐标-->
-      <ui-prop name="Position">
-        <div style="float: left;width: 100%;">
-          <ui-prop name="X" style="width: 50%;float: left; cursor: ew-resize;"
-                   @movestep="changePositionActionX"
-                   step="10">
-            <!--<span>{{itemData.x}}</span>-->
-            <input class="myInput"
-                   @change="changePosition"
-                   placeholder="itemData.x"
-                   v-model="itemData.x">
-          </ui-prop>
-          <ui-prop name="Y" style="width: 50%;float:left;cursor: ew-resize;"
-                   @movestep="changePositionActionY"
-                   step="10">
-            <!--<span>{{itemData.y}}</span>-->
-            <input class="myInput"
-                   @change="changePosition"
-                   placeholder="itemData.y"
-                   v-model="itemData.y">
-          </ui-prop>
-        </div>
-      </ui-prop>
-      <!--旋转-->
-      <!--rotationX, rotationY暂时舍弃显示-->
-      <ui-prop name="Rotation">
-        <span> {{ itemData.rotation }}</span>
-        <!--<input class="myInput"-->
-        <!--@change="changeRotation"-->
-        <!--placeholder="itemData.rotation"-->
-        <!--v-model="itemData.rotation"-->
-        <!--style="width: 98%">-->
-      </ui-prop>
-      <!--缩放-->
-      <ui-prop name="Scale">
-        <div style="float: left;width: 100%;">
-          <ui-prop name="X" style="width: 50%;float: left;">
-            <span>{{ itemData.scaleX }}</span>
-          </ui-prop>
-          <ui-prop name="Y" style="width: 50%;float:left;">
-            <span>{{ itemData.scaleY }}</span>
-          </ui-prop>
-        </div>
-      </ui-prop>
-      <!--锚点-->
-      <ui-prop name="Anchor">
-        <div style="float: left;width: 100%;">
-          <ui-prop name="X" style="width: 50%;float: left;">
-            <span>{{ itemData.anchorX }}</span>
-          </ui-prop>
-          <ui-prop name="Y" style="width: 50%;float:left;">
-            <span>{{ itemData.anchorY }}</span>
-          </ui-prop>
-        </div>
-      </ui-prop>
-      <!--尺寸-->
-      <ui-prop name="Size">
-        <div style="float: left;width: 100%;">
-          <ui-prop name="W" style="width: 50%;float: left;cursor: ew-resize;"
-                   @movestep="changeSizeActionWidth"
-                   step="10">
-            <!--<span>{{itemData.width}}</span>-->
-            <input class="myInput"
-                   @change="changeSize"
-                   placeholder="itemData.width"
-                   v-model="itemData.width">
-          </ui-prop>
-          <ui-prop name="H" style="width: 50%;float:left;cursor: ew-resize;"
-                   @movestep="changeSizeActionHeight"
-                   step="10">
-            <!--<span>{{itemData.height}}</span>-->
-            <input class="myInput"
-                   @change="changeSize"
-                   placeholder="itemData.height"
-                   v-model="itemData.height">
-          </ui-prop>
-        </div>
-      </ui-prop>
-      </ui-prop>
-      <!--透明度-->
-      <ui-prop name="Opacity">
-        <span>{{ itemData.opacity }}</span>
-      </ui-prop>
-      <!--斜切-->
-      <ui-prop name="Skew">
-        <div style="float: left;width: 100%;">
-          <ui-prop name="X" style="width: 50%;float: left;">
-            <span>{{ itemData.skewX }}</span>
-          </ui-prop>
-          <ui-prop name="Y" style="width: 50%;float:left;">
-            <span>{{ itemData.skewY }}</span>
-          </ui-prop>
-        </div>
-      </ui-prop>
-    </div>
-    <ui-prop name="zIndex">
-      <span>{{ itemData.zIndex }}</span>
-    </ui-prop>
-    <ui-prop name="childrenCount">
-      <span>{{ itemData.childrenCount }}</span>
-    </ui-prop>
-    <!--节点状态-->
-    <ui-prop name="active">
-      <p v-if="itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">
-        <input type="checkbox"
-               style="width: 20px;height: 20px;"
-               :checked="itemData.active"
-               @click="onBtnClickNodeHide">
-        隐藏节点
-      </p>
+    <!--    <div>-->
+    <!--      <ui-prop name="uuid">-->
+    <!--        <span> {{ itemData.uuid }}</span>-->
+    <!--      </ui-prop>-->
+    <!--      <ui-prop name="name">-->
+    <!--        <span> {{ itemData.name }}</span>-->
+    <!--      </ui-prop>-->
+    <!--      &lt;!&ndash;坐标&ndash;&gt;-->
+    <!--      <ui-prop name="Position">-->
+    <!--        <div style="float: left;width: 100%;">-->
+    <!--          <ui-prop name="X" style="width: 50%;float: left; cursor: ew-resize;"-->
+    <!--                   @movestep="changePositionActionX"-->
+    <!--                   step="10">-->
+    <!--            &lt;!&ndash;<span>{{itemData.x}}</span>&ndash;&gt;-->
+    <!--            <input class="myInput"-->
+    <!--                   @change="changePosition"-->
+    <!--                   placeholder="itemData.x"-->
+    <!--                   v-model="itemData.x">-->
+    <!--          </ui-prop>-->
+    <!--          <ui-prop name="Y" style="width: 50%;float:left;cursor: ew-resize;"-->
+    <!--                   @movestep="changePositionActionY"-->
+    <!--                   step="10">-->
+    <!--            &lt;!&ndash;<span>{{itemData.y}}</span>&ndash;&gt;-->
+    <!--            <input class="myInput"-->
+    <!--                   @change="changePosition"-->
+    <!--                   placeholder="itemData.y"-->
+    <!--                   v-model="itemData.y">-->
+    <!--          </ui-prop>-->
+    <!--        </div>-->
+    <!--      </ui-prop>-->
+    <!--      &lt;!&ndash;旋转&ndash;&gt;-->
+    <!--      &lt;!&ndash;rotationX, rotationY暂时舍弃显示&ndash;&gt;-->
+    <!--      <ui-prop name="Rotation">-->
+    <!--        <span> {{ itemData.rotation }}</span>-->
+    <!--        &lt;!&ndash;<input class="myInput"&ndash;&gt;-->
+    <!--        &lt;!&ndash;@change="changeRotation"&ndash;&gt;-->
+    <!--        &lt;!&ndash;placeholder="itemData.rotation"&ndash;&gt;-->
+    <!--        &lt;!&ndash;v-model="itemData.rotation"&ndash;&gt;-->
+    <!--        &lt;!&ndash;style="width: 98%">&ndash;&gt;-->
+    <!--      </ui-prop>-->
+    <!--      &lt;!&ndash;缩放&ndash;&gt;-->
+    <!--      <ui-prop name="Scale">-->
+    <!--        <div style="float: left;width: 100%;">-->
+    <!--          <ui-prop name="X" style="width: 50%;float: left;">-->
+    <!--            <span>{{ itemData.scaleX }}</span>-->
+    <!--          </ui-prop>-->
+    <!--          <ui-prop name="Y" style="width: 50%;float:left;">-->
+    <!--            <span>{{ itemData.scaleY }}</span>-->
+    <!--          </ui-prop>-->
+    <!--        </div>-->
+    <!--      </ui-prop>-->
+    <!--      &lt;!&ndash;锚点&ndash;&gt;-->
+    <!--      <ui-prop name="Anchor">-->
+    <!--        <div style="float: left;width: 100%;">-->
+    <!--          <ui-prop name="X" style="width: 50%;float: left;">-->
+    <!--            <span>{{ itemData.anchorX }}</span>-->
+    <!--          </ui-prop>-->
+    <!--          <ui-prop name="Y" style="width: 50%;float:left;">-->
+    <!--            <span>{{ itemData.anchorY }}</span>-->
+    <!--          </ui-prop>-->
+    <!--        </div>-->
+    <!--      </ui-prop>-->
+    <!--      &lt;!&ndash;尺寸&ndash;&gt;-->
+    <!--      <ui-prop name="Size">-->
+    <!--        <div style="float: left;width: 100%;">-->
+    <!--          <ui-prop name="W" style="width: 50%;float: left;cursor: ew-resize;"-->
+    <!--                   @movestep="changeSizeActionWidth"-->
+    <!--                   step="10">-->
+    <!--            &lt;!&ndash;<span>{{itemData.width}}</span>&ndash;&gt;-->
+    <!--            <input class="myInput"-->
+    <!--                   @change="changeSize"-->
+    <!--                   placeholder="itemData.width"-->
+    <!--                   v-model="itemData.width">-->
+    <!--          </ui-prop>-->
+    <!--          <ui-prop name="H" style="width: 50%;float:left;cursor: ew-resize;"-->
+    <!--                   @movestep="changeSizeActionHeight"-->
+    <!--                   step="10">-->
+    <!--            &lt;!&ndash;<span>{{itemData.height}}</span>&ndash;&gt;-->
+    <!--            <input class="myInput"-->
+    <!--                   @change="changeSize"-->
+    <!--                   placeholder="itemData.height"-->
+    <!--                   v-model="itemData.height">-->
+    <!--          </ui-prop>-->
+    <!--        </div>-->
+    <!--      </ui-prop>-->
+    <!--      &lt;!&ndash;透明度&ndash;&gt;-->
+    <!--      <ui-prop name="Opacity">-->
+    <!--        <span>{{ itemData.opacity }}</span>-->
+    <!--      </ui-prop>-->
+    <!--      &lt;!&ndash;斜切&ndash;&gt;-->
+    <!--      <ui-prop name="Skew">-->
+    <!--        <div style="float: left;width: 100%;">-->
+    <!--          <ui-prop name="X" style="width: 50%;float: left;">-->
+    <!--            <span>{{ itemData.skewX }}</span>-->
+    <!--          </ui-prop>-->
+    <!--          <ui-prop name="Y" style="width: 50%;float:left;">-->
+    <!--            <span>{{ itemData.skewY }}</span>-->
+    <!--          </ui-prop>-->
+    <!--        </div>-->
+    <!--      </ui-prop>-->
+    <!--    </div>-->
+    <!--    <ui-prop name="zIndex">-->
+    <!--      <span>{{ itemData.zIndex }}</span>-->
+    <!--    </ui-prop>-->
+    <!--    <ui-prop name="childrenCount">-->
+    <!--      <span>{{ itemData.childrenCount }}</span>-->
+    <!--    </ui-prop>-->
+    <!--    &lt;!&ndash;节点状态&ndash;&gt;-->
+    <!--    <ui-prop name="active">-->
+    <!--      <p v-if="itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">-->
+    <!--        <input type="checkbox"-->
+    <!--               style="width: 20px;height: 20px;"-->
+    <!--               :checked.sync="itemData.active"-->
+    <!--               @click="onBtnClickNodeHide">-->
+    <!--        隐藏节点-->
+    <!--      </p>-->
 
-      <p v-if="!itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">
-        <input type="checkbox"
-               style="width: 20px;height: 20px;"
-               :checked="itemData.active"
-               @click="onBtnClickNodeShow"
-        >
-        显示节点
-      </p>
-    </ui-prop>
-    <!--颜色-->
-    <ui-prop name="color">
-      <div style="display: flex;flex-direction: row;justify-content: center;">
-        <div style="display: flex;flex:1;">
+    <!--      <p v-if="!itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">-->
+    <!--        <input type="checkbox"-->
+    <!--               style="width: 20px;height: 20px;"-->
+    <!--               :checked="itemData.active"-->
+    <!--               @click="onBtnClickNodeShow"-->
+    <!--        >-->
+    <!--        显示节点-->
+    <!--      </p>-->
+    <!--    </ui-prop>-->
+    <!--    &lt;!&ndash;颜色&ndash;&gt;-->
+    <!--    <ui-prop name="color">-->
+    <!--      <div style="display: flex;flex-direction: row;justify-content: center;">-->
+    <!--        <div style="display: flex;flex:1;">-->
 
-          <el-color-picker v-model="itemData.color" size="mini" style="flex:1;margin: 0;"
-                           @change="changeColor"></el-color-picker>
-        </div>
-        <span style="width: 60px;">{{ itemData.color }}</span>
+    <!--          <el-color-picker v-model="itemData.color" size="mini" style="flex:1;margin: 0;"-->
+    <!--                           @change="changeColor"></el-color-picker>-->
+    <!--        </div>-->
+    <!--        <span style="width: 60px;">{{ itemData.color }}</span>-->
 
-      </div>
-    </ui-prop>
+    <!--      </div>-->
+    <!--    </ui-prop>-->
   </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue"
-import {Component, Prop} from "vue-property-decorator"
+import {Component, Prop, Emit} from "vue-property-decorator"
+import {} from 'vue-class-component'
 import UiProp from './ui-prop.vue'
+import {setup} from "vue-class-component/dist/vue-class-component";
 
 @Component({
   components: {UiProp},
 })
 export default class NodeBaseProperty extends Vue {
-  name: string = "app"
+  name: string = "node-base"
 
-  @Prop()
-  itemData: any = null;
+  // @Prop({required: false})
+  // label: string = ''
+  //
+  // @Prop({required: false})
+  // data: any = {};
+
+  setup() {
+    // computed({
+    //   get: () => {
+    //
+    //   }
+    // })
+  }
+
+  itemData: any = {};
 
   changeSizeActionWidth(step: number) {
     let w = parseFloat(this.itemData.width);
-    this.itemData.width = w + step;
+    // this.itemData.width = w + step;
     this.changeSize();
   }
 
 
   changeSizeActionHeight(step: number) {
     let h = parseFloat(this.itemData.height);
-    this.itemData.height = h + step;
+    // this.itemData.height = h + step;
     this.changeSize();
   }
 
 
   changePositionActionX(step: number) {
     let x = parseFloat(this.itemData.x);
-    this.itemData.x = x + step;
+    // this.itemData.x = x + step;
     this.changePosition();
   }
 
 
   changePositionActionY(step: number) {
     let y = parseFloat(this.itemData.y);
-    this.itemData.y = y + step;
+    // this.itemData.y = y + step;
     this.changePosition();
   }
 
diff --git a/source/src/devtools/ccType/SceneProperty.vue b/source/src/devtools/ccType/SceneProperty.vue
index 9e416e7..3cc5db6 100644
--- a/source/src/devtools/ccType/SceneProperty.vue
+++ b/source/src/devtools/ccType/SceneProperty.vue
@@ -4,13 +4,14 @@
   </div>
 </template>
 
-<script>
-  export default {
-    name: "app",
-    data() {
-      return {}
-    }
-  }
+<script lang="ts">
+import Vue from 'vue'
+import {Component, Prop} from "vue-property-decorator";
+
+@Component
+export default class SceneProperty extends Vue {
+  name: string = "scene"
+}
 </script>
 
 <style scoped>
diff --git a/source/src/devtools/index.vue b/source/src/devtools/index.vue
index 29be2d1..a09d43f 100644
--- a/source/src/devtools/index.vue
+++ b/source/src/devtools/index.vue
@@ -1,227 +1,229 @@
 <template>
-  <div style="display: flex;width: 100%; height: 100%;flex-direction: column">
-    <div v-show="isShowDebug" style="display: flex;flex: 1; flex-direction: column;">
-      <div>
-        <el-button type="success" size="mini" @click="onBtnClickTest1">Test1</el-button>
-        <el-button type="success" size="mini" @click="onBtnClickTest2">Test2</el-button>
-        <el-button type="success" size="mini" @click="onMemoryTest">内存测试</el-button>
+  <div id="devtools">
+    <div v-show="isShowDebug" class="find">
+      <div v-if="false">
+        <el-button type="success" @click="onBtnClickTest1">Test1</el-button>
+        <el-button type="success" @click="onBtnClickTest2">Test2</el-button>
+        <el-button type="success" @click="onMemoryTest">内存测试</el-button>
       </div>
-      <div>
-        <span>JS堆栈限制: {{memory.performance.jsHeapSizeLimit}}</span>
-        <span>JS堆栈大小: {{memory.performance.totalJSHeapSize}}</span>
-        <span>JS堆栈使用: {{memory.performance.usedJSHeapSize}}</span>
+      <div v-if="false">
+        <span>JS堆栈限制: {{ memory.performance.jsHeapSizeLimit }}</span>
+        <span>JS堆栈大小: {{ memory.performance.totalJSHeapSize }}</span>
+        <span>JS堆栈使用: {{ memory.performance.usedJSHeapSize }}</span>
+      </div>
+      <div class="left">
+        <div class="tool-btn">
+          <el-switch active-text="实时监控" v-model="watchEveryTime" @change="onChangeWatchState"></el-switch>
+          <div class="flex1"></div>
+          <el-button type="success" class="el-icon-refresh" @click="onBtnClickUpdateTree"></el-button>
+        </div>
+        <div class="treeList">
+          <el-tree :data="treeData"
+                   style="display: inline-block;"
+                   :props="defaultProps"
+                   :highlight-current="true"
+                   :default-expand-all="false"
+                   :expand-on-click-node="true"
+                   @node-click="handleNodeClick"></el-tree>
+        </div>
+      </div>
+      <div class="right">
+        <div class="  bg-purple-light treeInfo">
+          <NodeBaseProperty :data="treeItemData"></NodeBaseProperty>
+          <SceneProperty v-show=" treeItemData.type === 'cc_Scene'"></SceneProperty>
+          <ComponentsProperty :components.sync="treeItemData.components"></ComponentsProperty>
+        </div>
       </div>
-      <el-row style="display:flex; flex: 1;">
-        <el-col :span="8" style="display: flex;flex-direction: column;">
-          <div style="display: flex; flex-direction: row; ">
-            <el-switch active-text="实时监控" v-model="watchEveryTime" @change="onChangeWatchState"></el-switch>
-            <el-button type="success" class="el-icon-refresh" size="mini" @click="onBtnClickUpdateTree">刷新</el-button>
-          </div>
-          <div class="grid-content treeList" style="flex: 1;">
 
-            <el-tree :data="treeData"
-                     :props="defaultProps"
-                     :highlight-current="true"
-                     :default-expand-all="false"
-                     :expand-on-click-node="true"
-                     @node-click="handleNodeClick"></el-tree>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <div class="grid-content bg-purple-light treeInfo">
-            <NodeBaseProperty v-bind:itemData="treeItemData"></NodeBaseProperty>
-            <SceneProperty v-show=" treeItemData.type === 'cc_Scene'"></SceneProperty>
-            <ComponentsProperty v-bind:components="treeItemData.components"></ComponentsProperty>
-          </div>
-        </el-col>
-      </el-row>
     </div>
-    <div v-show="!isShowDebug" style="display: flex; flex: 1;" class="center-center horizontal">
-      <span style="margin-right: 20px;">未发现cocos creator的游戏!</span>
-      <el-button type="success" class="el-icon-refresh" size="mini" @click="onBtnClickUpdatePage">刷新</el-button>
+    <div v-show="!isShowDebug" class="no-find">
+      <span>未发现cocos creator的游戏!</span>
+      <el-button type="success" class="el-icon-refresh" @click="onBtnClickUpdatePage">刷新</el-button>
     </div>
   </div>
 </template>
 
-<script>
-  // import injectScript from '../injectScript.js'
-  // import EvalCode from "./evalCodeString.js";
+<script lang="ts">
+// import injectScript from '../injectScript.js'
+// import EvalCode from "./evalCodeString.js";
+
+import Vue from "vue";
+import NodeBaseProperty from './ccType/NodeBaseProperty'
+import ComponentsProperty from './ccType/ComponentsProperty'
+import SceneProperty from './ccType/SceneProperty'
+import {Component} from "vue-property-decorator";
+
+const PluginMsg = require("../core/plugin-msg");
+@Component({components: {NodeBaseProperty, ComponentsProperty, SceneProperty}})
+export default class Index extends Vue {
+  isShowDebug: boolean = true;
+  treeItemData: Object = {};
+  treeData = []
+  treeDataMap = {};
+  bgConn = null// 与background.js的链接
+
+  defaultProps = {
+    children: "children",
+    label: "name"
+  };
+  watchEveryTime: boolean = false;// 实时监控节点树
+  memory = {
+    performance: {},
+    console: {},
+  }
 
 
-  const PluginMsg = require("../core/plugin-msg");
+  created() {
+    this.onTestData();
+    if (chrome && chrome.runtime) {
+      this._initChromeRuntimeConnect();
+    }
 
-  export default {
-    data() {
-      return {
-        isShowDebug: false,
-        treeItemData: {},
-        treeData: [],
-        treeDataMap: {},
-        bgConn: null,// 与background.js的链接
+    window.addEventListener("message", function (event) {
+      console.log("on vue:" + JSON.stringify(event.data));
+      console.log("on vue:" + JSON.stringify(event));
+    }, false);
+  }
 
-        defaultProps: {
-          children: 'children',
-          label: 'name'
-        },
-        watchEveryTime: false,// 实时监控节点树
-        memory: {
-          performance: {},
-          console: {},
-        },
-      }
-    },
-    created() {
-      // chrome.devtools.inspectedWindow.tabId
-      // 接收来自background.js的消息数据
-      this.bgConn = chrome.runtime.connect({name: PluginMsg.Page.Devtools});
-      this.bgConn.onMessage.addListener(function (data, sender) {
-        if (!data) {
-          return;
-        }
-        let eventData = data.data;
-        let eventMsg = data.msg;
-        if (eventMsg === PluginMsg.Msg.ListInfo) {
-          this.isShowDebug = true;
-          this._updateTreeView(eventData);
-        } else if (eventMsg === PluginMsg.Msg.Support) {
-          this.isShowDebug = eventData.support;
-        } else if (eventMsg === PluginMsg.Msg.NodeInfo) {
-          this.isShowDebug = true;
-          this.treeItemData = eventData;
-        } else if (eventMsg === PluginMsg.Msg.MemoryInfo) {
-          this.memory = eventData;
-        }
-      }.bind(this));
-
-      window.addEventListener('message', function (event) {
-        console.log("on vue:" + JSON.stringify(event.data));
-        console.log("on vue:" + JSON.stringify(event));
-      }, false);
-    },
-    methods: {
-      onTestData() {
-        let testData = {
-          "type": "cc_Node",
-          "uuid": "5cUWX4Yh1MipGk+ssnZ/fL",
-          "name": "Canvas",
-          "x": 960,
-          "y": 540.4931506849315,
-          "zIndex": 0,
-          "childrenCount": 6,
-          "children": [],
-          "width": 1920,
-          "height": 1080.986301369863,
-          "color": "#fff85f",
-          "opacity": 255,
-          "rotation": 0,
-          "rotationX": 0,
-          "rotationY": 0,
-          "anchorX": 0.5,
-          "anchorY": 0.5,
-          "scaleX": 1,
-          "scaleY": 1,
-          "skewX": 0,
-          "skewY": 0,
-          "components": [
-            {
-              "uuid": "Comp.931",
-              "type": "cc_Canvas",
-              "name": "Canvas<Canvas>"
-            },
-            {
-              "uuid": "Comp.932",
-              "type": "HotUpdateScene",
-              "name": "Canvas<HotUpdateScene>"
-            }],
-          "active": true
-        };
-        this.treeItemData = testData;
-      },
-      handleNodeClick(data) {
-        // todo 去获取节点信息
-        // console.log(data);
-        let uuid = data.uuid;
-        if (uuid !== undefined) {
-          this.evalInspectorFunction("getNodeInfo", `"${uuid}"`);
-        }
-      },
-      onChangeWatchState() {
-        if (this.watchEveryTime) {
-          this.timerID = setInterval(function () {
-            this.onBtnClickUpdateTree();
-          }.bind(this), 100);
-        } else {
-          clearInterval(this.timerID);
-        }
-
-      },
-      _updateTreeView(data) {
-        this.treeData = [data.scene];
+  _initChromeRuntimeConnect() {
+    // chrome.devtools.inspectedWindow.tabId
+    // 接收来自background.js的消息数据
+    this.bgConn = chrome.runtime.connect({name: PluginMsg.Page.Devtools});
+    this.bgConn.onMessage.addListener((data, sender) => {
+      if (!data) {
         return;
-        // 构建树形数据
-        if (this.treeData.length === 0) {// 第一次赋值
+      }
+      let eventData = data.data;
+      let eventMsg = data.msg;
+      if (eventMsg === PluginMsg.Msg.ListInfo) {
+        this.isShowDebug = true;
+        this._updateTreeView(eventData);
+      } else if (eventMsg === PluginMsg.Msg.Support) {
+        this.isShowDebug = eventData.support;
+      } else if (eventMsg === PluginMsg.Msg.NodeInfo) {
+        this.isShowDebug = true;
+        this.treeItemData = eventData;
+      } else if (eventMsg === PluginMsg.Msg.MemoryInfo) {
+        this.memory = eventData;
+      }
+    });
+  }
 
 
-        } else {
+  onTestData() {
+    for (let i = 0; i < 40; i++) {
+      this.treeData.push({name: `node${i}`, children: [{name: `children11111111111111111111111111111111111111${i}`}]})
+    }
 
-        }
+    this.treeItemData = {
+      "type": "cc_Node",
+      "height": 1080.986301369863,
+      "color": "#fff85f",
+      "opacity": 255,
+      "components": [
+        {
+          "uuid": "Comp.931",
+          "type": "cc_Canvas",
+          "name": "Canvas<Canvas>"
+        },
+        {
+          "uuid": "Comp.932",
+          "type": "HotUpdateScene",
+          "name": "Canvas<HotUpdateScene>"
+        }],
+      "active": true
+    };
+  }
+
+  handleNodeClick(data) {
+    // todo 去获取节点信息
+    // console.log(data);
+    let uuid = data.uuid;
+    if (uuid !== undefined) {
+      this.evalInspectorFunction("getNodeInfo", `"${uuid}"`);
+    }
+  }
+
+  onChangeWatchState() {
+    if (this.watchEveryTime) {
+      this.timerID = setInterval(function () {
+        this.onBtnClickUpdateTree();
+      }.bind(this), 100);
+    } else {
+      clearInterval(this.timerID);
+    }
+
+  }
+
+  _updateTreeView(data) {
+    this.treeData = [data.scene];
+    return;
+    // 构建树形数据
+    if (this.treeData.length === 0) {// 第一次赋值
 
 
-        let treeData = [];
-        debugger
-        let sceneData = data.scene;
-        if (sceneData) {
-          // scene info
-          let dataRoot = {
-            type: sceneData.type, uuid: sceneData.uuid,
-            label: sceneData.name, children: []
-          };
-          treeData.push(dataRoot);
-          this.handleNodeClick(dataRoot);
-          // scene children info
-          for (let k in sceneData.children) {
-            let itemSceneData = sceneData.children[k];
-            // let sceneItem = {uuid: itemSceneData.uuid, label: itemSceneData.name, children: []};
-            let sceneItem = {};
-            dealChildrenNode(itemSceneData, sceneItem);
-            treeData[0].children.push(sceneItem);
-          }
-        }
-        this.treeData = treeData;
+    } else {
 
-        function dealChildrenNode(rootData, obj) {
-          obj['data'] = rootData;
-          obj['uuid'] = rootData.uuid;
-          obj['label'] = rootData.name;
-          obj['type'] = rootData.type;
-          obj['children'] = [];
-          let rootChildren = rootData.children;
-          for (let k in rootChildren) {
-            let itemData = rootChildren[k];
-            let item = {};
-            dealChildrenNode(itemData, item);
-            obj.children.push(item);
-          }
-        }
-      },
-      _getInjectScriptString() {
-        let injectScript = "";
-        let code = injectScript.toString();
-        let array = code.split('\n');
-        array.splice(0, 1);// 删除开头
-        array.splice(-1, 1);// 删除结尾
-        let evalCode = "";
-        for (let i = 0; i < array.length; i++) {
-          evalCode += array[i] + '\n';
-        }
-        // console.log(evalCode);
-        return evalCode;
-      },
+    }
 
-      evalInspectorFunction(funcString, parm) {
-        if (funcString || funcString.length > 0) {
-          let injectCode =
-            `if(window.ccinspector){
+
+    let treeData = [];
+    debugger
+    let sceneData = data.scene;
+    if (sceneData) {
+      // scene info
+      let dataRoot = {
+        type: sceneData.type, uuid: sceneData.uuid,
+        label: sceneData.name, children: []
+      };
+      treeData.push(dataRoot);
+      this.handleNodeClick(dataRoot);
+      // scene children info
+      for (let k in sceneData.children) {
+        let itemSceneData = sceneData.children[k];
+        // let sceneItem = {uuid: itemSceneData.uuid, label: itemSceneData.name, children: []};
+        let sceneItem = {};
+        dealChildrenNode(itemSceneData, sceneItem);
+        treeData[0].children.push(sceneItem);
+      }
+    }
+    this.treeData = treeData;
+
+    function dealChildrenNode(rootData, obj) {
+      obj["data"] = rootData;
+      obj["uuid"] = rootData.uuid;
+      obj["label"] = rootData.name;
+      obj["type"] = rootData.type;
+      obj["children"] = [];
+      let rootChildren = rootData.children;
+      for (let k in rootChildren) {
+        let itemData = rootChildren[k];
+        let item = {};
+        dealChildrenNode(itemData, item);
+        obj.children.push(item);
+      }
+    }
+  }
+
+  _getInjectScriptString() {
+    let injectScript = "";
+    let code = injectScript.toString();
+    let array = code.split("\n");
+    array.splice(0, 1);// 删除开头
+    array.splice(-1, 1);// 删除结尾
+    let evalCode = "";
+    for (let i = 0; i < array.length; i++) {
+      evalCode += array[i] + "\n";
+    }
+    // console.log(evalCode);
+    return evalCode;
+  }
+
+
+  evalInspectorFunction(funcString, parm) {
+    if (funcString || funcString.length > 0) {
+      let injectCode =
+          `if(window.ccinspector){
               let func = window.ccinspector.${funcString};
               if(func){
                 console.log("执行${funcString}成功");
@@ -232,154 +234,201 @@
             }else{
               console.log("可能脚本没有注入");
             }`;
-          console.log(injectCode);
-          let ret = chrome.devtools.inspectedWindow.eval(injectCode, function (result, info) {
-            if (info && info.isException) {
-              console.log(info.value)
-            }
+      console.log(injectCode);
+      if (chrome && chrome.devtools) {
+        let ret = chrome.devtools.inspectedWindow.eval(injectCode, function (result, info) {
+          if (info && info.isException) {
+            console.log(info.value);
+          }
 
-          });
-          console.log(`ret:${ret}`);
-        } else {
-          console.log("执行失败!");
-        }
-      },
-      onBtnClickUpdateTree() {
-        this.evalInspectorFunction("updateTreeInfo");
+        });
+        console.log(`ret:${ret}`);
+      }
+    } else {
+      console.log("执行失败!");
+    }
+  }
 
-      },
-      onBtnClickUpdatePage() {
-        this.evalInspectorFunction("checkIsGamePage", "true");
-        // let code = this._getInjectScriptString();
-        // chrome.devtools.inspectedWindow.eval(code, function () {
-        //   console.log("刷新成功!");
-        // });
-      },
-      onBtnClickTest1() {
-        chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg1()`)
-      },
-      _getTime() {
-        return new Date().getTime().toString();
-      },
-      onBtnClickTest2() {
-        // chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg2()`)
+  onBtnClickUpdateTree() {
+    this.evalInspectorFunction("updateTreeInfo");
+
+  }
+
+  onBtnClickUpdatePage() {
+    this.evalInspectorFunction("checkIsGamePage", "true");
+    // let code = this._getInjectScriptString();
+    // chrome.devtools.inspectedWindow.eval(code, function () {
+    //   console.log("刷新成功!");
+    // });
+  }
+
+  onBtnClickTest1() {
+    chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg1()`);
+  }
+
+  _getTime() {
+    return new Date().getTime().toString();
+  }
+
+  onBtnClickTest2() {
+    // chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg2()`)
 
 
-        let newData = [
+    let newData = [
+      {
+        name: this._getTime(),
+        children: [
           {
             name: this._getTime(),
             children: [
-              {
-                name: this._getTime(),
-                children: [
-                  {
-                    name: this._getTime(),
-                  }
-                ]
-              },
               {
                 name: this._getTime(),
               }
             ]
+          },
+          {
+            name: this._getTime(),
           }
-
         ]
+      }
 
-        // this.treeData = newData;
-        this._update37(this.treeData[0], newData[0])
-      },
-      _update37(oldTreeNode, newTreeNode) {
-        debugger
-        if (!newTreeNode) {
-          return;
-        }
-        if (!oldTreeNode) {
-          oldTreeNode = {name: "", children: []};
-        }
-        if (oldTreeNode.name !== newTreeNode.name) {
-          oldTreeNode.name = newTreeNode.name;
-        }
+    ];
 
-        let oldChildren = oldTreeNode.children;
-        let newChildren = newTreeNode.children;
+    // this.treeData = newData;
+    this._update37(this.treeData[0], newData[0]);
+  }
 
-        if (oldChildren.length === 0) {
-          oldChildren = newChildren;
+  _update37(oldTreeNode, newTreeNode) {
+    debugger
+    if (!newTreeNode) {
+      return;
+    }
+    if (!oldTreeNode) {
+      oldTreeNode = {name: "", children: []};
+    }
+    if (oldTreeNode.name !== newTreeNode.name) {
+      oldTreeNode.name = newTreeNode.name;
+    }
+
+    let oldChildren = oldTreeNode.children;
+    let newChildren = newTreeNode.children;
+
+    if (oldChildren.length === 0) {
+      oldChildren = newChildren;
+    } else {
+      // 比较2个数据: treeData, newTreeData
+      // 比较该层级的数据
+      for (let i = 0; i < newChildren.length; i++) {
+        let itemNew = newChildren[i];
+        let itemOld = oldChildren[i];
+        if (itemOld === undefined) {
+          // 老节点中没有
+          oldChildren.push(itemNew);
+        } else if (itemNew.name !== itemOld.name) {
+          // 替换
+          oldChildren.splice(i, 1, itemNew);
         } else {
-          // 比较2个数据: treeData, newTreeData
-          // 比较该层级的数据
-          for (let i = 0; i < newChildren.length; i++) {
-            let itemNew = newChildren[i];
-            let itemOld = oldChildren[i];
-            if (itemOld === undefined) {
-              // 老节点中没有
-              oldChildren.push(itemNew);
-            } else if (itemNew.name !== itemOld.name) {
-              // 替换
-              oldChildren.splice(i, 1, itemNew);
-            } else {
-              this._update37(itemOld, itemNew);
-            }
-          }
-          // 多余的删除了
-          if (oldChildren.length > newChildren.length) {
-            oldChildren.splice(newChildren.length, oldChildren.length - newChildren.length);
-          }
+          this._update37(itemOld, itemNew);
         }
-      },
-      onBtnClickTest3() {
-        // chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`)
-        let f = require("../core/event-mgr");
-        console.log(f.id);
-      },
-      onMemoryTest() {
-        this.evalInspectorFunction("onMemoryInfo");
+      }
+      // 多余的删除了
+      if (oldChildren.length > newChildren.length) {
+        oldChildren.splice(newChildren.length, oldChildren.length - newChildren.length);
       }
     }
   }
+
+  onBtnClickTest3() {
+    // chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`)
+    let f = require("../core/event-mgr");
+    console.log(f.id);
+  }
+
+  onMemoryTest() {
+    this.evalInspectorFunction("onMemoryInfo");
+  }
+
+}
 </script>
 
-<style scoped>
-  .treeList {
-    height: 100%
-  }
+<style scoped lang="less">
+@import "../index.less";
 
-  .treeInfo {
-    height: 100%
-  }
+#devtools {
+  display: flex;
+  width: 100%;
+  height: 100%;
 
-  .bg-purple {
-    background: #d3dce6;
-  }
-
-  .grid-content {
-    border-radius: 4px;
-    min-height: 20px;
-  }
-
-  .bg-purple-light {
-    background: #e5e9f2;
-  }
-
-  body span h1 h2 h3 {
-    font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, 'SourceHanSansCN-Normal', Arial, sans-serif
-  }
-
-  .layout {
-    display: block;
-  }
-
-  .horizontal {
+  .no-find {
+    display: flex;
+    flex: 1;
     flex-direction: row;
-  }
-
-  .vertical {
-    flex-direction: column;
-  }
-
-  .center-center {
-    align-content: center;
     align-items: center;
     justify-content: center;
+
+    span {
+      margin-right: 20px;
+    }
   }
+
+  .find {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+
+    .left {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+
+      .tool-btn {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .treeList {
+        margin-top: 3px;
+        flex: 1;
+        height: 100%;
+        border-radius: 4px;
+        min-height: 20px;
+        overflow: scroll;
+        width: 300px;
+
+
+        &::-webkit-scrollbar {
+          width: 6px;
+          height: 6px;
+          background: #999;
+          border-radius: 2px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: #333;
+          border-radius: 2px;
+        }
+      }
+    }
+
+    .right {
+      flex: 2;
+    }
+  }
+}
+
+
+.treeInfo {
+  height: 100%
+}
+
+.bg-purple {
+  background: #d3dce6;
+}
+
+
+.bg-purple-light {
+  background: #e5e9f2;
+}
 </style>
