参考文档：https://gitee.com/openharmony/docs/blob/5654c2b940ab3e2f4f0baf435e630c4ef3536428/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md

获取组件信息

  • getInspectorByKey(id: string): string 获取指定id的组件的所有属性，不包括子组件信息。
  • getInspectorTree(): string 获取组件树的所有属性，包括子组件信息。

getInspectorByKey与getInspectorTree方法可以使用，但在IDE会显示报错，建议@ts-ignore忽略错误

这里我提供两个方法，来帮助我们更好在Log里面查看组件信息

//打印
log(data, level, parentName, componentId) {
    for (let k in data) {
      let obj = data[k]

      // 其他数据类型
      if (typeof obj == 'string' || typeof obj == 'number' || typeof obj == 'boolean') {
        console.info(`[${componentId}][${parentName}]【${k}】 ===> ${obj.toString()}`)
        continue
      }


      //空对象
      if (!Object.keys(obj).length) {
        console.info(`[${componentId}][${parentName}]【${k}】 ===> ${JSON.stringify(obj)}`)
        continue
      }

      //object
      this.log(obj, level + 1, `${parentName}->${k}`, componentId)
    }
}

// 打印组件信息
logComponent(componentId: string) {
    // @ts-ignore
    let str = getInspectorByKey(componentId)
    try {
      let data = JSON.parse(str)
      this.log(data, 0, 'root', componentId)
    } catch (e) {
      console.log('无法找到组件')
    }
}

// 打印组件树信息
logComponentTree() {
    // @ts-ignore
    let str = getInspectorTree()
    try {
      let data = JSON.parse(str)
      this.log(data, 0, 'root', 'tree')
    } catch (e) {
      console.log('获取组件树失败')
    }
}

查看组件

Text('组件标识发送事件演示')
        .fontSize(30)
        .margin({ bottom: 30 })
        .id('testComponent')
        .onAppear(() => {
          this.logComponent('testComponent')
        })

image.png

查看组件树

Text('组件标识发送事件演示')
        .fontSize(30)
        .margin({ bottom: 30 })
        .id('testComponent')
        .onAppear(() => {
          this.logComponentTree()
        })

image.png