wrangler 3.18.0 → 3.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "wrangler",
3
- "version": "3.18.0",
3
+ "version": "3.20.0",
4
4
  "description": "Command-line interface for all things Cloudflare Workers",
5
5
  "keywords": [
6
6
  "wrangler",
@@ -96,15 +96,18 @@
96
96
  "source-map": "0.6.1",
97
97
  "source-map-support": "0.5.21",
98
98
  "xxhash-wasm": "^1.0.1",
99
- "miniflare": "3.20231030.2"
99
+ "miniflare": "3.20231030.4"
100
100
  },
101
101
  "devDependencies": {
102
+ "@cloudflare/ai": "^1.0.35",
102
103
  "@cloudflare/eslint-config-worker": "*",
103
104
  "@cloudflare/types": "^6.18.4",
104
- "https-proxy-agent": "7.0.2",
105
105
  "@cloudflare/workers-types": "^4.20230914.0",
106
106
  "@iarna/toml": "^3.0.0",
107
107
  "@microsoft/api-extractor": "^7.28.3",
108
+ "@sentry/node": "^7.86.0",
109
+ "@sentry/types": "^7.86.0",
110
+ "@sentry/utils": "^7.86.0",
108
111
  "@types/body-parser": "^1.19.2",
109
112
  "@types/busboy": "^1.5.0",
110
113
  "@types/command-exists": "^1.2.0",
@@ -142,6 +145,7 @@
142
145
  "get-port": "^6.1.2",
143
146
  "glob-to-regexp": "0.4.1",
144
147
  "http-terminator": "^3.2.0",
148
+ "https-proxy-agent": "7.0.2",
145
149
  "ignore": "^5.2.0",
146
150
  "ink": "^3.2.0",
147
151
  "ink-select-input": "^4.2.1",
@@ -181,7 +185,7 @@
181
185
  "yargs": "^17.7.2",
182
186
  "yoga-layout": "file:../../vendor/yoga-layout-2.0.0-beta.1.tgz",
183
187
  "@cloudflare/cli": "1.0.0",
184
- "@cloudflare/pages-shared": "^0.11.2",
188
+ "@cloudflare/pages-shared": "^0.11.4",
185
189
  "@cloudflare/workers-tsconfig": "0.0.0"
186
190
  },
187
191
  "optionalDependencies": {
@@ -204,7 +208,7 @@
204
208
  "test:ci": "pnpm run test --coverage",
205
209
  "test:debug": "pnpm run test --silent=false --verbose=true",
206
210
  "test:e2e": "vitest --test-timeout 240000 --single-thread --dir ./e2e --retry 2 run",
207
- "test:watch": "pnpm run test --runInBand --testTimeout=50000 --watch",
211
+ "test:watch": "pnpm run test --testTimeout=50000 --watch",
208
212
  "type:tests": "tsc -p ./src/__tests__/tsconfig.json && tsc -p ./e2e/tsconfig.json"
209
213
  }
210
214
  }
