Changelog

Every published release, newest first. The current version is 3.4.0.

3.4.0

• Redact WebSocket rows: network.redact now gets socket rows too, told apart by kind, to strip a token from the URL or drop the socket. NetworkEntry and WebSocketLogEntry are exported for typing it. Existing hooks start receiving socket rows. A hook that throws on one drops that socket, so check entry.kind before reading HTTP-only fields
• Empty breadcrumbs in DevTools: a crash with no breadcrumbs now says they are on by default and shows how to turn them off

3.3.0

Minor changes

• Navigation tab: every screen the app moved through, with when, from where, the params and how long it stayed on top

• Works with Expo Router and React Navigation: Expo Router is found on its own, and so is a React Navigation container the provider sits inside

• useDevtoolsNavigation(ref, name): hands over a container mounted inside the provider, under a name

• Navigator tree: every container drawn as one track, with a flow's own container under the screen that holds it

• Back from the panel: a Back button on the screen you are on

• Open a screen: pick a container, type a route with params from suggestions, or open a deep link

• Where a move came from: the line in your code that dispatched it, with the source around it

• Search, pause and clear the history, and filter it by container

• Copy the history as Markdown, or export it as JSON

• navigation.redact(move): strip tokens from params before a move is stored, or return null to drop it

• Route on crash reports: every report carries the screen it happened on, and screen changes join the breadcrumbs

• Console in DevTools: every log as the app writes it, with the app's levels, filters and search

• Run code from DevTools: the Console prompt runs in the app, with suggestions as you type

• Crashes in DevTools: every recorded crash with its stack, source, breadcrumbs and device details

• Crash reports on your computer: copy one as Markdown or JSON, or download it as a file

• Open a crash from a log: a crash in the Console panel opens its report in Crashes

• Storage in DevTools: every key in every registered store, with search, type filters, sorting and grouping

• Edit storage like a table: double-click a value, add keys in the empty row, and Sync writes them together

• Storage snapshots from the desktop: export the keys on screen, or import a snapshot into a store

• Performance in DevTools: frame rate, memory, startup, long tasks, interactions and user timing

• Debug in DevTools: block or crash the JS or the main thread from the desktop

• Counts on the tabs: errors on Console and unread reports on Crashes

• Settings shared with the app: filters and choices made in the app or in DevTools show on both

• network.redactHeaders: header names whose values are stored as [redacted], matched without regard to case. The panel, copy, export, the DevTools tab and crash breadcrumbs never hold the real value, and a request replayed from the panel sends the placeholder. Listing cookie also redacts a page's document.cookie. Empty by default

• network.redact(entry): strip tokens from URLs, query strings or bodies before a request is stored, or return null to drop it. A hook that throws drops the request

• 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

• Share on iOS: a menu's Share response body opens the share sheet and it stays open

• Try in sandbox from a request row: the row's menu opens the sandbox on that request

• Slimmer request rows, in both sizes

• Bottom sheets slide in once and stay put while you type, and can be dragged down to close

• The keyboard no longer covers a sheet's content: the sheet grows to make room

• Taller sheets use the panel's height when their content needs it

• Longer network history: the Network tab keeps the 1,000 most recent requests

• Updated dependencies [8bf976d]

• @axonpack/[email protected]

• Updated dependencies [99f49a5]

• @axonpack/[email protected]

3.0.0

• The whole list of what moved where is in Upgrading.

⚠️ Breaking Changes

• Setting the devtools up is now one provider around your app. createDevtoolsClient, init() and <DevtoolsOverlay /> are gone, and there is no client to create or pass anywhere:

  // before
  export const devtools = createDevtoolsClient({ defaultTheme: 'dark' });
  if (__DEV__) devtools.init();
  
  <>
    <YourApp />
    {__DEV__ && <DevtoolsOverlay />}
  </>;
  
  // after
  <DevtoolsProvider config={{ enabled: __DEV__, defaultTheme: 'dark' }}>
    <YourApp />
  </DevtoolsProvider>;

• enabled is back, and it is the only gate. With it off the provider patches nothing, records nothing and draws no button, so the mount can stay in a release build unguarded. It is read on the first render, so it cannot be changed later in the session.

• An in-app browser takes one hook. useDevtoolsWebView returns every prop the <WebView> needs, in place of the four client helpers:

  // before
  <WebView
    ref={devtools.getWebViewRef('checkout')}
    userAgent={devtools.getWebViewUserAgent()}
    injectedJavaScriptBeforeContentLoaded={devtools.getWebViewInjectedJavaScriptBeforeContentLoaded(
      'checkout'
    )}
    onShouldStartLoadWithRequest={devtools.shouldAllowWebViewRequest}
    onMessage={devtools.handleWebViewMessage}
  />;
  
  // after
  const devtoolsWebView = useDevtoolsWebView('checkout');
  <WebView {...devtoolsWebView} />;

