Unable to connect with remote debugger

Last updated 5 months ago

If you try to debug React Native application you might come across an error "Unable to connect with remote debugger".

Below will be described an error happening due to inaccessibility of http://10.0.2.2:8081/debugger-ui address. Probably there might be other reasons causing the same error.

How to fix an error

Start off an application and enter into development settings

Then go to "Debug server host & port for device" and type out IP address and port as shown on screenshot

After reloading application and enabling remote debugging you should see this tab which means you can successfully debug application

Detailed description of internals behind error

From Android emulator networking page

Each instance of the emulator runs behind a virtual router/firewall service that isolates it from your development machine network interfaces and settings and from the internet. An emulated device can't see your development machine or other emulator instances on the network. Instead, it sees only that it is connected through Ethernet to a router/firewall.The virtual router for each instance manages the 10.0.2/24 network address space — all addresses managed by the router are in the form of 10.0.2.xx, where xx is a number. Addresses within this space are pre-allocated by the emulator/router as follows:

Network Address

Description

10.0.2.1

Router/gateway address

10.0.2.2

Special alias to your host loopback interface (i.e., 127.0.0.1 on your development machine)

10.0.2.3

First DNS server

10.0.2.4 / 10.0.2.5 / 10.0.2.6

Optional second, third and fourth DNS server (if any)

10.0.2.15

The emulated device network/ethernet interface

127.0.0.1

The emulated device loopback interface

So Android emulator gets default 10.0.2.15 IP address in its internal network, whilst seeing host (development) machine with 10.0.2.2 IP address. But it's internal emulator network and addresses 10.0.0.0–10.255.255.255 are considered reserved addresses for private network and can't be accessed by your host machine.

That is the reason Chrome can't reach out 10.0.2.2 address and shows "This site can't be reached", which in turn trigger error "Unable to connect with remote debugger".

Steps to reproduce error

Below are the steps the generally might reproduce this error

The steps which might lead to this error are the following:

  1. Start off an application

  2. Enable remote debugging

  3. After some time get error shown up

Start off application

Enable remote debugging

After that the green header "Connecting to remote debugger" will show up

And at the same time browser /debugger-ui tab will be tried to be unsuccessfully opened

After some period of time "Connecting to remote debugger" will be changed to red error screen