开发工具插件

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

开发工具插件可在本地开发环境中使用，帮助你调试应用。它们由你添加到项目中的少量代码组成，用于在应用和外部 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 发送和接收消息。确保向 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 窗口中打开。

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

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.

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

React 导航

🌐 React Navigation

受@react-navigation/devtools的启发，React Navigation 开发工具插件可以查看React Navigation的操作和状态历史。你还可以回到导航历史中的前一个节点，并向你的应用发送深层链接。由于 Expo Router 是基于 React Navigation 构建的，这个插件与Expo Router完全兼容。

🌐 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 插件。这将打开插件的网页界面，显示你在应用中导航时的导航历史。

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 Client 操作。

反应查询

🌐 React Query

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

🌐 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 插件。这将打开插件的网页界面，显示应用中使用的查询。

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。这将打开插件的网页界面，显示随着操作被派发时商店的操作和内容。

有关完整的安装和使用说明，包括如果你直接使用 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 插件。这将打开插件的网页界面，显示在修改过程中商店的内容。