开发工具插件

了解如何使用开发工具插件来检查和调试你的 Expo 项目。

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

Dev tools 插件可在你的本地开发环境中使用，帮助你调试应用。它们由少量代码组成，你将其添加到项目中，从而使应用与外部 Chrome 窗口之间能够进行双向通信。此设置提供了用于检查应用、触发某些测试行为等功能的显示工具。

Dev tools 插件类似于可在开发构建和 Expo Go 中使用的 Flipper 插件，并且不需要向项目中添加原生模块或配置插件。

将 dev tools 插件添加到项目中

要向应用中添加 dev tool 插件，请将其作为包安装，并添加一小段代码片段来将代码连接到应用。此代码会从应用的根组件中调用，以建立应用与插件之间的双向通信。然后，插件就可以在应用以开发模式运行的整个期间检查应用的各个方面。

所有 Expo dev tools 插件 以及使用 我们的创建工具 创建的插件都会导出一个 hook，你可以用它将插件连接到应用。当应用未以开发模式运行时，该 hook 以及它返回的任何函数都不会执行任何操作。

某些插件 hook 需要与插件如何检查应用相关的参数。例如，用于检查 React Navigation 状态的插件可能需要一个导航根引用。

要开始使用该插件，请在应用的根组件中使用这个 hook：

import { useMyDevToolsPlugin } from 'my-devtools-plugin';

export default App() {
  useMyDevToolsPlugin();
  return (/* 其余应用内容 */)
}

在某些情况下，你可能需要直接与插件交互。所有插件都通过 expo/devtools 的导出进行通信，你可以通过 useDevToolsPluginClient 发送和监听消息。请务必将与插件的 Web 用户界面中使用的相同插件名称传递给 useDevToolsPluginClient：

import { useDevToolsPluginClient } from 'expo/devtools';

export default App() {
  const client = useDevToolsPluginClient('my-devtools-plugin');
   useEffect(() => {
    // 接收消息
    client?.addMessageListener("ping", (data) => {
      alert(`Received ping from ${data.from}`);
    });
    // 发送消息
    client?.sendMessage("ping", { from: "app" });
   }, []);

  return (/* 其余应用内容 */)
}

与 Expo Go 和 Development builds 的兼容性

Dev tools 插件应仅包含 JavaScript 代码。它们通常与 Expo Go 和 Development builds 兼容，并且不应要求创建新的 development build 来添加插件。如果插件所检查的包底层模块包含原生代码，且不属于 Expo Go 的一部分，那么请创建一个新的 development build，以同时使用该包中的组件和插件。

例如，检查 React Native Firebase 的 dev tools 插件将无法与 Expo Go 配合使用。React Native Firebase 包含不属于 Expo Go 的原生代码。要同时使用 dev tools 插件和 React Native Firebase，请创建一个 development build。

使用 dev tools 插件

安装 dev tools 插件并向项目中添加所需的连接代码后，你可以使用 npx expo start 启动开发服务器。然后按 shift + m 打开可用 dev tools 插件列表。选择你想使用的插件，它将会在一个新的 Chrome 窗口中打开。

使用 Expo CLI 启动开发服务器时，可以按 ? 来 显示所有命令。这会显示更多命令，包括打开 更多工具 的快捷方式。也可以在此菜单中选择 dev tools 插件。

Expo dev tools 插件

Expo 为常见调试任务提供了一些 dev tools 插件。按照下面的说明开始在应用中使用它们。

注意：以下每个 dev tools 插件 hook 仅会在开发模式下启用插件。它不会影响你的生产构建包。

React Navigation

受 @react-navigation/devtools 启发，React Navigation dev tools 插件允许查看 React Navigation 的操作和状态历史。你还可以回退到导航历史中的先前节点，并向应用发送深层链接。由于 Expo Router 构建于 React Navigation 之上，因此此插件与 Expo Router 完全兼容。

要使用该插件，先安装该包：

在应用入口点中将导航根传递给插件：

import { useEffect, useRef } from 'react';
import { useNavigationContainerRef, Slot } from 'expo-router';
import { useReactNavigationDevTools } from '@dev-plugins/react-navigation';

