Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 43 additions & 3 deletions website/src/5.x/docs/features/devtools.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,47 @@
# React Native Devtools

:::warning title="Notice:"
The documentation for Re.Pack 5 is currently under development and some of the pages aren't ready yet.
React Native Devtools are currently recommended way of debugging your React Native application. Re.Pack comes with built-in support for React Native Devtools.

## Features

All the features of React Native Devtools are available in Re.Pack:

- [Console](https://reactnative.dev/docs/react-native-devtools#console)
- [Source & breakpoints](https://reactnative.dev/docs/react-native-devtools#sources--breakpoints)
- [Memory](https://reactnative.dev/docs/react-native-devtools#memory)
- [Built-in support for React DevTools](https://reactnative.dev/docs/react-native-devtools#react-devtools-features)

## Usage

To start debugging your application, you can either:

- Press `j` in the terminal where Re.Pack dev server is running (remember to have at least one device connected)

- Open the Developer Menu by:

- iOS Simulator: `Cmd (⌘) + D`

- Android Emulator: `Cmd (⌘) + M`

Then select "Open DevTools".

![React Native Devtools](/img/devtools.png)

## Usage with Module Federation

When using [Module Federation](./module-federation.md), each remote will appear as a separate entry in the Sources panel. This makes it easier to debug federated modules by allowing you to:

- View and debug the source code of each remote independently
- Set breakpoints in federated modules

For example, if you have a host application with two remotes named "shop" and "checkout" each one will appear as a separate entry in the Sources panel.

![React Native Devtools with Module Federation](/img/devtools-mf.png)

This separation helps maintain clear boundaries between different parts of your federated application during debugging sessions.

:::tip

To learn more about React Native Devtools, check out the [official documentation](https://reactnative.dev/docs/react-native-devtools).

Please use [latest stable version of Re.Pack 4.x documentation](https://re-pack.dev/docs/getting-started) for now.
:::
Binary file added website/src/public/img/devtools-mf.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/src/public/img/devtools.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.