开发工具插件

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

开发工具插件在您的本地开发环境中可用，以帮助您调试应用程序。它们由一小部分代码组成，您将其添加到项目中，从而使应用程序与外部 Chrome 窗口之间能够双向通信。这种设置提供了显示工具，以检查应用程序，触发某些行为进行测试等。

开发工具插件类似于在开发构建和 Expo Go 中可用的 Flipper 插件，不需要将本机模块或配置插件添加到您的项目中。

将开发工具插件添加到项目

要将开发工具插件添加到应用程序中，将其作为包安装，然后添加一个小代码片段来连接代码与您的应用程序。该代码从应用程序的根组件调用，以在您的应用程序和插件之间建立双向通信。然后，插件可以在您的应用程序以开发模式运行的整个时间内检查应用程序的各个方面。

所有 Expo 开发工具插件 和使用 我们的创建工具 创建的插件都导出一个钩子，您可以使用它将插件连接到您的应用程序。钩子和从中返回的任何函数在应用程序未在开发模式下运行时将无操作。

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

要开始使用插件，请在应用程序的根组件中使用该钩子：

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

export default App() {
  useMyDevToolsPlugin();
  return (/* rest of your app */)
}

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

import { useDevToolsPluginClient } from 'expo/devtools';

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

  return (/* rest of your app */)
}

与 Expo Go 和开发构建的兼容性

开发工具插件应仅包含 JavaScript 代码。它们通常与 Expo Go 和 开发构建 兼容，并且不应需要创建新的开发构建来添加插件。如果一个包的底层模块包含本机代码且不属于 Expo Go，则创建一个新的开发构建以使用该组件和来自该包的插件。

例如，检查 React Native Firebase 的开发工具插件将不适用于 Expo Go。React Native Firebase 包含不是 Expo Go 一部分的本机代码。要使用开发工具插件和 React Native Firebase，请创建一个开发构建。

使用开发工具插件

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

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

Expo 开发工具插件

Expo 提供一些开发工具插件用于常见的调试任务。按照以下说明在您的应用程序中开始使用它们。

注意：以下每个开发工具插件钩子仅在开发模式下启用插件。它不会影响您的生产包。

React Navigation

受到 @react-navigation/devtools 启发，React Navigation 开发工具插件允许查看 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 打开开发工具列表，然后选择 React Navigation 插件。这将打开插件的 Web 界面，显示您在应用程序中导航时的导航历史。

Apollo Client

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

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

然后在应用程序的根组件中或在用 ApolloProvider 包装其余应用程序的地方将您的客户端实例传递给插件：

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 打开开发工具列表，然后选择 Apollo Client 插件。这将打开插件的 Web 界面，显示在您的应用程序执行 Apollo Client 操作时的查询历史、缓存和变更。

React Query

受到 react-query-native-devtools 启发，React Query 开发工具插件允许您浏览数据和查询、缓存状态，以及从 TanStack Query 中重新获取和移除缓存中的查询。

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

然后在应用程序的根组件中或在用 QueryClientProvider 包装其余应用程序的地方将您的客户端实例传递给插件：

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 打开开发工具列表，然后选择 React Query 插件。这将打开插件的 Web 界面，显示在您的应用程序中使用查询时的查询。

Redux

redux-devtools-expo-dev-plugin 基于 Redux DevTools（来自 Chrome 扩展）。它提供了一个活动的动作列表，以及它们如何影响状态，以及从 DevTools 回滚、重放和调度动作的能力。

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

如果您使用的是 @reduxjs/toolkit，请修改 configureStore 调用，通过传递 devTools: false 来禁用内置的开发工具。然后，通过连接 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 打开开发工具列表，然后选择 redux-devtools-expo-dev-plugin。这将打开插件的 Web 界面，显示当动作被调度时您的动作和商店内容。

有关完整的安装和使用说明，包括如果您直接使用 redux 而不是 @reduxjs/toolkit，请查看项目的 README。

TinyBase

TinyBase 开发工具插件将 TinyBase Store Inspector 连接到您的应用程序，允许您查看和更新应用程序商店的内容。

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

然后在应用程序的根组件中或在用商店的 Provider 包装其余应用程序的地方将您的客户端实例传递给插件：

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 打开开发工具列表，然后选择 Tinybase 插件。这将打开插件的 Web 界面，显示在修改商店内容时的商店内容。