开发工具插件

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

SDK 50 及以上版本可用。

你的本地开发环境中提供了开发工具插件，可帮助你调试应用。它们由你添加到项目中的少量代码组成，这些代码支持应用和外部 Chrome 窗口之间的双向通信。此设置提供显示工具来检查应用、触发某些测试行为等。

¥Dev tools plugins are available in your local development environment to help you debug your app. They consist of a small amount of code you add to a project that enables two-way communication between the app and an external Chrome window. This setup provides display tools to inspect the app, trigger certain behaviors for testing, and more.

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

¥Dev tools plugins are similar to Flipper plugins that are available in Development builds and Expo Go, and do not require adding native modules or config plugins to your project.

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

¥Add a dev tools plugin to a project

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

¥To add a dev tool plugin to your app, install it as a package and add a small snippet to connect the code to your app. This code is invoked from the app's root component to establish a two-way communication between your app and the plugin. Then, the plugin can inspect aspects of your app for the entire time your app runs in development mode.

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

¥All Expo dev tools plugins and plugins created with our creation tool export a hook that you can use to connect the plugin to your app. The hook and any functions returned from it will no-op when the app is not running in development mode.

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

¥Some plugin hooks require parameters that relate to how the plugin inspects your app. For instance, a plugin for inspecting the React Navigation state might require a reference to the navigation root.

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

¥To start using the plugin, use the hook in your app's root component:

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

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

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

¥In some cases, you may need to interact with a plugin directly. All plugins communicate through exports from expo/devtools, and you can send and listen to messages through useDevToolsPluginClient. Be sure to pass the same plugin name to useDevToolsPluginClient as is used by the plugin's web user interface:

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 和 Development 版本的兼容性

¥Compatibility with Expo Go and Development builds

开发工具插件应该只包含 JavaScript 代码。它们通常与 Expo Go 和 开发构建 兼容，并且不需要创建新的开发版本来添加插件。如果插件检查的包的底层模块包含原生代码并且不是 Expo Go 的一部分，请创建一个新的开发版本以使用该包中的组件和插件。

¥Dev tools plugins should only include JavaScript code. They are generally compatible with Expo Go and Development builds and should not require creating a new development build to add the plugin. If a package's underlying module that the plugin inspects includes native code and is not part of Expo Go, create a new development build to use both the component and the plugin from that package.

例如，检查 React Native Firebase 的开发工具插件将无法与 Expo Go 一起使用。React Native Firebase 包含不属于 Expo Go 的原生代码。要使用开发工具插件和 React Native Firebase，请创建开发版本。

¥For example, a dev tools plugin that inspects React Native Firebase will not work with Expo Go. React Native Firebase includes native code that is not part of Expo Go. To use the dev tools plugin and React Native Firebase, create a development build.

使用开发工具插件

¥Using a dev tools plugin

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

¥After installing the dev tools plugin and adding the connecting required code to your project, you can start the dev server up with npx expo start. Then press shift + m to open the list of available dev tools plugins. Select the plugin you want to use, and it will open in a new Chrome window.

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

¥When starting the dev server with the Expo CLI, there is an option to press ? to show all commands. This shows additional commands, including the shortcut to open more tools. Dev tools plugins can also be selected in this menu.

Expo 开发工具插件

¥Expo dev tools plugins

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

¥Expo provides some dev tools plugins for common debugging tasks. Follow the instructions below to start using them in your app.

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

¥Note: Each of the following dev tools plugin hooks will only enable the plugin in development mode. It doesn't affect your production bundle.

React 导航

¥React Navigation

受 @react-navigation/devtools 的启发，React Navigation 开发工具插件允许查看 React 导航 操作和状态的历史记录。你还可以倒回到导航历史记录中的先前点，并将深层链接发送到你的应用。由于 Expo Router 是基于 React Navigation 构建的，因此该插件与 Expo 路由 完全兼容。

¥Inspired by @react-navigation/devtools, the React Navigation dev tools plugin allows seeing the history of React Navigation actions and state. You can also rewind to previous points in your navigation history and send deep links to your app. Since Expo Router is built upon React Navigation, this plugin is fully compatible with Expo Router.

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

¥To use the plugin, start by installing the package:

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

¥Pass the navigation root to the plugin in your app's entry point:

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 插件。这将打开插件的网络界面，在你浏览应用时显示你的导航历史记录。

¥In the terminal, run npx expo start, press shift + m to open the list of dev tools, and then select the React Navigation plugin. This will open the plugin's web interface, showing your navigation history as you navigate through your app.

Apollo 客户端

¥Apollo Client

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

¥Inspired by react-native-apollo-devtools, the Apollo Client dev tools plugin allows inspecting cache, query, and mutation for the Apollo Client.

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

¥To use the plugin, start by installing the package:

然后将你的客户端实例传递给应用根组件中的插件或将应用的其余部分封装在 ApolloProvider 中的位置：

¥Then pass your client instance to the plugin in your app's root component or where you wrap the rest of your app in the 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 客户端操作时的查询历史记录、缓存和突变。

¥In the terminal, run npx expo start, press shift + m to open the list of dev tools, and then select the Apollo Client plugin. This will open the plugin's web interface, showing your query history, cache, and mutations as your app performs Apollo Client operations.

反应查询

¥React Query

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

¥Inspired by react-query-native-devtools, the React Query dev tools plugin lets you explore data and queries, cache status, and refetch and remove queries from the cache from TanStack Query.

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

¥To use the plugin, start by installing the package:

然后将你的客户端实例传递给应用根组件中的插件或将应用的其余部分封装在 QueryClientProvider 中的位置：

¥Then pass your client instance to the plugin in your app's root component or where you wrap the rest of your app in the 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 界面，显示应用中使用的查询。

¥In the terminal, run npx expo start, press shift + m to open the list of dev tools, and then select the React Query plugin. This will open the plugin's web interface, displaying queries as they are used in your app.

Redux

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

¥The redux-devtools-expo-dev-plugin is based on the Redux DevTools (from the Chrome extension). It provides a live list of actions and how they affect the state, and the ability to rewind, replay, and dispatch actions from the DevTools.

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

¥To use the plugin, start by installing the package:

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

¥If you're using @reduxjs/toolkit, modify the configureStore call to disable the built-in dev tools by passing in devTools: false. Then, add in the Expo DevTools plugin enhancer by concatenating the devToolsEnhancer(). The configureStore call is going to look like the following:

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 界面，在分派操作时显示商店的操作和内容。

¥In the terminal, run npx expo start, press shift + m to open the list of dev tools, and then select redux-devtools-expo-dev-plugin. This will open the plugin's web interface, displaying the actions and contents of your store as actions are dispatched.

有关完整的安装和使用说明，包括如果你直接使用 redux 而不是 @reduxjs/toolkit、设置持久性以使用户在重新加载之间保持登录状态。

¥For complete installation and usage instructions, including if you're using redux directly rather than @reduxjs/toolkit, see the project's README.

TinyBase

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

¥The TinyBase dev tools plugin connects the TinyBase Store Inspector to your app, allowing you to view and update the contents of your app's store.

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

¥To use the plugin, start by installing the package:

然后将你的客户端实例传递给应用根组件中的插件或使用商店的 Provider 封装应用其余部分的位置：

¥Then pass your client instance to the plugin in your app's root component or where you wrap the rest of your app with the store's 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 插件。这将打开插件的网络界面，显示修改后的商店内容。

¥In the terminal, run npx expo start, press shift + m to open the list of dev tools, and then select the Tinybase plugin. This will open the plugin's web interface, displaying the contents of your store as it is modified.