• webviewSources is gone. A browser view's name is whatever you hand the hook, and it is only the label its rows carry. Drop the option; nothing needs declaring up front.

• mark, measure, clearMarks, clearMeasures, setCrashContext and the stores now come from the exported devtools object: import { devtools } from '@axonpack/expo-devtools'.

✨ Features

• Open the panel from your own code. useDevtoolsPanel() gives you show, hide, toggle, whether it is open, and whether the devtools are running at all.
• Hide the floating button. showFloatingButton={false} leaves the panel working and takes the button off your screens.
• Everything is patched before your first screen mounts, including whatever it requests as it appears.

2.5.4

• Badges, cards and progress tracks sit above the panel rather than looking punched into it, on Dracula, Monokai and One Dark
• A theme whose header is a different shade from its panel keeps readable tabs — the labels take their colour from the header now, worked out from it when your theme doesn't say
• A custom theme can set surface for anything raised inside a tab, and toolbarText / toolbarTextActive for the header's own labels

2.5.3

• The status bar follows the theme you picked — light icons on a dark theme, dark ones on a light theme, and your app's own back when the panel closes
• The strip above the toolbar is gone — the header now paints the area behind the status bar, in every theme
• A custom theme can declare its own statusBarStyle, or leave it out and have it read off the theme's colours
• <DevtoolsOverlay statusBar="app" /> leaves the status bar alone, for an app that manages it itself
• Tapping a WebSocket row opens it — the panel used to close itself as it appeared

2.5.2

• Your own crash reporter sees JavaScript errors again — Sentry, Crashlytics or anything else installed alongside now receives every error this catches, fatal ones included
• A fatal error ends the app, as it did before these tools were added, and is reported at the next launch
• React Native's red box is back for fatal errors in development
• Unhandled rejections show in the red box too, rather than only in the Console tab

2.5.1

• defaultTheme only accepts a theme you have — a built-in palette or one of your own from themes; anything else is a type error before the app runs
• Every option explains itself in your editor — hover any field of createDevtoolsClient for what it does and what it defaults to
• The same for what the tools hand back — crash records, request and console entries, storage adapters and performance samples all document their fields
• Custom theme colours are named on hover, so you can see what each one paints before you override it

2.5.0

• expo-clipboard is now a peer dependency, so it resolves to the version your own Expo SDK ships. As a direct dependency it was pinned to ~57.0.1, which tied this package to SDK 57 — that was the only thing that did
• Install it alongside the others: npx expo install @axonpack/expo-devtools react-native-safe-area-context react-native-webview expo-clipboard
• The package now ships its CHANGELOG.md, so you can read what changed without leaving node_modules

2.4.1

• Add a key to a store from the Storage tab — you pick the name, the type and the value, and a key that already exists is refused
• Import a snapshot back into a store: paste the file and see what it would add, overwrite, skip or leave alone before anything is written
• Exported snapshots carry a version, so the tab knows whether it can read one back
• Blacklist keys per store with a pattern or a function — a match is never listed, never read and never written
• Declare which types a store accepts, so the Add-key sheet only offers what that store can keep
• A store's fixed key list can now be a function, re-read on every refresh

2.4.0

• New Crashes tab: every crash the app has hit, with the unread count on the tab itself
• Crash report sheet opens the moment a crash is caught, with the message, stack, component stack, breadcrumbs, device details and the raw record
• Stack frames name your files — in development the stack is symbolicated against the dev server, so a frame reads CrashDemo.tsx:79:25 instead of index.bundle:104857:23, with the failing source line and a caret under the exact column — for a render error, both the throwing line and the element that rendered it — and library frames folded behind See N more frames
• Copy and share any report as Markdown or JSON, straight to the share sheet
• Crashes that end the app are saved to the device and reported the next time it opens
• Catches four kinds of crash: fatal and non-fatal JavaScript errors, unhandled promise rejections, React render errors, and uncaught native exceptions on iOS and Android
• Unhandled promise rejections are now caught in release builds, which React Native only reports during development
• New DevtoolsErrorBoundary shows a Try again screen where a render error used to leave a blank one, and records which component threw
• Keep crash reporting on in production with crash.enableWhileDevtoolsDisabled — it works whether or not you start the devtools, and the panel, the console prompt and request logging all stay off
• Only crashes that actually close the app are reported when the devtools are not started — JavaScript errors the app recovered from stay a development concern
• Turn off React Native's red box with crash.disableDefaultLogBox, so a JavaScript error is reported in one place
• The floating devtools button now hides itself unless the tools were started, so leaving it mounted in a release build shows nothing
• A plain crash notice outside development — what broke, when, and a Share report button — rather than the developer sheet with its tabs and stack traces
• Tap an error in the Console tab to read its full crash report without leaving the tab
• Breadcrumbs replay the console and network activity leading up to a crash
• redact rewrites or drops a report before it is stored, saved or handed to onCrash
• setCrashContext attaches your own details — user, screen, feature flags — to every report
• New Debug tab for the tools that break the app on purpose — blocking a thread, and crashing one
• The Limiter has moved off the Performance tab into Debug; every other Performance section reports something that happened, while this one causes it

