Support sourcemaps in DevTools (#3140)

* Support sourcemaps in DevTools * Support Miniflare source mapping
cloudflare · May 5, 2023 · 5fd080c · 5fd080c
1 parent 78530f4
commit 5fd080c
Show file tree

Hide file tree

Showing 31 changed files with 355 additions and 66 deletions.
diff --git a/.changeset/six-chicken-shave.md 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
@@ -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
@@ -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
@@ -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<Response> {
+		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
@@ -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
@@ -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
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
@@ -1,7 +1,7 @@
 From b2985a087935838fdf6a6f0dba21afed484849c7 Mon Sep 17 00:00:00 2001
 From: Samuel Macleod <smacleod@cloudflare.com>
 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
 
  <!-- [START badges] -->
 -- 
-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
@@ -1,7 +1,7 @@
 From cc7b688a2427d7506a2f4111887a5e243fb841d4 Mon Sep 17 00:00:00 2001
 From: Samuel Macleod <smacleod@cloudflare.com>
 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
@@ -1,7 +1,7 @@
 From a742a62c90c73c8c7e766eaaad9003200a447729 Mon Sep 17 00:00:00 2001
 From: Samuel Macleod <smacleod@cloudflare.com>
 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
 +</script>
  <body class="undocked" id="-blink-dev-tools">
 -- 
-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
@@ -1,7 +1,7 @@
 From 6c4581cd2e985e8e94aa3c9091faec45743da6e4 Mon Sep 17 00:00:00 2001
 From: bcoll <bcoll@cloudflare.com>
 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
@@ -1,7 +1,7 @@
 From b91cdddb4b2576149ba2c184f011073140f16e9b Mon Sep 17 00:00:00 2001
 From: Samuel Macleod <smacleod@cloudflare.com>
 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
@@ -1,7 +1,7 @@
 From 1a267cd3d143892fb0886907a75e3eb295b5b150 Mon Sep 17 00:00:00 2001
 From: bcoll <bcoll@cloudflare.com>
 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
@@ -1,7 +1,7 @@
 From 7312af32a23a62acc2f5661187ef90b01381c0de Mon Sep 17 00:00:00 2001
 From: bcoll <bcoll@cloudflare.com>
 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
@@ -1,7 +1,7 @@
 From 70e79d4a4e1821021d0df627a23d62ede6c558ba Mon Sep 17 00:00:00 2001
 From: Samuel Macleod <smacleod@cloudflare.com>
 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/...wrangler-devtools/patches/0009-Support-theme-url-parameter-for-forcing-the-theme-fr.patch b/...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 <smacleod@cloudflare.com>
 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/...wrangler-devtools/patches/0010-Basic-support-for-text-colour-in-dark-mode-in-browse.patch b/...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 <smacleod@cloudflare.com>
 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
  <meta http-equiv="Content-Security-Policy"
    content="object-src 'none'; script-src 'sha256-yYUen+rS0+K2iGZTeGzgeav9eHB7hosjob+ahEOInok=' 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">
 -- 
-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
@@ -1,7 +1,7 @@
 From 0091abac4c9631649485198cc36b49ebd4fd40dd Mon Sep 17 00:00:00 2001
 From: Samuel Macleod <smacleod@cloudflare.com>
 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
@@ -1,7 +1,7 @@
 From deeac26dadb8f2d7f5653c1994eed41f9e220af2 Mon Sep 17 00:00:00 2001
 From: bcoll <bcoll@cloudflare.com>
 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/...wrangler-devtools/patches/0013-DEVX-380-Hide-debugger-sidebar-and-disable-breakpoin.patch b/...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 <bcoll@cloudflare.com>
 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)