@@ -0,0 +1,652 @@
1
+ import assert from "node:assert";
2
+ import {
3
+ DevToolsCommandRequest,
4
+ DevToolsCommandRequests,
5
+ DevToolsCommandResponses,
6
+ DevToolsEvent,
7
+ DevToolsEvents,
8
+ type InspectorProxyWorkerIncomingWebSocketMessage,
9
+ type InspectorProxyWorkerOutgoingRequestBody,
10
+ type InspectorProxyWorkerOutgoingWebsocketMessage,
11
+ type ProxyData,
12
+ serialiseError,
13
+ } from "../../src/api/startDevWorker/events";
14
+ import {
15
+ assertNever,
16
+ createDeferred,
17
+ DeferredPromise,
18
+ MaybePromise,
19
+ urlFromParts,
20
+ } from "../../src/api/startDevWorker/utils";
21
+
22
+ const ALLOWED_HOST_HOSTNAMES = ["127.0.0.1", "[::1]", "localhost"];
23
+ const ALLOWED_ORIGIN_HOSTNAMES = [
24
+ "devtools.devprod.cloudflare.dev",
25
+ "cloudflare-devtools.pages.dev",
26
+ /^[a-z0-9]+\.cloudflare-devtools\.pages\.dev$/,
27
+ "127.0.0.1",
28
+ "[::1]",
29
+ "localhost",
30
+ ];
31
+
32
+ interface Env {
33
+ PROXY_CONTROLLER: Fetcher;
34
+ PROXY_CONTROLLER_AUTH_SECRET: string;
35
+ WRANGLER_VERSION: string;
36
+ DURABLE_OBJECT: DurableObjectNamespace;
37
+ }
38
+
39
+ export default {
40
+ fetch(req, env) {
41
+ const singleton = env.DURABLE_OBJECT.idFromName("");
42
+ const inspectorProxy = env.DURABLE_OBJECT.get(singleton);
43
+
44
+ return inspectorProxy.fetch(req);
45
+ },
46
+ } as ExportedHandler<Env>;
47
+
48
+ function isDevToolsEvent<Method extends DevToolsEvents["method"]>(
49
+ event: unknown,
50
+ name: Method
51
+ ): event is DevToolsEvent<Method> {
52
+ return (
53
+ typeof event === "object" &&
54
+ event !== null &&
55
+ "method" in event &&
56
+ event.method === name
57
+ );
58
+ }
59
+
60
+ export class InspectorProxyWorker implements DurableObject {
61
+ constructor(_state: DurableObjectState, readonly env: Env) {}
62
+
63
+ websockets: {
64
+ proxyController?: WebSocket;
65
+ runtime?: WebSocket;
66
+ devtools?: WebSocket;
67
+
68
+ // Browser DevTools cannot read the filesystem,
69
+ // instead they fetch via `Network.loadNetworkResource` messages.
70
+ // IDE DevTools can read the filesystem and expect absolute paths.
71
+ devtoolsHasFileSystemAccess?: boolean;
72
+
73
+ // We want to be able to delay devtools connection response
74
+ // until we've connected to the runtime inspector server
75
+ // so this deferred holds a promise to websockets.runtime
76
+ runtimeDeferred: DeferredPromise<WebSocket>;
77
+ } = {
78
+ runtimeDeferred: createDeferred<WebSocket>(),
79
+ };
80
+ proxyData?: ProxyData;
81
+ runtimeMessageBuffer: (DevToolsCommandResponses | DevToolsEvents)[] = [];
82
+
83
+ async fetch(req: Request) {
84
+ if (
85
+ req.headers.get("Authorization") === this.env.PROXY_CONTROLLER_AUTH_SECRET
86
+ ) {
87
+ return this.handleProxyControllerRequest(req);
88
+ }
89
+
90
+ if (req.headers.get("Upgrade") === "websocket") {
91
+ return this.handleDevToolsWebSocketUpgradeRequest(req);
92
+ }
93
+
94
+ return this.handleDevToolsJsonRequest(req);
95
+ }
96
+
97
+ // ************************
98
+ // ** PROXY CONTROLLER **
99
+ // ************************
100
+
101
+ handleProxyControllerRequest(req: Request) {
102
+ assert(
103
+ req.headers.get("Upgrade") === "websocket",
104
+ "Expected proxy controller data request to be WebSocket upgrade"
105
+ );
106
+
107
+ const { 0: response, 1: proxyController } = new WebSocketPair();
108
+ proxyController.accept();
109
+ proxyController.addEventListener("close", (event) => {
110
+ // don't reconnect the proxyController websocket
111
+ // ProxyController can detect this event and reconnect itself
112
+
113
+ this.sendDebugLog(
114
+ "PROXY CONTROLLER WEBSOCKET CLOSED",
115
+ event.code,
116
+ event.reason
117
+ );
118
+
119
+ if (this.websockets.proxyController === proxyController) {
120
+ this.websockets.proxyController = undefined;
121
+ }
122
+ });
123
+ proxyController.addEventListener("error", (event) => {
124
+ // don't reconnect the proxyController websocket
125
+ // ProxyController can detect this event and reconnect itself
126
+
127
+ const error = serialiseError(event.error);
128
+ this.sendDebugLog("PROXY CONTROLLER WEBSOCKET ERROR", error);
129
+
130
+ if (this.websockets.proxyController === proxyController) {
131
+ this.websockets.proxyController = undefined;
132
+ }
133
+ });
134
+ proxyController.addEventListener(
135
+ "message",
136
+ this.handleProxyControllerIncomingMessage
137
+ );
138
+
139
+ this.websockets.proxyController = proxyController;
140
+
141
+ return new Response(null, {
142
+ status: 101,
143
+ webSocket: response,
144
+ });
145
+ }
146
+
147
+ handleProxyControllerIncomingMessage = (event: MessageEvent) => {
148
+ assert(
149
+ typeof event.data === "string",
150
+ "Expected event.data from proxy controller to be string"
151
+ );
152
+
153
+ const message: InspectorProxyWorkerIncomingWebSocketMessage = JSON.parse(
154
+ event.data
155
+ );
156
+
157
+ this.sendDebugLog("handleProxyControllerIncomingMessage", event.data);
158
+
159
+ switch (message.type) {
160
+ case "reloadStart": {
161
+ this.sendRuntimeDiscardConsoleEntries();
162
+
163
+ break;
164
+ }
165
+ case "reloadComplete": {
166
+ this.proxyData = message.proxyData;
167
+
168
+ this.reconnectRuntimeWebSocket();
169
+
170
+ break;
171
+ }
172
+ default: {
173
+ assertNever(message);
174
+ }
175
+ }
176
+ };
177
+
178
+ sendProxyControllerMessage(
179
+ message: string | InspectorProxyWorkerOutgoingWebsocketMessage
180
+ ) {
181
+ message = typeof message === "string" ? message : JSON.stringify(message);
182
+
183
+ // if the proxyController websocket is disconnected, throw away the message
184
+ this.websockets.proxyController?.send(message);
185
+ }
186
+
187
+ async sendProxyControllerRequest(
188
+ message: InspectorProxyWorkerOutgoingRequestBody
189
+ ) {
190
+ try {
191
+ const res = await this.env.PROXY_CONTROLLER.fetch("http://dummy", {
192
+ method: "POST",
193
+ body: JSON.stringify(message),
194
+ });
195
+ return res.ok ? await res.text() : undefined;
196
+ } catch (e) {
197
+ this.sendDebugLog(
198
+ "FAILED TO SEND PROXY CONTROLLER REQUEST",
199
+ serialiseError(e)
200
+ );
201
+ return undefined;
202
+ }
203
+ }
204
+
205
+ sendDebugLog: typeof console.debug = (...args) => {
206
+ this.sendProxyControllerRequest({ type: "debug-log", args });
207
+ };
208
+
209
+ // ***************
210
+ // ** RUNTIME **
211
+ // ***************
212
+
213
+ handleRuntimeIncomingMessage = (event: MessageEvent) => {
214
+ assert(typeof event.data === "string");
215
+
216
+ const msg = JSON.parse(event.data) as
217
+ | DevToolsCommandResponses
218
+ | DevToolsEvents;
219
+ this.sendDebugLog("RUNTIME INCOMING MESSAGE", msg);
220
+
221
+ if (isDevToolsEvent(msg, "Runtime.exceptionThrown")) {
222
+ this.sendProxyControllerMessage(event.data);
223
+ }
224
+ if (
225
+ this.proxyData?.proxyLogsToController &&
226
+ isDevToolsEvent(msg, "Runtime.consoleAPICalled")
227
+ ) {
228
+ this.sendProxyControllerMessage(event.data);
229
+ }
230
+
231
+ this.runtimeMessageBuffer.push(msg);
232
+ this.tryDrainRuntimeMessageBuffer();
233
+ };
234
+
235
+ handleRuntimeScriptParsed(msg: DevToolsEvent<"Debugger.scriptParsed">) {
236
+ // If the devtools does not have filesystem access,
237
+ // rewrite the sourceMapURL to use a special scheme.
238
+ // This special scheme is used to indicate whether
239
+ // to intercept each loadNetworkResource message.
240
+
241
+ if (
242
+ !this.websockets.devtoolsHasFileSystemAccess &&
243
+ msg.params.sourceMapURL !== undefined &&
244
+ // Don't try to find a sourcemap for e.g. node-internal: scripts
245
+ msg.params.url.startsWith("file:")
246
+ ) {
247
+ const url = new URL(msg.params.sourceMapURL, msg.params.url);
248
+ // Check for file: in case msg.params.sourceMapURL has a different
249
+ // protocol (e.g. data). In that case we should ignore this file
250
+ if (url.protocol === "file:") {
251
+ msg.params.sourceMapURL = url.href.replace("file:", "wrangler-file:");
252
+ }
253
+ }
254
+
255
+ void this.sendDevToolsMessage(msg);
256
+ }
257
+
258
+ tryDrainRuntimeMessageBuffer = () => {
259
+ // If we don't have a DevTools WebSocket, try again later
260
+ if (this.websockets.devtools === undefined) return;
261
+
262
+ // clear the buffer and replay each message to devtools
263
+ for (const msg of this.runtimeMessageBuffer.splice(0)) {
264
+ if (isDevToolsEvent(msg, "Debugger.scriptParsed")) {
265
+ this.handleRuntimeScriptParsed(msg);
266
+ } else {
267
+ void this.sendDevToolsMessage(msg);
268
+ }
269
+ }
270
+ };
271
+
272
+ runtimeAbortController = new AbortController(); // will abort the in-flight websocket upgrade request to the remote runtime
273
+ runtimeKeepAliveInterval: number | null = null;
274
+ async reconnectRuntimeWebSocket() {
275
+ assert(this.proxyData, "Expected this.proxyData to be defined");
276
+
277
+ this.sendDebugLog("reconnectRuntimeWebSocket");
278
+
279
+ this.websockets.runtime?.close();
280
+ this.websockets.runtime = undefined;
281
+ this.runtimeAbortController.abort();
282
+ this.runtimeAbortController = new AbortController();
283
+ this.websockets.runtimeDeferred = createDeferred<WebSocket>(
284
+ this.websockets.runtimeDeferred
285
+ );
286
+
287
+ const runtimeWebSocketUrl = urlFromParts(
288
+ this.proxyData.userWorkerInspectorUrl
289
+ );
290
+ runtimeWebSocketUrl.protocol = this.proxyData.userWorkerUrl.protocol; // http: or https:
291
+
292
+ this.sendDebugLog("NEW RUNTIME WEBSOCKET", runtimeWebSocketUrl);
293
+
294
+ const upgrade = await fetch(runtimeWebSocketUrl, {
295
+ headers: {
296
+ ...this.proxyData.headers,
297
+ Upgrade: "websocket",
298
+ },
299
+ signal: this.runtimeAbortController.signal,
300
+ });
301
+
302
+ const runtime = upgrade.webSocket;
303
+ if (!runtime) {
304
+ const error = new Error(
305
+ `Failed to establish the WebSocket connection: expected server to reply with HTTP status code 101 (switching protocols), but received ${upgrade.status} instead.`
306
+ );
307
+
308
+ this.websockets.runtimeDeferred.reject(error);
309
+ this.sendProxyControllerRequest({
310
+ type: "runtime-websocket-error",
311
+ error: serialiseError(error),
312
+ });
313
+
314
+ return;
315
+ }
316
+
317
+ this.websockets.runtime = runtime;
318
+
319
+ runtime.addEventListener("message", this.handleRuntimeIncomingMessage);
320
+
321
+ runtime.addEventListener("close", (event) => {
322
+ this.sendDebugLog("RUNTIME WEBSOCKET CLOSED", event.code, event.reason);
323
+
324
+ clearInterval(this.runtimeKeepAliveInterval);
325
+
326
+ if (this.websockets.runtime === runtime) {
327
+ this.websockets.runtime = undefined;
328
+ }
329
+
330
+ // don't reconnect the runtime websocket
331
+ // if it closes unexpectedly (very rare or a case where reconnecting won't succeed anyway)
332
+ // wait for a new proxy-data message or manual restart
333
+ });
334
+
335
+ runtime.addEventListener("error", (event) => {
336
+ const error = serialiseError(event.error);
337
+ this.sendDebugLog("RUNTIME WEBSOCKET ERROR", error);
338
+
339
+ clearInterval(this.runtimeKeepAliveInterval);
340
+
341
+ if (this.websockets.runtime === runtime) {
342
+ this.websockets.runtime = undefined;
343
+ }
344
+
345
+ this.sendProxyControllerRequest({
346
+ type: "runtime-websocket-error",
347
+ error,
348
+ });
349
+
350
+ // don't reconnect the runtime websocket
351
+ // if it closes unexpectedly (very rare or a case where reconnecting won't succeed anyway)
352
+ // wait for a new proxy-data message or manual restart
353
+ });
354
+
355
+ runtime.accept();
356
+
357
+ // fetch(Upgrade: websocket) resolves when the websocket is open
358
+ // therefore the open event will not fire, so just trigger the handler
359
+ this.handleRuntimeWebSocketOpen(runtime);
360
+ }
361
+
362
+ #runtimeMessageCounter = 1e8;
363
+ nextCounter() {
364
+ return ++this.#runtimeMessageCounter;
365
+ }
366
+ handleRuntimeWebSocketOpen(runtime: WebSocket) {
367
+ this.sendDebugLog("RUNTIME WEBSOCKET OPENED");
368
+
369
+ this.sendRuntimeMessage(
370
+ { method: "Runtime.enable", id: this.nextCounter() },
371
+ runtime
372
+ );
373
+ this.sendRuntimeMessage(
374
+ { method: "Debugger.enable", id: this.nextCounter() },
375
+ runtime
376
+ );
377
+ this.sendRuntimeMessage(
378
+ { method: "Network.enable", id: this.nextCounter() },
379
+ runtime
380
+ );
381
+
382
+ clearInterval(this.runtimeKeepAliveInterval);
383
+ this.runtimeKeepAliveInterval = setInterval(() => {
384
+ this.sendRuntimeMessage(
385
+ { method: "Runtime.getIsolateId", id: this.nextCounter() },
386
+ runtime
387
+ );
388
+ }, 10_000) as any;
389
+
390
+ this.websockets.runtimeDeferred.resolve(runtime);
391
+ }
392
+
393
+ sendRuntimeDiscardConsoleEntries() {
394
+ // by default, sendRuntimeMessage waits for the runtime websocket to connect
395
+ // but we only want to send this message now or never
396
+ // if we schedule it to send later (like waiting for the websocket, by default)
397
+ // then we risk clearing logs that have occured since we scheduled it too
398
+ // which is worse than leaving logs from the previous version on screen
399
+ if (this.websockets.runtime) {
400
+ this.sendRuntimeMessage(
401
+ {
402
+ method: "Runtime.discardConsoleEntries",
403
+ id: this.nextCounter(),
404
+ },
405
+ this.websockets.runtime
406
+ );
407
+ }
408
+ }
409
+
410
+ async sendRuntimeMessage(
411
+ message: string | DevToolsCommandRequests,
412
+ runtime: MaybePromise<WebSocket> = this.websockets.runtimeDeferred.promise
413
+ ) {
414
+ runtime = await runtime;
415
+ message = typeof message === "string" ? message : JSON.stringify(message);
416
+
417
+ this.sendDebugLog("SEND TO RUNTIME", message);
418
+
419
+ runtime.send(message);
420
+ }
421
+
422
+ // ****************
423
+ // ** DEVTOOLS **
424
+ // ****************
425
+
426
+ #inspectorId = crypto.randomUUID();
427
+ async handleDevToolsJsonRequest(req: Request) {
428
+ const url = new URL(req.url);
429
+
430
+ if (url.pathname === "/json/version") {
431
+ return Response.json({
432
+ Browser: `wrangler/v${this.env.WRANGLER_VERSION}`,
433
+ // TODO: (someday): The DevTools protocol should match that of workerd.
434
+ // This could be exposed by the preview API.
435
+ "Protocol-Version": "1.3",
436
+ });
437
+ }
438
+
439
+ if (url.pathname === "/json" || url.pathname === "/json/list") {
440
+ // TODO: can we remove the `/ws` here if we only have a single worker?
441
+ const localHost = `${url.host}/ws`;
442
+ const devtoolsFrontendUrl = `https://devtools.devprod.cloudflare.dev/js_app?theme=systemPreferred&debugger=true&ws=${localHost}`;
443
+
444
+ return Response.json([
445
+ {
446
+ id: this.#inspectorId,
447
+ type: "node", // TODO: can we specify different type?
448
+ description: "workers",
449
+ webSocketDebuggerUrl: `ws://${localHost}`,
450
+ devtoolsFrontendUrl,
451
+ devtoolsFrontendUrlCompat: devtoolsFrontendUrl,
452
+ // Below are fields that are visible in the DevTools UI.
453
+ title: "Cloudflare Worker",
454
+ faviconUrl: "https://workers.cloudflare.com/favicon.ico",
455
+ // url: "http://" + localHost, // looks unnecessary
456
+ },
457
+ ]);
458
+ }
459
+
460
+ return new Response(null, { status: 404 });
461
+ }
462
+
463
+ async handleDevToolsWebSocketUpgradeRequest(req: Request) {
464
+ // Validate `Host` header
465
+ let hostHeader = req.headers.get("Host");
466
+ if (hostHeader == null) return new Response(null, { status: 400 });
467
+ try {
468
+ const host = new URL(`http://${hostHeader}`);
469
+ if (!ALLOWED_HOST_HOSTNAMES.includes(host.hostname)) {
470
+ return new Response("Disallowed `Host` header", { status: 401 });
471
+ }
472
+ } catch {
473
+ return new Response("Expected `Host` header", { status: 400 });
474
+ }
475
+ // Validate `Origin` header
476
+ let originHeader = req.headers.get("Origin");
477
+ if (originHeader === null && !req.headers.has("User-Agent")) {
478
+ // VSCode doesn't send an `Origin` header, but also doesn't send a
479
+ // `User-Agent` header, so allow an empty origin in this case.
480
+ originHeader = "http://localhost";
481
+ }
482
+ if (originHeader === null) {
483
+ return new Response("Expected `Origin` header", { status: 400 });
484
+ }
485
+ try {
486
+ const origin = new URL(originHeader);
487
+ const allowed = ALLOWED_ORIGIN_HOSTNAMES.some((rule) => {
488
+ if (typeof rule === "string") return origin.hostname === rule;
489
+ else return rule.test(origin.hostname);
490
+ });
491
+ if (!allowed) {
492
+ return new Response("Disallowed `Origin` header", { status: 401 });
493
+ }
494
+ } catch {
495
+ return new Response("Expected `Origin` header", { status: 400 });
496
+ }
497
+
498
+ // DevTools attempting to connect
499
+ this.sendDebugLog("DEVTOOLS WEBSOCKET TRYING TO CONNECT");
500
+
501
+ // Delay devtools connection response until we've connected to the runtime inspector server
502
+ await this.websockets.runtimeDeferred.promise;
503
+
504
+ this.sendDebugLog("DEVTOOLS WEBSOCKET CAN NOW CONNECT");
505
+
506
+ assert(
507
+ req.headers.get("Upgrade") === "websocket",
508
+ "Expected DevTools connection to be WebSocket upgrade"
509
+ );
510
+ const { 0: response, 1: devtools } = new WebSocketPair();
511
+ devtools.accept();
512
+
513
+ if (this.websockets.devtools !== undefined) {
514
+ /** We only want to have one active Devtools instance at a time. */
515
+ // TODO(consider): prioritise new websocket over previous
516
+ devtools.close(
517
+ 1013,
518
+ "Too many clients; only one can be connected at a time"
519
+ );
520
+ } else {
521
+ devtools.addEventListener("message", this.handleDevToolsIncomingMessage);
522
+ devtools.addEventListener("close", (event) => {
523
+ this.sendDebugLog(
524
+ "DEVTOOLS WEBSOCKET CLOSED",
525
+ event.code,
526
+ event.reason
527
+ );
528
+
529
+ if (this.websockets.devtools === devtools) {
530
+ this.websockets.devtools = undefined;
531
+ }
532
+ });
533
+ devtools.addEventListener("error", (event) => {
534
+ const error = serialiseError(event.error);
535
+ this.sendDebugLog("DEVTOOLS WEBSOCKET ERROR", error);
536
+
537
+ if (this.websockets.devtools === devtools) {
538
+ this.websockets.devtools = undefined;
539
+ }
540
+ });
541
+
542
+ // Since Wrangler proxies the inspector, reloading Chrome DevTools won't trigger debugger initialisation events (because it's connecting to an extant session).
543
+ // This sends a `Debugger.disable` message to the remote when a new WebSocket connection is initialised,
544
+ // with the assumption that the new connection will shortly send a `Debugger.enable` event and trigger re-initialisation.
545
+ // The key initialisation messages that are needed are the `Debugger.scriptParsed events`.
546
+ this.sendRuntimeMessage({
547
+ id: this.nextCounter(),
548
+ method: "Debugger.disable",
549
+ });
550
+
551
+ this.sendDebugLog("DEVTOOLS WEBSOCKET CONNECTED");
552
+
553
+ // Our patched DevTools are hosted on a `https://` URL. These cannot
554
+ // access `file://` URLs, meaning local source maps cannot be fetched.
555
+ // To get around this, we can rewrite `Debugger.scriptParsed` events to
556
+ // include a special `worker:` scheme for source maps, and respond to
557
+ // `Network.loadNetworkResource` commands for these. Unfortunately, this
558
+ // breaks IDE's built-in debuggers (e.g. VSCode and WebStorm), so we only
559
+ // want to enable this transformation when we detect hosted DevTools has
560
+ // connected. We do this by looking at the WebSocket handshake headers:
561
+ //
562
+ // DevTools
563
+ //
564
+ // Upgrade: websocket
565
+ // Host: localhost:9229
566
+ // (from Chrome) User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
567
+ // (from Firefox) User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/116.0
568
+ // Origin: https://devtools.devprod.cloudflare.dev
569
+ // ...
570
+ //
571
+ // VSCode
572
+ //
573
+ // Upgrade: websocket
574
+ // Host: localhost
575
+ // ...
576
+ //
577
+ // WebStorm
578
+ //
579
+ // Upgrade: websocket
580
+ // Host: localhost:9229
581
+ // Origin: http://localhost:9229
582
+ // ...
583
+ //
584
+ // From this, we could just use the presence of a `User-Agent` header to
585
+ // determine if DevTools connected, but VSCode/WebStorm could very well
586
+ // add this in future versions. We could also look for an `Origin` header
587
+ // matching the hosted DevTools URL, but this would prevent preview/local
588
+ // versions working. Instead, we look for a browser-like `User-Agent`.
589
+ const userAgent = req.headers.get("User-Agent") ?? "";
590
+ const hasFileSystemAccess = !/mozilla/i.test(userAgent);
591
+
592
+ this.websockets.devtools = devtools;
593
+ this.websockets.devtoolsHasFileSystemAccess = hasFileSystemAccess;
594
+
595
+ this.tryDrainRuntimeMessageBuffer();
596
+ }
597
+
598
+ return new Response(null, { status: 101, webSocket: response });
599
+ }
600
+
601
+ handleDevToolsIncomingMessage = (event: MessageEvent) => {
602
+ assert(
603
+ typeof event.data === "string",
604
+ "Expected devtools incoming message to be of type string"
605
+ );
606
+
607
+ const message = JSON.parse(event.data) as DevToolsCommandRequests;
608
+ this.sendDebugLog("DEVTOOLS INCOMING MESSAGE", message);
609
+
610
+ if (message.method === "Network.loadNetworkResource") {
611
+ return void this.handleDevToolsLoadNetworkResource(message);
612
+ }
613
+
614
+ this.sendRuntimeMessage(JSON.stringify(message));
615
+ };
616
+
617
+ async handleDevToolsLoadNetworkResource(
618
+ message: DevToolsCommandRequest<"Network.loadNetworkResource">
619
+ ) {
620
+ const response = await this.sendProxyControllerRequest({
621
+ type: "load-network-resource",
622
+ url: message.params.url,
623
+ });
624
+ if (response === undefined) {
625
+ this.sendDebugLog(
626
+ `ProxyController could not resolve Network.loadNetworkResource for "${message.params.url}"`
627
+ );
628
+
629
+ // When the ProxyController cannot resolve a resource, let the runtime handle the request
630
+ this.sendRuntimeMessage(JSON.stringify(message));
631
+ } else {
632
+ // this.websockets.devtools can be undefined here
633
+ // the incoming message implies we have a devtools connection, but after
634
+ // the await it could've dropped in which case we can safely not respond
635
+ this.sendDevToolsMessage({
636
+ id: message.id,
637
+ // @ts-expect-error DevTools Protocol type does not match our patched devtools -- result.resource.text was added
638
+ result: { resource: { success: true, text: response } },
639
+ });
640
+ }
641
+ }
642
+
643
+ sendDevToolsMessage(
644
+ message: string | DevToolsCommandResponses | DevToolsEvents
645
+ ) {
646
+ message = typeof message === "string" ? message : JSON.stringify(message);
647
+
648
+ this.sendDebugLog("SEND TO DEVTOOLS", message);
649
+
650
+ this.websockets.devtools?.send(message);
651
+ }
652
+ }