export default Layout() {
  const navigationRef = useNavigationContainerRef();

  useReactNavigationDevTools(navigationRef);

  return <Slot />;
}

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { useReactNavigationDevTools } from '@dev-plugins/react-navigation';

export default function App() {
  const navigationRef = useNavigationContainerRef();

  useReactNavigationDevTools(navigationRef);

return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

在终端中运行 npx expo start，按 shift + m 打开 dev tools 列表，然后选择 React Navigation 插件。这将打开插件的 Web 界面，随着你在应用中导航，显示你的导航历史。

Apollo Client

受 react-native-apollo-devtools 启发，Apollo Client dev tools 插件允许检查 Apollo Client 的缓存、查询和变更。

要使用该插件，先安装该包：

然后在应用的根组件中，或在你将应用其余部分包裹在 ApolloProvider 中的地方，将你的 client 实例传递给插件：

import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
import { useApolloClientDevTools } from '@dev-plugins/apollo-client';

const client = new ApolloClient({
  uri: 'https://demo.test.com/',
  cache: new InMemoryCache(),
});

export default function App() {
  useApolloClientDevTools(client);

  return <ApolloProvider>{/* ... */}</ApolloProvider>;
}

在终端中运行 npx expo start，按 shift + m 打开 dev tools 列表，然后选择 Apollo Client 插件。这将打开插件的 Web 界面，随着应用执行 Apollo Client 操作，显示你的查询历史、缓存和变更。

React Query

受 react-query-native-devtools 启发，React Query dev tools 插件让你可以探索 TanStack Query 中的数据和查询、缓存状态，以及从缓存中重新获取和移除查询。

要使用该插件，先安装该包：

然后在应用的根组件中，或在你将应用其余部分包裹在 QueryClientProvider 中的地方，将你的 client 实例传递给插件：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useReactQueryDevTools } from '@dev-plugins/react-query';

const queryClient = new QueryClient({});

export default function App() {
  useReactQueryDevTools(queryClient);

  return <QueryClientProvider client={queryClient}>{/* ... */}</QueryClientProvider>;
}

在终端中运行 npx expo start，按 shift + m 打开 dev tools 列表，然后选择 React Query 插件。这将打开插件的 Web 界面，显示你的应用中正在使用的查询。

Redux

redux-devtools-expo-dev-plugin 基于 Redux DevTools（来自 Chrome 扩展）。它提供操作及其如何影响状态的实时列表，并且能够从 DevTools 中回退、重放和分发操作。

要使用该插件，先安装该包：

如果你使用的是 @reduxjs/toolkit，请修改 configureStore 调用，通过传入 devTools: false 来禁用内置 dev tools。然后，通过拼接 devToolsEnhancer() 添加 Expo DevTools 插件增强器。configureStore 调用将如下所示：

import devToolsEnhancer from 'redux-devtools-expo-dev-plugin';

const store = configureStore({
  reducer: rootReducer,
  devTools: false,
  enhancers: getDefaultEnhancers => getDefaultEnhancers().concat(devToolsEnhancer()),
});

在终端中运行 npx expo start，按 shift + m 打开 dev tools 列表，然后选择 redux-devtools-expo-dev-plugin。这将打开插件的 Web 界面，随着操作被分发，显示你 store 中的操作和内容。

如果你是直接使用 redux 而不是 @reduxjs/toolkit，完整的安装和使用说明请参见项目的 README。

TinyBase

TinyBase dev tools 插件会将 TinyBase Store Inspector 连接到你的应用，让你查看和更新应用 store 的内容。

要使用该插件，先安装该包：

然后在应用的根组件中，或在你将应用其余部分用 store 的 Provider 包裹起来的地方，将你的 client 实例传递给插件：

import { createStore } from 'tinybase';
import { useValue, Provider } from 'tinybase/lib/ui-react';
import { useTinyBaseDevTools } from '@dev-plugins/tinybase';

const store = createStore().setValue('counter', 0);

export default function App() {
  useTinyBaseDevTools(store);

  return <Provider store={store}>{/* ... */}</Provider>;
}

在终端中运行 npx expo start，按 shift + m 打开 dev tools 列表，然后选择 Tinybase 插件。这将打开插件的 Web 界面，显示你 store 的内容及其被修改的情况。