From 5fd080c88ee7991cde107f8723f06ea2fd2c651d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Somhairle=20MacLe=C3=B2id?= Date: Fri, 5 May 2023 19:45:24 +0100 Subject: [PATCH] Support sourcemaps in DevTools (#3140) * Support sourcemaps in DevTools * Support Miniflare source mapping --- .changeset/six-chicken-shave.md | 7 ++ fixtures/sites-app/wrangler.toml | 1 + fixtures/worker-ts/package.json | 13 ++ fixtures/worker-ts/src/index.ts | 34 ++++++ fixtures/worker-ts/tsconfig.json | 13 ++ fixtures/worker-ts/wrangler.toml | 3 + package-lock.json | 32 +++++ ...d-README-detailing-the-setup-process.patch | 4 +- ...pport-viewing-files-over-the-network.patch | 4 +- .../0003-Show-fallback-image-on-Safari.patch | 4 +- ...port-previewing-subrequest-responses.patch | 4 +- ...tter-Firefox-support-for-network-tab.patch | 4 +- ...VX-292-Remove-unsupported-network-UI.patch | 4 +- .../0007-Remove-unsupported-profiler-UI.patch | 4 +- ...overlay-on-the-memory-tab-in-Firefox.patch | 4 +- ...l-parameter-for-forcing-the-theme-fr.patch | 4 +- ...r-text-colour-in-dark-mode-in-browse.patch | 4 +- ...0011-Fallback-to-location-for-domain.patch | 4 +- .../0012-Hide-unsupported-settings-UI.patch | 4 +- ...bugger-sidebar-and-disable-breakpoin.patch | 4 +- ...ping-to-improve-connection-stability.patch | 62 +++++----- .../patches/0015-Support-sourcemaps.patch | 60 ++++++++++ packages/wrangler/src/bundle.ts | 8 +- packages/wrangler/src/dev/dev.tsx | 5 +- packages/wrangler/src/dev/local.tsx | 4 + packages/wrangler/src/dev/remote.tsx | 2 + packages/wrangler/src/dev/start-server.ts | 2 + packages/wrangler/src/dev/use-esbuild.ts | 3 + packages/wrangler/src/entry.ts | 6 + packages/wrangler/src/inspect.ts | 113 +++++++++++++++++- .../wrangler/src/traverse-module-graph.ts | 1 + 31 files changed, 355 insertions(+), 66 deletions(-) create mode 100644 .changeset/six-chicken-shave.md create mode 100644 fixtures/worker-ts/package.json create mode 100644 fixtures/worker-ts/src/index.ts create mode 100644 fixtures/worker-ts/tsconfig.json create mode 100644 fixtures/worker-ts/wrangler.toml create mode 100644 packages/wrangler-devtools/patches/0015-Support-sourcemaps.patch diff --git a/.changeset/six-chicken-shave.md b/.changeset/six-chicken-shave.md new file mode 100644 index 000000000000..654e24631d2f --- /dev/null +++ b/.changeset/six-chicken-shave.md @@ -0,0 +1,7 @@ +--- +"wrangler": minor +--- + +feat: Support sourcemaps in DevTools + +Intercept requests from DevTools in Wrangler to inject sourcemaps and enable folders in the Sources Panel of DevTools. When errors are thrown in your Worker, DevTools should now show your source file in the Sources panel, rather than Wrangler's bundled output. diff --git a/fixtures/sites-app/wrangler.toml b/fixtures/sites-app/wrangler.toml index 2fa43a3566c5..7c074f846c87 100644 --- a/fixtures/sites-app/wrangler.toml +++ b/fixtures/sites-app/wrangler.toml @@ -1,2 +1,3 @@ name = "sites-app" site = { bucket = "./public" } +main = "src/modules.js" diff --git a/fixtures/worker-ts/package.json b/fixtures/worker-ts/package.json new file mode 100644 index 000000000000..9fefef2bfb68 --- /dev/null +++ b/fixtures/worker-ts/package.json @@ -0,0 +1,13 @@ +{ + "name": "worker-ts", + "version": "0.0.0", + "private": true, + "scripts": { + "deploy": "wrangler publish", + "start": "wrangler dev" + }, + "devDependencies": { + "@cloudflare/workers-types": "^4.20230419.0", + "wrangler": "2.19.0" + } +} diff --git a/fixtures/worker-ts/src/index.ts b/fixtures/worker-ts/src/index.ts new file mode 100644 index 000000000000..e550fd3fdfa6 --- /dev/null +++ b/fixtures/worker-ts/src/index.ts @@ -0,0 +1,34 @@ +/** + * Welcome to Cloudflare Workers! This is your first worker. + * + * - Run `wrangler dev src/index.ts` in your terminal to start a development server + * - Open a browser tab at http://localhost:8787/ to see your worker in action + * - Run `wrangler publish src/index.ts --name my-worker` to publish your worker + * + * Learn more at https://developers.cloudflare.com/workers/ + */ +export interface Env { + // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/ + // MY_KV_NAMESPACE: KVNamespace; + // + // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/ + // MY_DURABLE_OBJECT: DurableObjectNamespace; + // + // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/ + // MY_BUCKET: R2Bucket; + // + // Example binding to a Service. Learn more at https://developers.cloudflare.com/workers/runtime-apis/service-bindings/ + // MY_SERVICE: Fetcher; +} + +export default { + async fetch( + request: Request, + env: Env, + ctx: ExecutionContext + ): Promise { + const url = new URL(request.url); + if (url.pathname === "/error") throw new Error("Hello Error"); + return new Response("Hello World!"); + }, +}; diff --git a/fixtures/worker-ts/tsconfig.json b/fixtures/worker-ts/tsconfig.json new file mode 100644 index 000000000000..258e03918a00 --- /dev/null +++ b/fixtures/worker-ts/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "target": "es2021", + "lib": ["es2021"], + "module": "es2022", + "types": ["@cloudflare/workers-types/2022-11-30"], + "noEmit": true, + "isolatedModules": true, + "forceConsistentCasingInFileNames": true, + "strict": true, + "skipLibCheck": true + } +} diff --git a/fixtures/worker-ts/wrangler.toml b/fixtures/worker-ts/wrangler.toml new file mode 100644 index 000000000000..0404b911ae95 --- /dev/null +++ b/fixtures/worker-ts/wrangler.toml @@ -0,0 +1,3 @@ +name = "worker-ts" +main = "src/index.ts" +compatibility_date = "2023-05-04" diff --git a/package-lock.json b/package-lock.json index 93b62f33c61c..67d9b0627754 100644 --- a/package-lock.json +++ b/package-lock.json @@ -402,6 +402,19 @@ "version": "1.0.1", "license": "ISC" }, + "fixtures/worker-ts": { + "version": "0.0.0", + "devDependencies": { + "@cloudflare/workers-types": "^4.20230419.0", + "wrangler": "2.19.0" + } + }, + "fixtures/worker-ts/node_modules/@cloudflare/workers-types": { + "version": "4.20230419.0", + "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20230419.0.tgz", + "integrity": "sha512-MfNBlHrI/ekRkbLtdAo23D4hkXF+3QD92OCwuXxCUK73HtMHuBqkMp9T/8KFbKNRCnz7PzUderc7Jr5m3eeW3g==", + "dev": true + }, "fixtures/workers-chat-demo": { "version": "1.0.0" }, @@ -43414,6 +43427,10 @@ "microevent.ts": "~0.1.1" } }, + "node_modules/worker-ts": { + "resolved": "fixtures/worker-ts", + "link": true + }, "node_modules/worker-turso-ts": { "resolved": "templates/worker-turso-ts", "link": true @@ -93547,6 +93564,21 @@ "microevent.ts": "~0.1.1" } }, + "worker-ts": { + "version": "file:fixtures/worker-ts", + "requires": { + "@cloudflare/workers-types": "^4.20230419.0", + "wrangler": "2.19.0" + }, + "dependencies": { + "@cloudflare/workers-types": { + "version": "4.20230419.0", + "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20230419.0.tgz", + "integrity": "sha512-MfNBlHrI/ekRkbLtdAo23D4hkXF+3QD92OCwuXxCUK73HtMHuBqkMp9T/8KFbKNRCnz7PzUderc7Jr5m3eeW3g==", + "dev": true + } + } + }, "worker-turso-ts": { "version": "file:templates/worker-turso-ts", "requires": { diff --git a/packages/wrangler-devtools/patches/0001-Add-README-detailing-the-setup-process.patch b/packages/wrangler-devtools/patches/0001-Add-README-detailing-the-setup-process.patch index 865a1018c500..efa89c37c7b1 100644 --- a/packages/wrangler-devtools/patches/0001-Add-README-detailing-the-setup-process.patch +++ b/packages/wrangler-devtools/patches/0001-Add-README-detailing-the-setup-process.patch @@ -1,7 +1,7 @@ From b2985a087935838fdf6a6f0dba21afed484849c7 Mon Sep 17 00:00:00 2001 From: Samuel Macleod Date: Wed, 11 Jan 2023 17:46:48 +0000 -Subject: [PATCH 01/14] Add README detailing the setup process +Subject: [PATCH 01/15] Add README detailing the setup process --- README.md | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ @@ -74,5 +74,5 @@ index 8a057be23c..4e009509b2 100644 -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0002-Support-viewing-files-over-the-network.patch b/packages/wrangler-devtools/patches/0002-Support-viewing-files-over-the-network.patch index b408b725f52e..cb33a393ad35 100644 --- a/packages/wrangler-devtools/patches/0002-Support-viewing-files-over-the-network.patch +++ b/packages/wrangler-devtools/patches/0002-Support-viewing-files-over-the-network.patch @@ -1,7 +1,7 @@ From cc7b688a2427d7506a2f4111887a5e243fb841d4 Mon Sep 17 00:00:00 2001 From: Samuel Macleod Date: Thu, 12 Jan 2023 15:33:43 +0000 -Subject: [PATCH 02/14] Support viewing files over the network +Subject: [PATCH 02/15] Support viewing files over the network --- front_end/core/sdk/Target.ts | 4 ++++ @@ -93,5 +93,5 @@ index ac0d4aaf68..29c726e185 100644 ] } -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0003-Show-fallback-image-on-Safari.patch b/packages/wrangler-devtools/patches/0003-Show-fallback-image-on-Safari.patch index c367116c4e9e..d5a76bbe1f14 100644 --- a/packages/wrangler-devtools/patches/0003-Show-fallback-image-on-Safari.patch +++ b/packages/wrangler-devtools/patches/0003-Show-fallback-image-on-Safari.patch @@ -1,7 +1,7 @@ From a742a62c90c73c8c7e766eaaad9003200a447729 Mon Sep 17 00:00:00 2001 From: Samuel Macleod Date: Mon, 16 Jan 2023 16:51:11 +0000 -Subject: [PATCH 03/14] Show fallback image on Safari +Subject: [PATCH 03/15] Show fallback image on Safari --- config/gni/devtools_grd_files.gni | 1 + @@ -1815,5 +1815,5 @@ index 1edaec9604..945aa6d816 100644 + -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0004-Support-previewing-subrequest-responses.patch b/packages/wrangler-devtools/patches/0004-Support-previewing-subrequest-responses.patch index 77687552963c..bb80ae589d32 100644 --- a/packages/wrangler-devtools/patches/0004-Support-previewing-subrequest-responses.patch +++ b/packages/wrangler-devtools/patches/0004-Support-previewing-subrequest-responses.patch @@ -1,7 +1,7 @@ From 6c4581cd2e985e8e94aa3c9091faec45743da6e4 Mon Sep 17 00:00:00 2001 From: bcoll Date: Mon, 16 Jan 2023 14:26:52 +0000 -Subject: [PATCH 04/14] Support previewing subrequest responses +Subject: [PATCH 04/15] Support previewing subrequest responses --- front_end/core/sdk/NetworkManager.ts | 9 +++++++-- @@ -61,5 +61,5 @@ index 213ca7fecd..ef5c568e96 100644 import '../../panels/js_profiler/js_profiler-meta.js'; -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0005-Better-Firefox-support-for-network-tab.patch b/packages/wrangler-devtools/patches/0005-Better-Firefox-support-for-network-tab.patch index c56c710441a0..b7134d444394 100644 --- a/packages/wrangler-devtools/patches/0005-Better-Firefox-support-for-network-tab.patch +++ b/packages/wrangler-devtools/patches/0005-Better-Firefox-support-for-network-tab.patch @@ -1,7 +1,7 @@ From b91cdddb4b2576149ba2c184f011073140f16e9b Mon Sep 17 00:00:00 2001 From: Samuel Macleod Date: Thu, 19 Jan 2023 15:47:52 +0000 -Subject: [PATCH 05/14] Better Firefox support for network tab +Subject: [PATCH 05/15] Better Firefox support for network tab --- front_end/entrypoints/js_app/js_app.ts | 2 ++ @@ -45,5 +45,5 @@ index a7ec8ccf32..fc80d2769d 100644 return; } -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0006-DEVX-292-Remove-unsupported-network-UI.patch b/packages/wrangler-devtools/patches/0006-DEVX-292-Remove-unsupported-network-UI.patch index d25a50a9b07b..2373fc8bfd5c 100644 --- a/packages/wrangler-devtools/patches/0006-DEVX-292-Remove-unsupported-network-UI.patch +++ b/packages/wrangler-devtools/patches/0006-DEVX-292-Remove-unsupported-network-UI.patch @@ -1,7 +1,7 @@ From 1a267cd3d143892fb0886907a75e3eb295b5b150 Mon Sep 17 00:00:00 2001 From: bcoll Date: Mon, 16 Jan 2023 15:43:50 +0000 -Subject: [PATCH 06/14] DEVX-292 Remove unsupported network UI +Subject: [PATCH 06/15] DEVX-292 Remove unsupported network UI --- front_end/panels/network/NetworkPanel.ts | 35 ------------------------ @@ -75,5 +75,5 @@ index 304bb09af1..aaf80fbd50 100644 this.rightToolbar.appendSeparator(); this.rightToolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingToggle( -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0007-Remove-unsupported-profiler-UI.patch b/packages/wrangler-devtools/patches/0007-Remove-unsupported-profiler-UI.patch index 3302259502d4..ca3fe7fa2437 100644 --- a/packages/wrangler-devtools/patches/0007-Remove-unsupported-profiler-UI.patch +++ b/packages/wrangler-devtools/patches/0007-Remove-unsupported-profiler-UI.patch @@ -1,7 +1,7 @@ From 7312af32a23a62acc2f5661187ef90b01381c0de Mon Sep 17 00:00:00 2001 From: bcoll Date: Mon, 16 Jan 2023 16:32:45 +0000 -Subject: [PATCH 07/14] Remove unsupported profiler UI +Subject: [PATCH 07/15] Remove unsupported profiler UI --- front_end/panels/profiler/HeapProfilerPanel.ts | 2 +- @@ -35,5 +35,5 @@ index c4680b48be..c2fe5b775f 100644 this.profileViewToolbar = new UI.Toolbar.Toolbar('', this.toolbarElement); this.profileViewToolbar.makeWrappable(true); -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0008-Show-an-overlay-on-the-memory-tab-in-Firefox.patch b/packages/wrangler-devtools/patches/0008-Show-an-overlay-on-the-memory-tab-in-Firefox.patch index 73459788d555..90fab9698f8d 100644 --- a/packages/wrangler-devtools/patches/0008-Show-an-overlay-on-the-memory-tab-in-Firefox.patch +++ b/packages/wrangler-devtools/patches/0008-Show-an-overlay-on-the-memory-tab-in-Firefox.patch @@ -1,7 +1,7 @@ From 70e79d4a4e1821021d0df627a23d62ede6c558ba Mon Sep 17 00:00:00 2001 From: Samuel Macleod Date: Thu, 19 Jan 2023 18:49:47 +0000 -Subject: [PATCH 08/14] Show an overlay on the memory tab in Firefox +Subject: [PATCH 08/15] Show an overlay on the memory tab in Firefox --- front_end/entrypoint_template.html | 18 ++++++++++++++++-- @@ -71,5 +71,5 @@ index 693621a273..9b330e7cf0 100644 flex: auto; position: relative; -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0009-Support-theme-url-parameter-for-forcing-the-theme-fr.patch b/packages/wrangler-devtools/patches/0009-Support-theme-url-parameter-for-forcing-the-theme-fr.patch index 4601bf5a60ea..808600d5e0a4 100644 --- a/packages/wrangler-devtools/patches/0009-Support-theme-url-parameter-for-forcing-the-theme-fr.patch +++ b/packages/wrangler-devtools/patches/0009-Support-theme-url-parameter-for-forcing-the-theme-fr.patch @@ -1,7 +1,7 @@ From 0edd0dbfe2704ef6bc527cbfa68dd35989d95cc5 Mon Sep 17 00:00:00 2001 From: Samuel Macleod Date: Fri, 20 Jan 2023 19:19:37 +0000 -Subject: [PATCH 09/14] Support theme= url parameter for forcing the theme from +Subject: [PATCH 09/15] Support theme= url parameter for forcing the theme from outside --- @@ -41,5 +41,5 @@ index 05736bc0b8..530028d5b0 100644 this.customSheets.clear(); this.dispatchEvent(new ThemeChangeEvent()); -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0010-Basic-support-for-text-colour-in-dark-mode-in-browse.patch b/packages/wrangler-devtools/patches/0010-Basic-support-for-text-colour-in-dark-mode-in-browse.patch index fb7dfb004d79..f0ee790cd8ee 100644 --- a/packages/wrangler-devtools/patches/0010-Basic-support-for-text-colour-in-dark-mode-in-browse.patch +++ b/packages/wrangler-devtools/patches/0010-Basic-support-for-text-colour-in-dark-mode-in-browse.patch @@ -1,7 +1,7 @@ From 9d34de7c9010659ece1be008ee852a21e06bff55 Mon Sep 17 00:00:00 2001 From: Samuel Macleod Date: Mon, 23 Jan 2023 15:12:38 +0000 -Subject: [PATCH 10/14] Basic support for text colour in dark mode in browsers +Subject: [PATCH 10/15] Basic support for text colour in dark mode in browsers that don't implement :host-context --- @@ -46,5 +46,5 @@ index b451da60eb..8828dd8f07 100644 -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0011-Fallback-to-location-for-domain.patch b/packages/wrangler-devtools/patches/0011-Fallback-to-location-for-domain.patch index 69a6d74ad886..4b32f255996f 100644 --- a/packages/wrangler-devtools/patches/0011-Fallback-to-location-for-domain.patch +++ b/packages/wrangler-devtools/patches/0011-Fallback-to-location-for-domain.patch @@ -1,7 +1,7 @@ From 0091abac4c9631649485198cc36b49ebd4fd40dd Mon Sep 17 00:00:00 2001 From: Samuel Macleod Date: Thu, 26 Jan 2023 15:27:04 +0000 -Subject: [PATCH 11/14] Fallback to location for domain +Subject: [PATCH 11/15] Fallback to location for domain --- front_end/panels/sources/NavigatorView.ts | 3 ++- @@ -22,5 +22,5 @@ index c7a64ab432..ca32b5202e 100644 const parsedURL = new Common.ParsedURL.ParsedURL(projectOrigin); -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0012-Hide-unsupported-settings-UI.patch b/packages/wrangler-devtools/patches/0012-Hide-unsupported-settings-UI.patch index 994b0d8a5845..cde756c7177f 100644 --- a/packages/wrangler-devtools/patches/0012-Hide-unsupported-settings-UI.patch +++ b/packages/wrangler-devtools/patches/0012-Hide-unsupported-settings-UI.patch @@ -1,7 +1,7 @@ From deeac26dadb8f2d7f5653c1994eed41f9e220af2 Mon Sep 17 00:00:00 2001 From: bcoll Date: Thu, 26 Jan 2023 15:30:34 +0000 -Subject: [PATCH 12/14] Hide unsupported settings UI +Subject: [PATCH 12/15] Hide unsupported settings UI - Show CORS errors in console setting - Show XHR requests in console setting @@ -62,5 +62,5 @@ index df0806e90d..0b20193865 100644 + display: none; +} -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0013-DEVX-380-Hide-debugger-sidebar-and-disable-breakpoin.patch b/packages/wrangler-devtools/patches/0013-DEVX-380-Hide-debugger-sidebar-and-disable-breakpoin.patch index ed9895c2587b..217f0d7886aa 100644 --- a/packages/wrangler-devtools/patches/0013-DEVX-380-Hide-debugger-sidebar-and-disable-breakpoin.patch +++ b/packages/wrangler-devtools/patches/0013-DEVX-380-Hide-debugger-sidebar-and-disable-breakpoin.patch @@ -1,7 +1,7 @@ From cde74d1233f0e89563cfe4d458af197f21c22f18 Mon Sep 17 00:00:00 2001 From: bcoll Date: Wed, 15 Feb 2023 15:07:45 +0000 -Subject: [PATCH 13/14] DEVX-380 Hide debugger sidebar and disable breakpoints +Subject: [PATCH 13/15] DEVX-380 Hide debugger sidebar and disable breakpoints - Hides debugger sidebar - Removes toggle debugger sidebar command @@ -87,5 +87,5 @@ index c5e95ab535..9c53bca1b3 100644 settingName: 'navigatorGroupByFolder', settingType: Common.Settings.SettingType.BOOLEAN, -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0014-Add-ping-to-improve-connection-stability.patch b/packages/wrangler-devtools/patches/0014-Add-ping-to-improve-connection-stability.patch index e28dca797e18..a6ed720c8fbc 100644 --- a/packages/wrangler-devtools/patches/0014-Add-ping-to-improve-connection-stability.patch +++ b/packages/wrangler-devtools/patches/0014-Add-ping-to-improve-connection-stability.patch @@ -1,46 +1,44 @@ -From b6b9e129a3f09863a82d4e0af0cfd234fd0b8f1d Mon Sep 17 00:00:00 2001 +From 37cafef0a7f76f3c623e1c0016244b07f4dfc5d9 Mon Sep 17 00:00:00 2001 From: Samuel Macleod -Date: Fri, 31 Mar 2023 23:20:07 +0100 -Subject: [PATCH 14/14] Add ping to improve connection stability +Date: Thu, 4 May 2023 03:21:58 +0100 +Subject: [PATCH 14/15] Add ping to improve connection stability --- - front_end/core/sdk/Connections.ts | 9 +++++++++ + front_end/core/protocol_client/InspectorBackend.ts | 9 +++++++++ 1 file changed, 9 insertions(+) -diff --git a/front_end/core/sdk/Connections.ts b/front_end/core/sdk/Connections.ts -index f8ac89d283..cb963a973c 100644 ---- a/front_end/core/sdk/Connections.ts -+++ b/front_end/core/sdk/Connections.ts -@@ -83,6 +83,7 @@ export class WebSocketConnection implements ProtocolClient.InspectorBackend.Conn - #onWebSocketDisconnect: (() => void)|null; - #connected: boolean; - #messages: string[]; +diff --git a/front_end/core/protocol_client/InspectorBackend.ts b/front_end/core/protocol_client/InspectorBackend.ts +index bc7ccf9c08..7d033a7b26 100644 +--- a/front_end/core/protocol_client/InspectorBackend.ts ++++ b/front_end/core/protocol_client/InspectorBackend.ts +@@ -249,6 +249,8 @@ export class SessionRouter { + proxyConnection: ((Connection | undefined)|null), + }>; + #pendingScripts: (() => void)[]; + #pingInterval: ReturnType; - constructor(url: Platform.DevToolsPath.UrlString, onWebSocketDisconnect: () => void) { - this.#socket = new WebSocket(url); - this.#socket.onerror = this.onError.bind(this); -@@ -99,6 +100,13 @@ export class WebSocketConnection implements ProtocolClient.InspectorBackend.Conn - this.#onWebSocketDisconnect = onWebSocketDisconnect; - this.#connected = false; - this.#messages = []; -+ let highPingId = 100_000; ++ + + constructor(connection: Connection) { + this.#connectionInternal = connection; +@@ -266,11 +268,18 @@ export class SessionRouter { + this.#connectionInternal.setOnMessage(this.onMessage.bind(this)); + + this.#connectionInternal.setOnDisconnect(reason => { ++ clearInterval(this.#pingInterval) + const session = this.#sessions.get(''); + if (session) { + session.target.dispose(reason); + } + }); + this.#pingInterval = setInterval(() => { -+ this.sendRawMessage(JSON.stringify({ ++ this.#connectionInternal.sendRawMessage(JSON.stringify({ + method: "Runtime.getIsolateId", -+ id: highPingId++, ++ id: this.nextMessageId(), + })); + }, 10_000); } - setOnMessage(onMessage: (arg0: (Object|string)) => void): void { -@@ -151,6 +159,7 @@ export class WebSocketConnection implements ProtocolClient.InspectorBackend.Conn - this.#socket = null; - } - this.#onWebSocketDisconnect = null; -+ clearInterval(this.#pingInterval) - } - - sendRawMessage(message: string): void { + registerSession(target: TargetBase, sessionId: string, proxyConnection?: Connection|null): void { -- -2.37.1 (Apple Git-137.1) +2.39.2 (Apple Git-143) diff --git a/packages/wrangler-devtools/patches/0015-Support-sourcemaps.patch b/packages/wrangler-devtools/patches/0015-Support-sourcemaps.patch new file mode 100644 index 000000000000..b9c8770dcbfa --- /dev/null +++ b/packages/wrangler-devtools/patches/0015-Support-sourcemaps.patch @@ -0,0 +1,60 @@ +From 85fcb93878fac45074cc24d4e215ede8b9082339 Mon Sep 17 00:00:00 2001 +From: Samuel Macleod +Date: Thu, 4 May 2023 03:22:33 +0100 +Subject: [PATCH 15/15] Support sourcemaps: + + * Recognise `wrangler://` URLs as "special", and always load them with Network.loadNetworkResource + + * Support a `text` property on the response to `Network.loadNetworkResource` to support providing a raw response, rather than a response stream + + * Enable the experimental `AUTHORED_DEPLOYED_GROUPING` and `JUST_MY_CODE` by default, for a better splitting of sourcemapped/deployed Worker code, and to su +--- + front_end/core/common/ParsedURL.ts | 2 +- + front_end/core/sdk/PageResourceLoader.ts | 4 +++- + front_end/entrypoints/main/MainImpl.ts | 2 ++ + 3 files changed, 6 insertions(+), 2 deletions(-) + +diff --git a/front_end/core/common/ParsedURL.ts b/front_end/core/common/ParsedURL.ts +index 37c79c85c1..bc52e4c7ce 100644 +--- a/front_end/core/common/ParsedURL.ts ++++ b/front_end/core/common/ParsedURL.ts +@@ -355,7 +355,7 @@ export class ParsedURL { + // Return special URLs as-is. + const trimmedHref = href.trim(); + if (trimmedHref.startsWith('data:') || trimmedHref.startsWith('blob:') || trimmedHref.startsWith('javascript:') || +- trimmedHref.startsWith('mailto:')) { ++ trimmedHref.startsWith('mailto:') || trimmedHref.startsWith('wrangler:')) { + return href as Platform.DevToolsPath.UrlString; + } + +diff --git a/front_end/core/sdk/PageResourceLoader.ts b/front_end/core/sdk/PageResourceLoader.ts +index b057267115..23d7872699 100644 +--- a/front_end/core/sdk/PageResourceLoader.ts ++++ b/front_end/core/sdk/PageResourceLoader.ts +@@ -307,7 +307,9 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper void) | undefined; sourceMapPath?: string | undefined; + sourceMapMetadata?: SourceMapMetadata | undefined; }; type StaticAssetsConfig = @@ -380,7 +382,7 @@ export async function bundleWorker( external: bundle ? ["__STATIC_CONTENT_MANIFEST"] : undefined, format: entry.format === "modules" ? "esm" : "iife", target: COMMON_ESBUILD_OPTIONS.target, - sourcemap: sourcemap ?? true, // this needs to use ?? to accept false + sourcemap: sourcemap ?? true, // Include a reference to the output folder in the sourcemap. // This is omitted by default, but we need it to properly resolve source paths in error output. sourceRoot: destination, @@ -470,6 +472,10 @@ export async function bundleWorker( bundleType, stop: result.stop, sourceMapPath, + sourceMapMetadata: { + tmpDir: tmpDir.path, + entryDirectory: entry.directory, + }, }; } diff --git a/packages/wrangler/src/dev/dev.tsx b/packages/wrangler/src/dev/dev.tsx index 29583a585daa..4ed39b251b2e 100644 --- a/packages/wrangler/src/dev/dev.tsx +++ b/packages/wrangler/src/dev/dev.tsx @@ -188,6 +188,7 @@ function InteractiveDevSession(props: DevProps) { inspect: props.inspect, localProtocol: props.localProtocol, forceLocal: props.forceLocal, + worker: props.name, }); ip = props.initialIp; @@ -350,6 +351,7 @@ function DevSession(props: DevSessionProps) { experimentalLocal={props.experimentalLocal} accountId={props.accountId} experimentalLocalRemoteKv={props.experimentalLocalRemoteKv} + sourceMapPath={bundle?.sourceMapPath} /> ) : ( + s.includes(tmpDir) || s.includes("wrangler/templates") + ? idx + : null + ) + .filter((i: number | null) => i !== null); + + const entryDirectory = props.sourceMapMetadata.entryDirectory; + + sourceMap.sources = sourceMap.sources.map( + (s: string) => + // These are never loaded by Wrangler or DevTools. However, the presence of a scheme is required for DevTools to show the path as folders in the Sources view + // The scheme is intentially not the same as for the sourceMappingURL + // Without this difference in scheme, DevTools will not strip prefix `../` path elements from top level folders (../node_modules -> node_modules, for instance) + `worker://${props.name}/${path.relative(entryDirectory, s)}` + ); + + sendMessageToLocalWebSocket({ + data: JSON.stringify({ + id: message.id, + result: { + resource: { + success: true, + text: JSON.stringify(sourceMap), + }, + }, + }), + }); + return; + } + } catch (e) { + logger.debug(e); + // Ignore errors, fallthrough to the remote inspector + } try { assert( remoteWebSocket, @@ -517,11 +588,28 @@ export default function useInspector(props: InspectorProps) { } /** Send a message from the local websocket to the remote websocket */ - function sendMessageToLocalWebSocket(event: MessageEvent) { + function sendMessageToLocalWebSocket(event: Pick) { assert( localWebSocket, "Trying to send a message to an undefined `localWebSocket`" ); + try { + // Intercept Debugger.scriptParsed responses to inject URL schemes + const message = JSON.parse(event.data as string); + if (message.method === "Debugger.scriptParsed") { + // Add the worker:// scheme conditionally, since some module types already have schemes (e.g. wasm) + message.params.url = new URL( + message.params.url, + `worker://${props.name}` + ).href; + localWebSocket.send(JSON.stringify(message)); + return; + } + } catch (e) { + logger.debug(e); + // Ignore errors, fallthrough to the local websocket + } + localWebSocket.send(event.data); } @@ -555,7 +643,13 @@ export default function useInspector(props: InspectorProps) { ); } }; - }, [localWebSocket, remoteWebSocket]); + }, [ + localWebSocket, + remoteWebSocket, + props.name, + props.sourceMapMetadata, + props.sourceMapPath, + ]); } // Credit: https://stackoverflow.com/a/2117523 @@ -744,8 +838,15 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void { /** * Opens the chrome debugger */ -export const openInspector = async (inspectorPort: number) => { - const url = `https://devtools.devprod.cloudflare.dev/js_app?theme=systemPreferred&ws=localhost:${inspectorPort}/ws`; +export const openInspector = async ( + inspectorPort: number, + worker: string | undefined +) => { + const query = new URLSearchParams(); + query.set("theme", "systemPreferred"); + query.set("ws", `localhost:${inspectorPort}/ws`); + if (worker) query.set("domain", worker); + const url = `https://devtools.devprod.cloudflare.dev/js_app?${query.toString()}`; const errorMessage = "Failed to open inspector.\nInspector depends on having a Chromium-based browser installed, maybe you need to install one?"; diff --git a/packages/wrangler/src/traverse-module-graph.ts b/packages/wrangler/src/traverse-module-graph.ts index d4db707943de..2454875435d0 100644 --- a/packages/wrangler/src/traverse-module-graph.ts +++ b/packages/wrangler/src/traverse-module-graph.ts @@ -49,5 +49,6 @@ export default async function traverseModuleGraph( bundleType, stop: undefined, sourceMapPath: undefined, + sourceMapMetadata: undefined, }; }