处理无效的数据

source/package.json

@@ -9,20 +9,21 @@
     "build-watch": "vue-cli-service build --watch"
   },
   "dependencies": {
-    "@types/fs-extra": "^9.0.9",
+    "@types/kind-of": "^6.0.0",
-    "@types/node": "^14.14.37",
     "babel-eslint": "^10.1.0",
     "core-js": "^3.6.5",
-    "uuid": "^8.3.2",
     "element-ui": "^2.15.1",
     "fs-extra": "^9.1.0",
     "less": "^4.1.1",
     "less-loader": "^7.3.0",
+    "uuid": "^8.3.2",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
+    "@types/fs-extra": "^9.0.9",
+    "@types/node": "^14.14.37",
     "@types/uuid": "^8.3.1",
     "@types/chrome": "0.0.133",
     "@typescript-eslint/eslint-plugin": "^4.18.0",

source/src/devtools/data.ts

@@ -79,7 +79,7 @@ export class ObjectData extends Info {
 }
 
 export class InvalidData extends Info {
-  data: any;
+  data: "undefined" | "null" | "Infinity" | "NaN"|string;
 
   constructor(data: any) {
     super();

source/src/devtools/ui/index.vue

@@ -98,7 +98,7 @@ export default class Index extends Vue {
       this._expand(data.engineUUID);
     })
     Bus.$on(BusMsg.RequestObjectData, (data: ObjectData, cb: Function) => {
-      if (this.requestList.find(el => el.id === data.id)) {
+      if (!data.id || this.requestList.find(el => el.id === data.id)) {
         return
       }
       this.requestList.push({id: data.id, cb});

source/src/devtools/ui/ui-prop.vue

@@ -20,7 +20,7 @@
       </div>
       <div class="value">
         <div v-if="isInvalid()" class="invalid">
-          {{ getInvalidDisplayText() }}
+          {{ value.data }}
         </div>
         <el-input v-if="isString()" v-model="value.data"
                   :disabled="value.readonly"
@@ -162,26 +162,6 @@ export default class UiProp extends Vue {
     return this.value && (this.value.type === DataType.Invalid);
   }
 
-  getInvalidDisplayText() {
-    if (this.isInvalid()) {
-      const data = this.value.data;
-      switch (data) {
-        case undefined: {
-          return "undefined"
-        }
-        case null: {
-          return "null"
-        }
-        case Infinity: {
-          return "Infinity"
-        }
-        default: {
-          return `未知的无效数据：${data}`
-        }
-      }
-    }
-  }
-
   isString() {
     return this.value && (this.value.type === DataType.String);
   }
@@ -244,10 +224,14 @@ export default class UiProp extends Vue {
 
   mounted() {
     this.watchValue();
+    if(this.isInvalid()){
+      this.value.data;
+      debugger
+    }
   }
 
   isShowTooltip() {
-    const el: HTMLDivElement = this.$refs.propText;
+    const el: HTMLDivElement = this.$refs.propText as HTMLDivElement;
     if (el) {
       if (el.scrollWidth > el.offsetWidth) {
         // 出现了省略号

source/src/inject/index.ts

@@ -271,78 +271,81 @@ class CCInspector {
   _genInfoData(node: any, key: string | number, path: Array<string>, filterKey = true) {
     let propertyValue = node[key];
     let info = null;
-    switch (typeof propertyValue) {
+    let invalidType = this._isInvalidValue(propertyValue);
-      case "boolean":
+    if (invalidType) {
-        info = new BoolData(propertyValue);
+      info = new InvalidData(invalidType);
-        break;
+    } else {
-      case "number":
+      switch (typeof propertyValue) {
-        info = new NumberData(propertyValue);
+        case "boolean":
-        break;
+          info = new BoolData(propertyValue);
-      case "string":
+          break;
-        info = new StringData(propertyValue);
+        case "number":
-        break;
+          info = new NumberData(propertyValue);
-      default:
+          break;
-        if (this._isInvalidValue(propertyValue)) {
+        case "string":
-          info = new InvalidData(propertyValue);
+          info = new StringData(propertyValue);
+          break;
+        default:
           //@ts-ignore
-        } else if (propertyValue instanceof cc.Color) {
+          if (propertyValue instanceof cc.Color) {
-          let hex = propertyValue.toHEX();
+            let hex = propertyValue.toHEX();
-          info = new ColorData(`#${hex}`);
+            info = new ColorData(`#${hex}`);
-        } else if (Array.isArray(propertyValue)) {
+          } else if (Array.isArray(propertyValue)) {
-          let keys: number[] = [];
+            let keys: number[] = [];
-          for (let i = 0; i < propertyValue.length; i++) {
+            for (let i = 0; i < propertyValue.length; i++) {
-            keys.push(i);
+              keys.push(i);
-          }
+            }
-          info = this._buildArrayData({
+            info = this._buildArrayData({
-            data: new ArrayData(),
+              data: new ArrayData(),
-            path: path,
+              path: path,
-            value: propertyValue,
+              value: propertyValue,
-            keys: keys,
+              keys: keys,
-          })
+            })
-        } else {
+          } else {
-          !info && (info = this._buildVecData({
+            !info && (info = this._buildVecData({
-            // @ts-ignore
+              // @ts-ignore
-            ctor: cc.Vec3,
+              ctor: cc.Vec3,
-            path: path,
+              path: path,
-            data: new Vec3Data(),
+              data: new Vec3Data(),
-            keys: ["x", "y", "z"],
+              keys: ["x", "y", "z"],
-            value: propertyValue,
+              value: propertyValue,
-          }))
+            }))
-          !info && (info = this._buildVecData({
+            !info && (info = this._buildVecData({
-            // @ts-ignore
+              // @ts-ignore
-            ctor: cc.Vec2,
+              ctor: cc.Vec2,
-            path: path,
+              path: path,
-            data: new Vec2Data(),
+              data: new Vec2Data(),
-            keys: ["x", "y"],
+              keys: ["x", "y"],
-            value: propertyValue
+              value: propertyValue
-          }))
+            }))
-          !info && (info = this._buildImageData({
+            !info && (info = this._buildImageData({
-            //@ts-ignore
+              //@ts-ignore
-            ctor: cc.SpriteFrame,
+              ctor: cc.SpriteFrame,
-            data: new ImageData(),
+              data: new ImageData(),
-            path: path,
+              path: path,
-            value: propertyValue,
+              value: propertyValue,
-          }))
+            }))
-          if (!info) {
+            if (!info) {
-            if (typeof propertyValue === "object") {
+              if (typeof propertyValue === "object") {
-              let ctorName = propertyValue.constructor.name;
+                let ctorName = propertyValue.constructor.name;
-              if (ctorName.startsWith("cc_")) {
+                if (ctorName.startsWith("cc_")) {
-                info = new EngineData();
+                  info = new EngineData();
-                info.engineType = ctorName;
+                  info.engineType = ctorName;
-                info.engineName = propertyValue.name;
+                  info.engineName = propertyValue.name;
-                info.engineUUID = propertyValue.uuid;
+                  info.engineUUID = propertyValue.uuid;
-              } else {
+                } else {
-                info = this._buildObjectData({
+                  info = this._buildObjectData({
-                  data: new ObjectData(),
+                    data: new ObjectData(),
-                  path: path,
+                    path: path,
-                  value: propertyValue,
+                    value: propertyValue,
-                  filterKey: filterKey,
+                    filterKey: filterKey,
-                })
+                  })
+                }
               }
             }
           }
-        }
+          break;
-        break;
+      }
     }
     if (info) {
       info.readonly = this._isReadonly(node, key)
@@ -389,7 +392,23 @@ class CCInspector {
   }
 
   _isInvalidValue(value: any) {
-    return value === null || value === Infinity || value === undefined;
+    // !!Infinity=true
+    if ((value && value !== Infinity) || value === 0 || value === false) {
+      return false;
+    }
+
+    if (value === null) {
+      return "null"
+    } else if (value === Infinity) {
+      return "Infinity"
+    } else if (value === undefined) {
+      return "undefined"
+    } else if (Number.isNaN(value)) {
+      return "NaN";
+    } else {
+      debugger
+      return false;
+    }
   }
 
   _buildObjectData({value, path, data, filterKey}: BuildObjectOptions) {