2.3.0

• New Storage tab: every key in every store you register, with its value, type and byte size, plus the store's total size and largest key
• Register the stores you already use — asyncStorageAdapter, mmkvAdapter, secureStoreAdapter, or defineStorageAdapter for anything else — through createDevtoolsClient({ storage: { adapters } }). This package still depends on no storage library
• Search keys, values or both, with match case / whole word / regex, filter by value type, sort by key, size or type, and group by the auth:token / cache/user/1 prefixes your keys already use
• Inspect a value in the same expandable JSON tree the Network and Console tabs use, or read the raw characters exactly as stored
• Edit one value or delete one key, with a confirmation on delete. A value is written back through the type it was read as, so a number stays a number. There is no store-wide clear anywhere in the tab
• Honest about what a store can't do: SecureStore's keys can't be listed so you name them, reads stop at storage.maxKeys (1,000) and say how many they skipped, and binary values are shown but not editable
• Export the filtered keys of a store as JSON through the share sheet

2.2.0

• Search the Payload, Preview and Response tabs of a request, with every match highlighted in place — in the JSON tree, in syntax-coloured code, and in the raw body
• Searching a JSON tree opens the branches holding a match and collapses the rest, so a hit is never buried in a closed node
• Match case, whole word and regex switches on every search box, in the Network filter, the Console filter and the request detail panel
• Highlighted matches in the request list and in console output
• Filter requests by status — 2xx / 3xx / 4xx / 5xx / Failed / Pending, offering only the ones actually captured
• Invert now flips the whole Network filter rather than only the search text, and a new Clear resets every filter at once
• New matchHighlight palette token, set on all seven built-in themes, for the search highlight background
• Fixed the Preview tab rendering unsyntax-highlighted bodies in near-black, unreadable on every dark theme

2.1.1

📝 Documentation

• The README now gathers Network, Console and Performance under one Features section.
• Every Performance section has its own screenshot.
• The theme picker and a request's payload view are now pictured.
• The reference page now warns that starting the tools and mounting the panel are separate guards, and a release build needs both.

2.1.0

✨ Features

• The Performance tab is now split into sections you pick from the toolbar — Statistics, User timing, Interactions, Long tasks and Limiter — instead of everything sharing one long screen.
• Only the section you are looking at is drawn, so the tab is lighter on older phones and the graphs no longer redraw while you read a list.
• The Limiter, for freezing the app on purpose, is now one of those sections rather than a panel that opened over everything else.
• Every list tells you when recording is off, and offers to start it, instead of looking empty.
• Long tasks now lists the freezes worth acting on: anything over 150 milliseconds, rather than 50. You can still ask for the shorter ones.

📝 Documentation

• A new reference page explains every tab, section, button and field in the panel, alongside the full list of settings.
• Setting the tools up in an app that uses Expo Router is now written up, with where to start them and where to put the button.
• Three settings were documented under the wrong name or the wrong default. The page now matches what the code actually does.

2.0.0

Major changes

✨ Features

• Performance — a new tab showing what your app is doing to the device, with no desktop profiler and no cable.
• Watch the JavaScript memory climb while you use the app, on a live graph.
• See the frame rate, so you can tell a slow screen from a slow network.
• See how long your app took to start, broken into its stages.
• Long tasks — a list of every moment the app froze for long enough to notice, with when it happened and for how long.
• Interactions — taps that took too long to respond, with the time your own code was responsible for shown separately.
• The panel header now shows your app's own name and icon instead of the devtools' own, so it looks like part of your app.
• Any tab can start switched off, for when you only want one of them recording.

🐛 Bug Fixes

• Requests no longer raise an error and go missing from the log when the response comes back as a file, an image, or anything else that isn't plain text. In some apps this affected every request the app made.

⚠️ Breaking Changes

• The list of in-app browser views to capture is now given at the top level, as webviewSources, instead of inside network. It covers both the network and console tabs, so it no longer belongs to either one. Move it up a level:

  // before
  createDevtoolsClient({ network: { webviewSources: ['my-webview'] } });
  
  // after
  createDevtoolsClient({ webviewSources: ['my-webview'] });

  Left inside network it is silently ignored, and nothing from that browser view is captured.

