Docs/changelogs expo devtools 3.1.0

content/docs/expo-devtools/changelog.mdx

@@ -7,6 +7,31 @@ description: Every published release of @axonpack/expo-devtools, newest first.
 
 Every published release, newest first. The current version is **3.0.0**.
 
+## 3.1.0
+
+<ReleaseMeta pending bump="minor" />
+
+### Minor changes
+
+- **An Axonpack tab in React Native DevTools**, beside Console and Sources, from the one line in `metro.config.js` you already had
+- **Nothing to set up on the device**: installing the package registers the tab, behind `__DEV__`
+- **Chrome's Network panel on the desktop**: the same requests, sockets, filters and settings as the app's Network tab, in a sortable, resizable table
+- **Request details**: headers, payload, preview, response, events, timing, cookies and initiator, with a hex dump for a binary body
+- **Overrides and blocking**: answer a request with your own status and body, or block its URL, from the request's menu
+- **A sandbox on the desktop**: edit any captured request, send it from the device and read the response side by side
+- **Code for any request**: cURL, HTTPie, fetch, axios, Node.js, Python, Swift, Kotlin and Go
+- **Copy and save to your computer**: copies land on the computer's clipboard, and a response body downloads as a file
+- **Network conditions from the desktop**: throttling, custom speeds and the user agent
+- **The app's theme in the tab**, with a theme picker, and a Reload chip that reloads the app
+- **Open DevTools from the app**: a debug build served by Metro shows a strip in the panel that opens React Native DevTools on the Axonpack tab
+- **Fetch/XHR** now keeps every request sent through `fetch` or `XMLHttpRequest`, whatever came back
+- Removed the `/axonpack-panel` route from the Metro wrap and `PANEL_ROUTE` from its exports. The page behind it was a mock-up and was never in the published files.
+
+### Patch changes
+
+- Updated dependencies [99f49a5]
+- @axonpack/react-native-devtools-tab@0.1.1
+
 ## 3.0.0
 
 <ReleaseMeta date="14 September 2026" bump="major" npm="https://www.npmjs.com/package/@axonpack/expo-devtools/v/3.0.0" />

content/docs/expo-devtools/compatibility.mdx

@@ -14,6 +14,11 @@ description: The versions this is built against, what it requires you to have in
 That row is what the package is **built and tested against** — the versions in its own dev
 dependencies and in the example app that exercises every tab.
 
+The [React Native DevTools tab](/docs/expo-devtools/react-native-devtools) comes from
+`@axonpack/react-native-devtools-tab`, which this package depends on. It needs React 19.2 or later,
+and a React Native with React Native DevTools, the debugger `j` opens. It is built and tested against
+the same row.
+
 <Callout type="info" title="Nothing here pins you to one SDK">
   Every Expo package this needs is a peer dependency, so each resolves to the version your own SDK
   ships. The row above is what the package is built and tested against, not a range it refuses to run

content/docs/expo-devtools/example-app.mdx

@@ -32,6 +32,9 @@ bun run ios     # or: bun run android (full native build)
 
 ## A worked configuration
 
+`example/metro.config.js` already has the `withDevtools` line, so pressing `j` in Metro opens React
+Native DevTools with the [Axonpack tab](/docs/expo-devtools/react-native-devtools) in it.
+
 `example/devtools.ts` doubles as a worked configuration: a dark default theme, a custom `midnight` one,
 a `console.context` you can reach from the prompt, and all four storage adapters registered against
 real AsyncStorage, MMKV, SecureStore and an in-memory `Map`.

content/docs/expo-devtools/index.mdx

@@ -22,6 +22,9 @@ npx expo install @axonpack/expo-devtools react-native-safe-area-context react-na
 | **[Crashes](/docs/expo-devtools/crash-reporting)** | JS errors, unhandled rejections, render errors and native exceptions, as readable reports |
 | **[Debug](/docs/expo-devtools/debug)**             | Tools that block or crash a thread on purpose                                             |
 
+The Network tab is also on your computer, in [React Native
+DevTools](/docs/expo-devtools/react-native-devtools), from one line in `metro.config.js`.
+
 Two more guides cover things that are not tabs: [themes](/docs/expo-devtools/themes), and
 [capturing inside an in-app browser](/docs/expo-devtools/in-app-browsers).
 

content/docs/expo-devtools/meta.json

@@ -18,6 +18,7 @@
     "debug",
     "themes",
     "in-app-browsers",
+    "react-native-devtools",
     "---Shipping---",
     "production",
     "example-app",

content/docs/expo-devtools/network.mdx

@@ -141,7 +141,7 @@ dependency.
 
 ## Limits
 
-- The list holds the **200** most recent requests; older ones fall off the end. Request and response
+- The list holds the **1,000** most recent requests; older ones fall off the end. Request and response
   bodies are kept in full, never truncated.
 - The phase breakdown is measured by the native networking stack, so it needs a development build,
   and it only covers traffic that went through a stack this package hooks. Everything else keeps the

content/docs/expo-devtools/production.mdx

@@ -45,6 +45,16 @@ unreachable with the devtools off.
   not gated on `__DEV__`, so a build with `enabled: true` gets a prompt that runs whatever is typed
   into it. Set `console: { repl: false }` for any build where that is not what you want.
 
+## The Metro line
+
+`withDevtools` in `metro.config.js` costs a release build nothing. All it adds to the config is
+dev-server middleware, which nothing but a dev server reads, so the bundle is the same with it as
+without. The tab itself registers only when `__DEV__` is true, so a release bundle carries none of it.
+
+Metro reads the config when it builds for release too, so keep `@axonpack/expo-devtools` in
+`dependencies`, not `devDependencies`, if your release install skips dev dependencies. A `__DEV__`
+check cannot guard the line: `metro.config.js` runs in Node, where `__DEV__` does not exist.
+
 ## Next step
 
 <Cards>

