React Native DevTools tab

The tab reads the same stores as the panel on the device, so a filter, a sort, a setting or a rule changed here is changed there too, and the other way round. Setting it up is on React Native DevTools.

The bar

A tab with a dotted pattern across its top is one of this package's own. The order you drag them into lasts until the app reloads.

Network

Toolbar

Filter bar

More filters

A field that cannot be read turns red and filters nothing.

Settings

Overview

Each request is a bar across time, green while it waits for the first byte and blue while the body comes in. Drag across it to keep only the requests that started in that window, drag a handle to move one edge, and double-click to let go. The window is the same one the device's overview picks.

The table

Click Status, Size or Time to sort by it, and again to flip the direction. Drag the line between two headers to resize a column. A failed request is drawn in red. Hovering a cell shows both of its lines, whatever the row size.

Under the table, the status line counts the requests, what was transferred and when the last one finished. While a filter is on, each figure reads shown / all.

Click a row to open it in the request pane. Right-click a row for its menu.

Request pane

It opens beside the table, and the table narrows to its Name column. Drag the line between them to change the split. ✕ closes it.

The ⋮ at the end of the tab bar opens the request's menu.

The request menu

Right-click on a row, or ⋮ in the request pane.

A copy shows Copied, or why it could not copy, at the foot of the tab.

Override editor

Opens in the request pane, with ✕ to go back to the request.

It starts from the rule the URL already has, or from what the server really answered. Save applies it to every request to that exact URL, Remove drops it, Cancel goes back. While a rule is on the request is not sent at all, so the endpoint does not have to exist.

Sandbox

Opens in the request pane, with ✕ to go back to the request. The request is on the left and its response on the right; in a narrow pane they stack.

A table always ends with a blank row that becomes the next one as you type. A row's checkbox leaves it out of the request without deleting it.

Send sends the request from the device, through the app's own fetch. The response then shows:

The sent request is also a row in the log, on both surfaces.

Console

Toolbar

Filter bar

Rows

Each row has its level's glyph, one cell per argument, then where it was logged as file:line, its source, a ×count when it repeated, the time and a copy button. An object or array is a tree, folded to start with. A command you ran is a row too: click it to put it back in the prompt.

A crash is a card with its name, message, kind, Previous launch when it was read back at launch, its breadcrumb count and the time. Open report switches to Crashes with that report open.

Prompt

The > field at the foot runs what you type in the app when you press Enter or ▶. Suggestions for the name you are typing sit above it; click one to use it. ✕ clears the field. The draft is the same one the device's prompt holds. It is there when console.repl is on.

Performance

Toolbar

Statistics

While nothing has been recorded and recording is off, the resources are replaced by what the tab collects and a Start recording button. Startup stays, since it is read at launch.

Lists

Long tasks and interactions are coloured by how long they took, as on the device.

Storage

Toolbar

Add key, Sync, Discard and Import are there only when the store was registered with a way to write. When some changes could not be written, the toolbar says how many, and their rows are marked.

Filter bar

The table

Click Key, Type or Size to sort, and again to flip the direction. Drag the line between two headers to resize a column. Right-click a row for Copy key, Copy value, Copy as JSON and, for JSON, Copy value (formatted).

Double-click a value to edit it in place. Enter keeps the edit as a pending change, Escape drops it. A value with line breaks opens the Edit tab instead. The last row is empty: type a key, pick its type, give it a value and press Add or Enter to add it as a pending key. A pending key's × removes it.

Under the table, the status line counts the keys, their total size, and names the largest.

Key pane

Click a key to open it beside the table. ✕ closes it, and ⋮ has the copy items, plus Delete key for a store that can delete. Delete asks first, inside the pane.

Value and Raw have a search box of their own that marks the matches.

Add and import

Add key takes a name, a type the store can hold, and a value, then writes it when you press Add key.

Import takes a snapshot pasted into its field, the same file Export writes. Before anything is written it counts what would be new, overwritten, already the same, and skipped. Write applies it, and carries the count of keys it will write.

Crashes

Toolbar

There is no record button: crashes are always kept.

Filter bar

Rows

Each report shows its name over its message, its kind, Previous launch when it was read back at launch, its breadcrumb count and the time. A dot marks one not yet read. Click it to open the report; that marks it read on both sides.

Report pane

It opens beside the list. Drag the line between them to change the split. ✕ closes it. The report's title sits at the top with a copy button.

The stack is symbolicated through the dev server when the report opens.

The report menu

⋮ at the end of the pane's tab bar.

Debug

Blocking the JS thread freezes this panel as well, since the app's JavaScript draws it. The main thread needs a development build; without one its buttons are off.