[vite-plugin] add `inspectorPort` option to plugin config #7929

dario-piotrowicz · 2025-01-28T10:25:38Z

add an inspectorPort option that allows developers to start a devTools inspector server
that allows them to debug their workers

Tests
- TODO (before merge)
- Tests included
- Tests not necessary because: I tried including a test but it doesn't seem to work reliably in CI, since this is a minor, currently undocumented feature it is probably fine to leave it untested for now and investigate properly a testing strategy (if necessary) later on
E2E Tests CI Job required? (Use "e2e" label or ask maintainer to run separately)
- I don't know
- Required
- Not required because: unrelated to wrangler
Public documentation
- TODO (before merge)
- Cloudflare docs PR(s):
- Documentation not necessary because: proper documentation for this will be implemented as part of Improve support for debugging in Vite plugin #7852

changeset-bot · 2025-01-28T10:25:43Z

🦋 Changeset detected

Latest commit: 22061c3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudflare/vite-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-01-28T10:30:11Z

A wrangler prerelease is available for testing. You can install this latest build in your project with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-wrangler-7929

You can reference the automatically updated head of this PR with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/prs/7929/npm-package-wrangler-7929

Or you can use npx with this latest build directly:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-wrangler-7929 dev path/to/script.js

Additional artifacts:

cloudflare-workers-bindings-extension:

wget https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-cloudflare-workers-bindings-extension-7929 -O ./cloudflare-workers-bindings-extension.0.0.0-v6b151cbe1.vsix && code --install-extension ./cloudflare-workers-bindings-extension.0.0.0-v6b151cbe1.vsix

create-cloudflare:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-create-cloudflare-7929 --no-auto-update

@cloudflare/kv-asset-handler:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-cloudflare-kv-asset-handler-7929

miniflare:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-miniflare-7929

@cloudflare/pages-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-cloudflare-pages-shared-7929

@cloudflare/unenv-preset:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-cloudflare-unenv-preset-7929

@cloudflare/vite-plugin:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-cloudflare-vite-plugin-7929

@cloudflare/vitest-pool-workers:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-cloudflare-vitest-pool-workers-7929

@cloudflare/workers-editor-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-cloudflare-workers-editor-shared-7929

@cloudflare/workers-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-cloudflare-workers-shared-7929

@cloudflare/workflows-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13463158549/npm-package-cloudflare-workflows-shared-7929

Note that these links will no longer work once the GitHub Actions artifact expires.

wrangler@3.109.2 includes the following runtime dependencies:

Package	Constraint	Resolved
`miniflare`	workspace:*	3.20250214.0
`workerd`	1.20250214.0	1.20250214.0
`workerd --version`	1.20250214.0	2025-02-14

Please ensure constraints are pinned, and miniflare/workerd minor versions match.

dario-piotrowicz · 2025-01-28T10:26:29Z

packages/vite-plugin-cloudflare/playground/worker/__tests__/inspector.spec.ts

