0
# Inspector Proxy
1
2
Core proxy functionality for managing inspector connections and HTTP/WebSocket servers. The InspectorProxy class handles device registration, HTTP endpoints for Chrome DevTools integration, and WebSocket communication management.
3
4
## Capabilities
5
6
### InspectorProxy Class
7
8
Main Inspector Proxy class that connects JavaScript VM inside Android/iOS apps and JS debugger.
9
10
```javascript { .api }
11
/**
12
* Main Inspector Proxy class that manages device connections and debugger sessions
13
* @param projectRoot - Root of the project used for relative to absolute source path conversion
14
*/
15
class InspectorProxy {
16
constructor(projectRoot: string);
17
18
/**
19
* Process HTTP request sent to server
20
* Handles /json, /json/list, and /json/version endpoints
21
* @param request - Incoming HTTP request
22
* @param response - HTTP response object
23
* @param next - Next middleware function
24
*/
25
processRequest(
26
request: IncomingMessage,
27
response: ServerResponse,
28
next: (?Error) => mixed
29
): void;
30
31
/**
32
* Adds websocket listeners to the provided HTTP/HTTPS server
33
* @param serverOrBaseUrl - HTTP/HTTPS server instance or base URL string
34
* @returns Object mapping WebSocket paths to WebSocket.Server instances
35
*/
36
createWebSocketListeners(
37
serverOrBaseUrl: HttpServer | HttpsServer | string
38
): { [path: string]: WS.Server };
39
}
40
```
41
42
**Usage Examples:**
43
44
```javascript
45
const { InspectorProxy } = require("metro-inspector-proxy");
46
const http = require("http");
47
const connect = require("connect");
48
49
// Create inspector proxy instance
50
const inspectorProxy = new InspectorProxy("/Users/dev/MyReactNativeApp");
51
52
// Set up HTTP middleware
53
const app = connect();
54
app.use(inspectorProxy.processRequest.bind(inspectorProxy));
55
56
// Create HTTP server
57
const httpServer = http.createServer(app);
58
httpServer.listen(8081, "127.0.0.1", () => {
59
console.log("Inspector proxy server running on port 8081");
60
61
// Set up WebSocket endpoints
62
const websocketEndpoints = inspectorProxy.createWebSocketListeners(httpServer);
63
64
// Handle WebSocket upgrades
65
httpServer.on("upgrade", (request, socket, head) => {
66
const { pathname } = require("url").parse(request.url);
67
if (pathname && websocketEndpoints[pathname]) {
68
websocketEndpoints[pathname].handleUpgrade(request, socket, head, (ws) => {
69
websocketEndpoints[pathname].emit("connection", ws, request);
70
});
71
} else {
72
socket.destroy();
73
}
74
});
75
});
76
```
77
78
### runInspectorProxy Function
79
80
Convenience function that runs new HTTP Server and attaches Inspector Proxy to it. This is the simplest way to start a complete inspector proxy server.
81
82
```javascript { .api }
83
/**
84
* Runs new HTTP Server and attaches Inspector Proxy to it
85
* @param port - Port number to listen on
86
* @param projectRoot - Root directory of the project
87
*/
88
function runInspectorProxy(port: number, projectRoot: string): void;
89
```
90
91
**Usage Examples:**
92
93
```javascript
94
const { runInspectorProxy } = require("metro-inspector-proxy");
95
96
// Start inspector proxy on port 8081 with project root
97
runInspectorProxy(8081, "/Users/dev/MyReactNativeApp");
98
99
// Server automatically handles:
100
// - HTTP endpoints: /json, /json/list, /json/version
101
// - WebSocket endpoints: /inspector/device, /inspector/debug
102
// - Device connection management
103
// - Debugger session management
104
```
105
106
## HTTP Endpoints
107
108
The InspectorProxy automatically handles these HTTP endpoints:
109
110
### GET /json and /json/list
111
112
Returns list of inspectable pages from all connected devices.
113
114
**Response Format:**
115
```javascript
116
[
117
{
118
"id": "device1-page1",
119
"description": "MyApp",
120
"title": "React Native",
121
"faviconUrl": "https://reactjs.org/favicon.ico",
122
"devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost:8081/inspector/debug?device=device1&page=page1",
123
"type": "node",
124
"webSocketDebuggerUrl": "ws://localhost:8081/inspector/debug?device=device1&page=page1",
125
"vm": "Hermes",
126
"deviceName": "iPhone Simulator"
127
}
128
]
129
```
130
131
### GET /json/version
132
133
Returns Chrome debugger protocol version information.
134
135
**Response Format:**
136
```javascript
137
{
138
"Browser": "Mobile JavaScript",
139
"Protocol-Version": "1.1"
140
}
141
```
142
143
## WebSocket Endpoints
144
145
The InspectorProxy creates two WebSocket endpoints:
146
147
### /inspector/device
148
149
WebSocket endpoint for React Native devices to connect to the proxy. Devices connect here and provide device information via query parameters.
150
151
**Query Parameters:**
152
- `device` - Device ID (optional, auto-generated if not provided)
153
- `name` - Device name (optional, defaults to "Unknown")
154
- `app` - App name (optional, defaults to "Unknown")
155
156
### /inspector/debug
157
158
WebSocket endpoint for debuggers (Chrome DevTools) to connect to specific device pages.
159
160
**Query Parameters:**
161
- `device` - Device ID (required)
162
- `page` - Page ID (required)
163
164
## Configuration
165
166
```javascript { .api }
167
// WebSocket endpoint paths
168
const WS_DEVICE_URL = "/inspector/device";
169
const WS_DEBUGGER_URL = "/inspector/debug";
170
171
// HTTP endpoint paths
172
const PAGES_LIST_JSON_URL = "/json";
173
const PAGES_LIST_JSON_URL_2 = "/json/list";
174
const PAGES_LIST_JSON_VERSION_URL = "/json/version";
175
176
// Configuration constants
177
const PAGES_POLLING_INTERVAL = 1000; // milliseconds - device page polling frequency
178
const INTERNAL_ERROR_CODE = 1011; // WebSocket error code for internal errors
179
180
// Additional constants
181
const REACT_NATIVE_RELOADABLE_PAGE_ID = "-1"; // Special page ID for reloadable React Native debugging
182
const EMULATOR_LOCALHOST_ADDRESSES = ["10.0.2.2", "10.0.3.2"]; // Android emulator addresses
183
const FILE_PREFIX = "file://"; // Prefix added to alphanumeric script IDs for Chrome DevTools compatibility
184
```