Skip to content

一个轻量、针对跨平台框架Doric开发者的调试面板。

License

Notifications You must be signed in to change notification settings

doric-pub/DConsole

Repository files navigation

dConsole

一个轻量、针对跨平台框架Doric开发者的调试面板。

  • 支持日志(Logs)查看
  • 支持查看所有元素(Element
  • 支持对mvvm模式下的状态State记录,并支持回溯
  • 支持查看librariespluginsnodes

详情可参考下方截图

Usage

  1. 将 dConsole 添加到ts项目中,使用 npm安装:
$ npm install doric-console --save

在Panel的onCreate()回调方法里,通过openDConsole(context: BridgeContext)方法传入当前的context即可

import { openDConsole } from "doric-console";

onCreate() {
    openDConsole(this.context);
}

完成以上ts项目中的配置即可使用DConsole,如果需要在调试面板查看librariespluginsnodes, 则需要在iOS或者Andorid端进行以下配置。

  1. iOS端使用cocoapods引入
$ pod 'dConsole'

注册library

#import "dConsoleLibrary.h"

[Doric registerLibrary:[dConsoleLibrary new]];
  1. Andorid端在app目录中的 build.gradle 中添加依赖
dependencies {
    ......
    implementation "pub.doric:dconsole:0.1.6"
}

注册library

import pub.doric.library.dConsoleLibrary;

Doric.registerLibrary(new dConsoleLibrary());
  1. 开启和关闭

在native端开启或关闭DConsole的方法:

iOS端:

#import "dConsoleLibrary.h"

[[DConsoleManager instance] enableConsole:YES];  // 开启

[[DConsoleManager instance] enableConsole:NO];  // 关闭

Andorid端:

DConsoleManager.getInstance().enableConsole(true);  // 开启

DConsoleManager.getInstance().enableConsole(false);  // 关闭

在js端获取开关状态:

dconsolePlugin(context)
      .enableState()
      .then((isEnable) => {
        if (this.stateText !== undefined) {
          this.stateText.text = isEnable ? "已打开" : "已关闭";
        }
      });

Requirements

"peerDependencies": {
      "doric": "^0.10.22",
},

Screenshots

  • Log

可以通过底部的输入框执行Javascript语句,可调用当前Panel的function,比如可执行以下语句

this.getRootView().viewId
this.getRootView().height
this.getRootView().scaleX = 0.5
this.getRootView().scaleX = 1
iOS Android
  • Element
  1. 控件的layoutConfig信息提前展示,比如(2 , 1)表示宽度most,高度为fit

0 表示 just 1 表示 fit 2 表示 most

  1. 支持点击元素高亮显示控件

  • Registry
iOS Android
  • State