+import { expect, test } from "vitest";
+
+test("starts a devTools inspector server on inspectorPort 9123", async () => {
+	const inspectorJsonResponse = await fetch("http://localhost:9123/json");


I am not sure about this test, it is quite nice in my opinion, but relying on port 9123 being available might cause the test in CI to be less reliable 😕

No yeah.... this is not working well in CI at all... /~https://github.com/cloudflare/workers-sdk/actions/runs/13008386588/job/36280652973?pr=7929#step:5:1461

I might just need to remove it 😓

packages/vite-plugin-cloudflare/src/plugin-config.ts

jamesopstad

I'm approving this pending the decision about whether it should be enabled by default.

It does bother me that you see lots of options in chrome://inspect and it's hard to tell which is the actual user Worker. Wrangler has a much nicer experience here that only exposes the user Worker. Do you think we should be making changes to Miniflare to improve this?

packages/vite-plugin-cloudflare/src/plugin-config.ts

.changeset/polite-walls-bathe.md

dario-piotrowicz · 2025-01-29T10:34:22Z

It does bother me that you see lots of options in chrome://inspect and it's hard to tell which is the actual user Worker. Wrangler has a much nicer experience here that only exposes the user Worker. Do you think we should be making changes to Miniflare to improve this?

Yes, this new option is just the first step/prerequisite for having a much nicer experience later on (@penalosa had some ideas here I think), as I mentioned in the PR description this is not a solution to #7852, but more of a preliminary change that will be needed anyways and that for the time being does enable us to easily do some extra debugging when needed without needing to patch the plugin

remove `inspectorPort` testing (which does not work well in CI)

dario-piotrowicz · 2025-02-21T18:42:33Z

packages/vite-plugin-cloudflare/src/constants.ts

@@ -4,3 +4,5 @@ export const ASSET_WORKERS_COMPATIBILITY_DATE = "2024-10-04";
 // TODO: add `Text` and `Data` types (resolves /~https://github.com/cloudflare/workers-sdk/issues/8022)
 export const MODULE_TYPES = ["CompiledWasm"] as const;
 export type ModuleType = (typeof MODULE_TYPES)[number];
+
+export const DEFAULT_INSPECTOR_PORT = 9229;


Note: this is another instance in which a shared package in the monorepo would make sense to me, so that all packages could share the same constant for the default inspector

dario-piotrowicz requested review from a team as code owners January 28, 2025 10:25

dario-piotrowicz commented Jan 28, 2025

View reviewed changes

dario-piotrowicz requested a review from jamesopstad January 28, 2025 10:31

dario-piotrowicz changed the title ~~add inspectorPort option to plugin config~~ [vite-plugin] add inspectorPort option to plugin config Jan 28, 2025

dario-piotrowicz added the vite-plugin Relating to the `@cloudflare/vite-plugin` package label Jan 28, 2025

dario-piotrowicz force-pushed the dario/vite-plugin/inspectorPort branch 2 times, most recently from 794ee3e to 0098664 Compare January 28, 2025 15:57

jamesopstad approved these changes Jan 29, 2025

View reviewed changes

packages/vite-plugin-cloudflare/src/plugin-config.ts Outdated Show resolved Hide resolved

packages/vite-plugin-cloudflare/src/plugin-config.ts Outdated Show resolved Hide resolved

.changeset/polite-walls-bathe.md Outdated Show resolved Hide resolved

dario-piotrowicz force-pushed the dario/vite-plugin/inspectorPort branch from 7632a00 to 73f917e Compare February 12, 2025 17:01

dario-piotrowicz added 2 commits February 21, 2025 18:28

add inspectorPort option to plugin config

1eda6a5

fixup! add inspectorPort option to plugin config

ecd31b1

remove `inspectorPort` testing (which does not work well in CI)

dario-piotrowicz force-pushed the dario/vite-plugin/inspectorPort branch from 73f917e to 6253b6c Compare February 21, 2025 18:39

add a DEFAULT_INSPECTOR_PORT set to 9229

22061c3

dario-piotrowicz force-pushed the dario/vite-plugin/inspectorPort branch from 6253b6c to 22061c3 Compare February 21, 2025 18:41

dario-piotrowicz commented Feb 21, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[vite-plugin] add `inspectorPort` option to plugin config #7929

[vite-plugin] add `inspectorPort` option to plugin config #7929

dario-piotrowicz commented Jan 28, 2025 •

edited

Loading

changeset-bot bot commented Jan 28, 2025 •

edited

Loading

github-actions bot commented Jan 28, 2025 •

edited

Loading

dario-piotrowicz Jan 28, 2025

dario-piotrowicz Jan 28, 2025

jamesopstad left a comment

dario-piotrowicz commented Jan 29, 2025

dario-piotrowicz Feb 21, 2025

[vite-plugin] add inspectorPort option to plugin config #7929

Are you sure you want to change the base?

[vite-plugin] add inspectorPort option to plugin config #7929

Conversation

dario-piotrowicz commented Jan 28, 2025 • edited Loading

changeset-bot bot commented Jan 28, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Jan 28, 2025 • edited Loading

dario-piotrowicz Jan 28, 2025

Choose a reason for hiding this comment

dario-piotrowicz Jan 28, 2025

Choose a reason for hiding this comment

jamesopstad left a comment

Choose a reason for hiding this comment

dario-piotrowicz commented Jan 29, 2025

dario-piotrowicz Feb 21, 2025

Choose a reason for hiding this comment

[vite-plugin] add `inspectorPort` option to plugin config #7929

[vite-plugin] add `inspectorPort` option to plugin config #7929

dario-piotrowicz commented Jan 28, 2025 •

edited

Loading

changeset-bot bot commented Jan 28, 2025 •

edited

Loading

github-actions bot commented Jan 28, 2025 •

edited

Loading