lynx-console
指南
API
演示
指南
API
演示
简体中文

快速开始

安装

yarn add lynx-console

Peer dependencies

yarn add @lynx-js/react @lynx-js/types
yarn add -D @types/react

0. 配置构建（必需）

在 lynx.config.ts 里加上：

lynx.config.ts
export default defineConfig({
  source: {
    define: {
      console: 'globalThis.console',
      fetch: 'lynx.fetch',
    },
  },
});
  • console — iOS 上 JSC 注入的 console 并不是 globalThis.console。不做这个替换的话， initLogMonitor() 在 iOS 上不会生效。
  • fetch — 视构建配置而定，不替换成 lynx.fetch 的话，网络请求可能不会被记录。

1. 初始化监视器

在应用入口调用这些函数，而且要在 LynxConsole 渲染之前。

src/index.tsx
import {
  initLogMonitor,
  initMainThreadConsole,
  initNetworkMonitor,
  initPerformanceMonitor,
} from 'lynx-console/setup';

initLogMonitor();
initMainThreadConsole();
initNetworkMonitor();
initPerformanceMonitor();
WARNING

主线程控制台建立在日志监视器之上，所以 initLogMonitor() 必须在 initMainThreadConsole() 之前调用。

没有初始化的监视器，对应的标签页不会显示。

2. 渲染组件

src/App.tsx
import LynxConsole from 'lynx-console';

function App() {
  return (
    <view>
      {/* 你的应用 */}
      <LynxConsole theme="light" safeAreaInsetBottom="34px" />
    </view>
  );
}

也可以用 lazy 把它从主包里拆出去：

src/App.tsx
import { lazy, Suspense } from '@lynx-js/react';

const LynxConsole = lazy(() => import('lynx-console'));

function App() {
  return (
    <view>
      {/* 你的应用 */}
      <Suspense>
        <LynxConsole theme="light" safeAreaInsetBottom="34px" />
      </Suspense>
    </view>
  );
}

运行应用，点一下悬浮按钮，面板就打开了。

下一步

目录