content/docs/expo-devtools/quick-start.mdx

@@ -75,6 +75,21 @@ tabs are already recording. The Storage tab is empty until you tell it which sto
 [Storage](/docs/expo-devtools/storage). The panel reopens on whichever tab you last had open, for as long as
 the app is running.
 
+## 3. Optional: the Network tab on your computer
+
+For the same Network tab in React Native DevTools too, add one line to `metro.config.js` and restart
+Metro:
+
+```js title="metro.config.js"
+const { getDefaultConfig } = require('expo/metro-config');
+const { withDevtools } = require('@axonpack/expo-devtools/metro');
+
+module.exports = withDevtools(getDefaultConfig(__dirname));
+```
+
+Press `j` in Metro and the **Axonpack** tab is beside Console and Sources. [React Native
+DevTools](/docs/expo-devtools/react-native-devtools) has the rest.
+
 ## Things that trip people up
 
 - **Mount the provider exactly once.** The root is the place, because one mount there covers every

content/docs/expo-devtools/react-native-devtools.mdx

@@ -0,0 +1,92 @@
+---
+title: React Native DevTools
+description: The Network tab on your computer, in its own Axonpack tab beside Console and Sources.
+---
+
+The package puts an **Axonpack** tab in React Native DevTools, the debugger that opens when you press
+`j` in Metro. It shows the same Network log as the panel on the device, laid out like Chrome's
+Network panel, and it reads the app's own stores: a request made on the phone is a row on the
+desktop the moment it starts, and a filter set on one side is set on the other.
+
+## Set it up
+
+One line in `metro.config.js`:
+
+```js
+const { getDefaultConfig } = require('expo/metro-config');
+const { withDevtools } = require('@axonpack/expo-devtools/metro');
+
+module.exports = withDevtools(getDefaultConfig(__dirname));
+```
+
+Restart Metro after changing it; a reload of the app is not enough, because Metro reads its config
+once when it starts. Nothing is set up on the device: the tab registers itself in a debug build,
+behind `__DEV__`, and a release build carries none of it.
+
+## Open it
+
+- Press `j` in the terminal running Metro, or pick **Open DevTools** in the app's dev menu.
+- Or open the panel on the device. In a debug build whose bundle came from Metro, a strip under the
+  panel's header says **Metro server detected**, and its **Open DevTools** button opens React
+  Native DevTools on the Axonpack tab.
+
+The tab takes a second to appear after DevTools opens: it is added once DevTools has connected to
+the app and asked which tabs it has.
+
+## Network
+
+Everything the device's Network tab has:
+
+- The request table, with sortable, resizable columns, grouping by client and big or dense rows.
+- The filter bar: search with regex, match case and whole word, invert, the request types, and
+  More filters for methods, sources, status, size and duration.
+- The overview strip across the top of the log. Drag across it to keep only the requests that started
+  in that window.
+- The request pane: Headers, Payload, Preview, Response, EventStream, Timing, Cookies and
+  Initiator, and Messages for a socket. A binary response shows a hex dump.
+- The row menu, on a right-click or the ⋮ in the request pane: the copy items, **Save response
+  body**, **Block this URL**, **Override response…** and **Try in sandbox**.
+- Throttling in the toolbar, and custom speeds, the user agent and stacked header values under the
+  gear.
+
+
+## The sandbox
+
+**Try in sandbox** opens a captured request in the request pane, laid out like a web API client: the
+method and URL across the top, the request and its response side by side.
+
+- **Authentication**, **Network Conditions**, **Cookies**, **Headers**, **Query Parameters** and
+  **Body** are sections of their own. A bearer token or API key is hidden until you show it.
+- **Send** sends the request from the device, through the app's own `fetch`, so it goes out with the
+  device's network, cookies and conditions, and shows up as a row in the log as well.
+- The response shows its time, size and status, then its cookies, the headers that were sent and
+  the ones that came back, and the body as a JSON tree or as raw text.
+- **Code Snippet** writes the request as cURL, HTTPie, JavaScript fetch, axios, Node.js fetch, Python
+  requests, Swift URLSession, Kotlin OkHttp or Go net/http.
+
+## Copying and saving
+
+Copies land on **your computer's** clipboard, not the device's, and **Save response body**
+downloads the body as a file. Both are done by the browser DevTools runs in.
+
+## The bar
+
+- **Axonpack** and its mark, on the left. Hover the mark for what the tab is and links to the docs,
+  the changelog, the other libraries and GitHub.
+- The theme picker: the app's own themes, and a choice made here is the app's choice too.
+- **Reload** reloads the app, as `r` in Metro does.
+- The refresh icon draws the tab again without touching the app. It does not pick up code you have
+  saved since; use **Reload** for that.
+
+Every control is listed in the [DevTools tab reference](/docs/expo-devtools/reference/devtools-tab).
+
+## When the tab does not appear
+
+Restart Metro first: it reads `metro.config.js` only when it starts. If the tab is still missing, the
+DevTools console says why, and [Troubleshooting](/docs/react-native-devtools-tab/troubleshooting)
+lists each message and what to do about it.
+
+<Callout type="info" title="The log keeps the 1,000 most recent requests">
+  The same limit as on the device, and for the same reason: every body is kept whole. The desktop
+  table draws every row, which stays quick at that size.
+</Callout>