• The enabled option is gone. Guard the .init() call instead — until it runs, nothing is recorded:

  if (__DEV__) devtools.init();

Minor changes

✨ Features

• The devtools panel now opens on whichever tab you had open last, instead of going back to Network every time.

Patch changes

🐛 Bug Fixes

• Requests no longer raise an error and go missing from the network log when their response comes back as a file, an image, or anything else that isn't plain text. In some apps this affected every request the app made.
• Those responses now show a short summary with their type and size, instead of appearing empty.
• A page open in an in-app browser is no longer disturbed when it loads that kind of response.

1.1.1

📝 Documentation

• The package page now shows what the tools actually look like, with screenshots of the request list, the console, and the expression prompt.
• Rewritten as a walkthrough of what you can do — find one request among hundreds, try a slow connection, resend a request with different details, read your logs and run an expression — rather than a list of settings.

1.1.0

Minor changes

✨ Features

• Console — a new tab in the devtools panel showing everything your app logs, without a desktop debugger attached.
• Warnings and errors are coloured and counted, so problems stand out while you scroll.
• Objects and arrays can be opened up and explored, instead of appearing as [object Object].
• Errors show their full stack when you tap them.
• The same message logged over and over collapses into one line with a count, so a chatty screen doesn't bury everything else.
• Run an expression — type JavaScript at the prompt and see the result straight away, with name suggestions as you type.
• Tap a command you ran earlier to load it back into the prompt and send it again.
• Anything logged inside an in-app browser page is captured too, labelled so you can tell it apart from your app's own output.
• Filter by level or by where a message came from, or search the text of every message.
• The list follows new output as it arrives, and holds still when you scroll back to read something, with a button to jump to the newest again.
• Copy any line with one tap.
• Nothing is captured until you turn devtools on, the same as the network inspector, and the expression prompt stays out of production builds unless you ask for it.

Patch changes

✨ Features

• Network throttling — try your app on a slow connection without leaving your desk. Pick Slow 3G, Fast 3G, Fast 4G or Offline, or set your own speed and delay.
• Throttling applies to your app's own requests and to requests made inside an in-app browser view.
• User agent — pretend to be an iPhone, an Android phone, a desktop browser or Googlebot, or type your own.
• Both settings take effect straight away, with no need to restart the app.
• Every captured request now shows the connection settings it actually ran under, so requests recorded before and after a change stay easy to tell apart.
• The sandbox has its own connection settings section, so you can slow a request down while trying it out.
• The devtools panel and its pop-up sheets now carry the axonpack logo.

🐛 Bug Fixes

• Requests an in-app browser page makes while it is still loading are now captured. Previously they were missed entirely.
• Requests still in flight now stand out as an amber "PENDING" instead of blending into the rest of the row.
• Request rows show a proper icon for each kind of response, instead of the words "HTTP", "CSS" and "JS".
• JSON responses now have their own orange marker.

⚠️ Breaking Changes

• If you capture requests from an in-app browser view, rename getWebViewInjectedScript to getWebViewInjectedJavaScriptBeforeContentLoaded and pass it to the injectedJavaScriptBeforeContentLoaded prop instead of injectedJavaScript. The new prop runs earlier, which is what lets requests made during page load be captured.

1.0.1

🐛 Bug Fixes

• Fixed links on the npm package page that pointed to the project's old GitHub location.

1.0.0

✨ Features

First release of @axonpack/expo-devtools — an on-device network inspector for React Native and Expo apps.

• A draggable button opens a full network inspector right inside your app, no desktop tool needed.
• Nothing is captured until you turn it on, so it's safe to leave in a production build.
• Requests made with fetch, XMLHttpRequest, and popular HTTP client libraries (like axios) are captured automatically.
• Requests made inside an in-app browser view can be captured too, once you opt a screen into it.
• Search and filter requests by method, type, or source, and reverse the sort order.
• A tap-to-filter activity graph shows your request traffic over time, with time labels.
• Tap any request to see its headers, a pretty-printed preview, the raw response, and timing details.
• Image, HTML, and SVG responses show up as an actual preview, not just raw text.
• Failed requests (4xx/5xx) are clearly marked in red so they stand out from successful ones.
• Copy any header value, the full request URL, or a ready-to-paste cURL command with one tap.
• A built-in sandbox lets you edit and resend any captured request — method, URL, headers, query params, or body — and see the response live.
• Export your current, filtered request log to share it with someone else.
• Request and response bodies are always shown in full, never cut off.