Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support sourcemaps in DevTools #3140

Merged
merged 6 commits into from
May 5, 2023
Merged

Conversation

penalosa
Copy link
Contributor

@penalosa penalosa commented May 4, 2023

What this PR solves / how to test:
This PR enables support for sourcemaps in DevTools when using Wrangler.
It works by intercepting CDP messages from the DevTools frontend and responding in Wrangler. In particular:

  • Network.loadNetworkResponse is intercepted to provide DevTools with the right sourcemap
  • Debugger.scriptParsed is intercepted after workerd in order to give schemes to URLs returned from workerd (which allows DevTools to treat modules as file paths with folders)

Two additional DevTools patches are also included. 14 is a more-compliant ping implementation (thanks @mrbbot!) and 15 integrates with the Wrangler changes to enable sourcemaps, and enables some additional DevTools features to improve the experience of the Sources panel.

To test, run this branch build of Wrangler against a worker (wrangler dev or wrangler dev --experimental-local), and open up DevTools by pressing D. Replace the DevTools domain with the preview build of DevTools from this PR (currently https://ca712237.cloudflare-devtools.pages.dev/).

Screenshot 2023-05-04 at 03 48 02 Screenshot 2023-05-04 at 03 47 19 Screenshot 2023-05-04 at 03 46 32

Author has included the following, where applicable:

  • [ ] CI Tests
  • Manual testing with Wrangler fixtures
    • worker-app with wrangler dev and wrangler dev --experimental-local
    • no-bundle-import with wrangler dev --no-bundle and wrangler dev --experimental-local --no-bundle
    • sites-app with wrangler dev and wrangler dev --experimental-local
  • Manual testing with https://cloudflareworkers.com
  • Manual testing with the Cloudflare dashboard
  • Changeset (Changeset guidelines)

Reviewer has performed the following, where applicable:

  • Checked for inclusion of relevant tests
  • Checked for inclusion of a relevant changeset
  • Checked for creation of associated docs updates
  • Manually pulled down the changes and spot-tested

@penalosa penalosa requested review from a team as code owners May 4, 2023 08:42
@changeset-bot
Copy link

changeset-bot bot commented May 4, 2023

🦋 Changeset detected

Latest commit: 38f5346

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

This PR includes changesets to release 1 package
Name Type
wrangler Minor

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
Copy link
Contributor

github-actions bot commented May 4, 2023

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/4896386811/npm-package-wrangler-3140

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

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

Or you can use npx with this latest build directly:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/4896386811/npm-package-wrangler-3140 dev path/to/script.js
Additional artifacts:
npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/4896386811/npm-package-cloudflare-pages-shared-3140

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

@codecov
Copy link

codecov bot commented May 4, 2023

Codecov Report

Merging #3140 (38f5346) into main (78530f4) will decrease coverage by 0.21%.
The diff coverage is 15.55%.

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #3140      +/-   ##
==========================================
- Coverage   74.84%   74.63%   -0.21%     
==========================================
  Files         179      179              
  Lines       10858    10899      +41     
  Branches     2880     2894      +14     
==========================================
+ Hits         8127     8135       +8     
- Misses       2731     2764      +33     
Impacted Files Coverage Δ
packages/wrangler/src/dev/local.tsx 21.61% <0.00%> (-0.08%) ⬇️
packages/wrangler/src/dev/remote.tsx 7.69% <0.00%> (-0.05%) ⬇️
packages/wrangler/src/traverse-module-graph.ts 100.00% <ø> (ø)
packages/wrangler/src/inspect.ts 5.32% <7.69%> (+0.02%) ⬆️
packages/wrangler/src/bundle.ts 93.39% <100.00%> (ø)
packages/wrangler/src/dev/start-server.ts 67.46% <100.00%> (+0.39%) ⬆️
packages/wrangler/src/entry.ts 98.41% <100.00%> (+0.01%) ⬆️

... and 2 files with indirect coverage changes

Copy link
Contributor

@mrbbot mrbbot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! 😃 A few comments/questions...

fixtures/worker-ts/tsconfig.json Outdated Show resolved Hide resolved
packages/wrangler/src/bundle.ts Outdated Show resolved Hide resolved
packages/wrangler/src/inspect.ts Show resolved Hide resolved
Copy link
Contributor

@mrbbot mrbbot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this have a changeset?

@penalosa penalosa force-pushed the penalosa/support-sourcemaps-devtools branch from 3b5f611 to 0847c11 Compare May 5, 2023 18:08
@penalosa penalosa merged commit 5fd080c into main May 5, 2023
12 checks passed
@penalosa penalosa deleted the penalosa/support-sourcemaps-devtools branch May 5, 2023 18:45
@github-actions github-actions bot mentioned this pull request May 5, 2023
@ssttevee ssttevee mentioned this pull request Aug 11, 2023
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants