fix: path handling in react devtools #29199

Jack-Works · 2024-05-21T15:47:24Z

Summary

Fix how devtools handles URLs. It

cannot handle relative source map URLs //# sourceMappingURL=x.map
cannot recognize Windows style URLs

How did you test this change?

works on my side

vercel · 2024-05-21T15:47:27Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compiler-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 3, 2024 7:36am

packages/react-devtools-shared/src/utils.js

packages/react-devtools-shared/src/symbolicateSource.js

Jack-Works · 2024-05-28T06:26:56Z

hi please review this again thanks cc @hoxyq

hoxyq · 2024-05-28T18:59:37Z

hi please review this again thanks cc @hoxyq

Hey, I don't see anything wrong with this approach, but I need to test it manually, for which I don't have time at the moment.
Can I ask you to add 1-2 test cases for symbolicateSource function, which will demonstrate that this implementation fixes the cases, which are mentioned in the description of this PR?

Jack-Works · 2024-05-29T08:36:47Z

hi please review this again thanks cc @hoxyq

Hey, I don't see anything wrong with this approach, but I need to test it manually, for which I don't have time at the moment. Can I ask you to add 1-2 test cases for symbolicateSource function, which will demonstrate that this implementation fixes the cases, which are mentioned in the description of this PR?

Hi! Current symbolicateSource (or the component using it) doesn't have any test cases, so I have no idea where to add it

hoxyq · 2024-05-31T14:56:40Z

hi please review this again thanks cc @hoxyq

Hey, I don't see anything wrong with this approach, but I need to test it manually, for which I don't have time at the moment. Can I ask you to add 1-2 test cases for symbolicateSource function, which will demonstrate that this implementation fixes the cases, which are mentioned in the description of this PR?

Hi! Current symbolicateSource (or the component using it) doesn't have any test cases, so I have no idea where to add it

You can add it to packages/react-devtools-shared/src/__tests__. You would need to export symbolicateSource function and use it it in your Jest test cases.

Jack-Works · 2024-06-09T04:15:04Z

hi please review this again thanks cc @hoxyq

Hey, I don't see anything wrong with this approach, but I need to test it manually, for which I don't have time at the moment. Can I ask you to add 1-2 test cases for symbolicateSource function, which will demonstrate that this implementation fixes the cases, which are mentioned in the description of this PR?

Hi! Current symbolicateSource (or the component using it) doesn't have any test cases, so I have no idea where to add it

You can add it to packages/react-devtools-shared/src/__tests__. You would need to export symbolicateSource function and use it it in your Jest test cases.

hello! How can I run the test? I tried yarn test --testPathPattern=react-devtools-shared but 0 tests hit

hoxyq · 2024-06-10T10:44:58Z

hi please review this again thanks cc @hoxyq

Hey, I don't see anything wrong with this approach, but I need to test it manually, for which I don't have time at the moment. Can I ask you to add 1-2 test cases for symbolicateSource function, which will demonstrate that this implementation fixes the cases, which are mentioned in the description of this PR?

Hi! Current symbolicateSource (or the component using it) doesn't have any test cases, so I have no idea where to add it

You can add it to packages/react-devtools-shared/src/__tests__. You would need to export symbolicateSource function and use it it in your Jest test cases.

hello! How can I run the test? I tried yarn test --testPathPattern=react-devtools-shared but 0 tests hit

Try running this from root folder - yarn test --build --project=devtools -r=experimental --ci packages/react-devtools-shared/src/__tests__/<your-test-name>

Jack-Works · 2024-07-01T15:57:54Z

hi @hoxyq I have added tests, please take a look thanks!

hoxyq

Thanks, looks good. Left some formatting suggestions and 1 question.

I need to test it manually before merging, will keep you updated

packages/react-devtools-shared/src/symbolicateSource.js

hoxyq · 2024-07-04T14:34:44Z

Thanks!

Full list of changes: * refactor: data source for errors and warnings tracking is now in Store ([hoxyq](https://github.com/hoxyq) in [#31010](#31010)) * fix: consider alternate as a key for componentLogsEntry when inspecting raw fiber instance ([hoxyq](https://github.com/hoxyq) in [#31009](#31009)) * Fix: profiling crashes #30661 #28838 ([EdmondChuiHW](https://github.com/EdmondChuiHW) in [#31024](#31024)) * chore: remove using local storage for persisting console settings on the frontend ([hoxyq](https://github.com/hoxyq) in [#31002](#31002)) * feat: display message if user ended up opening hook script ([hoxyq](https://github.com/hoxyq) in [#31000](#31000)) * feat: expose installHook with settings argument from react-devtools-core/backend ([hoxyq](https://github.com/hoxyq) in [#30987](#30987)) * chore: remove settings manager from react-devtools-core ([hoxyq](https://github.com/hoxyq) in [#30986](#30986)) * feat[react-devtools/extension]: use chrome.storage to persist settings across sessions ([hoxyq](https://github.com/hoxyq) in [#30636](#30636)) * refactor[react-devtools]: propagate settings from global hook object to frontend ([hoxyq](https://github.com/hoxyq) in [#30610](#30610)) * chore[react-devtools]: extract some utils into separate modules to unify implementations ([hoxyq](https://github.com/hoxyq) in [#30597](#30597)) * refactor[react-devtools]: move console patching to global hook ([hoxyq](https://github.com/hoxyq) in [#30596](#30596)) * refactor[react-devtools]: remove browserTheme from ConsolePatchSettings ([hoxyq](https://github.com/hoxyq) in [#30566](#30566)) * feat[react-devtools]: add settings to global hook object ([hoxyq](https://github.com/hoxyq) in [#30564](#30564)) * fix: add Error prefix to Error objects names ([hoxyq](https://github.com/hoxyq) in [#30969](#30969)) * Add enableComponentPerformanceTrack Flag ([sebmarkbage](https://github.com/sebmarkbage) in [#30960](#30960)) * fix[rdt/fiber/renderer.js]: getCurrentFiber can be injected as null ([hoxyq](https://github.com/hoxyq) in [#30968](#30968)) * disable `enableSiblingPrerendering` in experimental channel ([gnoff](https://github.com/gnoff) in [#30952](#30952)) * refactor[react-devtools]: initialize renderer interface early ([hoxyq](https://github.com/hoxyq) in [#30946](#30946)) * Start prerendering Suspense retries immediately ([acdlite](https://github.com/acdlite) in [#30934](#30934)) * refactor[Agent/Store]: Store to send messages only after Agent is initialized ([hoxyq](https://github.com/hoxyq) in [#30945](#30945)) * refactor[RendererInterface]: expose onErrorOrWarning and getComponentStack ([hoxyq](https://github.com/hoxyq) in [#30931](#30931)) * Implement getComponentStack and onErrorOrWarning for replayed Flight logs ([sebmarkbage](https://github.com/sebmarkbage) in [#30930](#30930)) * Use Unicode Atom Symbol instead of Atom Emoji ([sebmarkbage](https://github.com/sebmarkbage) in [#30832](#30832)) * Improve Layering Between Console and Renderer ([sebmarkbage](https://github.com/sebmarkbage) in [#30925](#30925)) * Add Map for Server Component Logs ([sebmarkbage](https://github.com/sebmarkbage) in [#30905](#30905)) * Delete fiberToFiberInstanceMap ([sebmarkbage](https://github.com/sebmarkbage) in [#30900](#30900)) * Add Flight Renderer ([sebmarkbage](https://github.com/sebmarkbage) in [#30906](#30906)) * Refactor Error / Warning Count Tracking ([sebmarkbage](https://github.com/sebmarkbage) in [#30899](#30899)) * [flow] Upgrade Flow to 0.245.2 ([SamChou19815](https://github.com/SamChou19815) in [#30919](#30919)) * Separate RDT Fusebox into single-panel entry points ([huntie](https://github.com/huntie) in [#30708](#30708)) * Build Updater List from the Commit instead of Map ([sebmarkbage](https://github.com/sebmarkbage) in [#30897](#30897)) * Simplify Context Change Tracking in Profiler ([sebmarkbage](https://github.com/sebmarkbage) in [#30896](#30896)) * Remove use of .alternate in root and recordProfilingDurations ([sebmarkbage](https://github.com/sebmarkbage) in [#30895](#30895)) * Handle reordered contexts in Profiler ([sebmarkbage](https://github.com/sebmarkbage) in [#30887](#30887)) * Refactor Forcing Fallback / Error of Suspense / Error Boundaries ([sebmarkbage](https://github.com/sebmarkbage) in [#30870](#30870)) * Avoid getFiberIDUnsafe in debug() Helper ([sebmarkbage](https://github.com/sebmarkbage) in [#30878](#30878)) * Include some Filtered Fiber Instances ([sebmarkbage](https://github.com/sebmarkbage) in [#30865](#30865)) * Track root instances in a root Map ([sebmarkbage](https://github.com/sebmarkbage) in [#30875](#30875)) * Track all public HostInstances in a Map ([sebmarkbage](https://github.com/sebmarkbage) in [#30831](#30831)) * Support VirtualInstances in findAllCurrentHostInstances ([sebmarkbage](https://github.com/sebmarkbage) in [#30853](#30853)) * Add Filtering of Environment Names ([sebmarkbage](https://github.com/sebmarkbage) in [#30850](#30850)) * Support secondary environment name when it changes ([sebmarkbage](https://github.com/sebmarkbage) in [#30842](#30842)) * Increase max payload for websocket in standalone app ([runeb](https://github.com/runeb) in [#30848](#30848)) * Filter Server Components ([sebmarkbage](https://github.com/sebmarkbage) in [#30839](#30839)) * Track virtual instances on the tracked path for selections ([sebmarkbage](https://github.com/sebmarkbage) in [#30802](#30802)) * Remove displayName from inspected data ([sebmarkbage](https://github.com/sebmarkbage) in [#30841](#30841)) * chore[react-devtools/hook]: remove unused native values ([hoxyq](https://github.com/hoxyq) in [#30827](#30827)) * chore[react-devtools/extensions]: remove unused storage permission ([hoxyq](https://github.com/hoxyq) in [#30826](#30826)) * fix[react-devtools/extensions]: fixed tabs API calls and displaying restricted access popup ([hoxyq](https://github.com/hoxyq) in [#30825](#30825)) * feat[react-devtools]: support Manifest v3 for Firefox extension ([hoxyq](https://github.com/hoxyq) in [#30824](#30824)) * Reconcile Fibers Against Previous Children Instances ([sebmarkbage](https://github.com/sebmarkbage) in [#30822](#30822)) * Remove findCurrentFiberUsingSlowPathByFiberInstance ([sebmarkbage](https://github.com/sebmarkbage) in [#30818](#30818)) * Track Tree Base Duration of Virtual Instances ([sebmarkbage](https://github.com/sebmarkbage) in [#30817](#30817)) * Use Owner Stacks to Implement View Source of a Server Component ([sebmarkbage](https://github.com/sebmarkbage) in [#30798](#30798)) * Make function inspection instant ([sebmarkbage](https://github.com/sebmarkbage) in [#30786](#30786)) * Make Functions Clickable to Jump to Definition ([sebmarkbage](https://github.com/sebmarkbage) in [#30769](#30769)) * Support REACT_LEGACY_ELEMENT_TYPE for formatting JSX ([sebmarkbage](https://github.com/sebmarkbage) in [#30779](#30779)) * Find owners from the parent path that matches the Fiber or ReactComponentInfo ([sebmarkbage](https://github.com/sebmarkbage) in [#30717](#30717)) * [Flight/DevTools] Pass the Server Component's "key" as Part of the ReactComponentInfo ([sebmarkbage](https://github.com/sebmarkbage) in [#30703](#30703)) * Hide props section if it is null ([sebmarkbage](https://github.com/sebmarkbage) in [#30696](#30696)) * Support Server Components in Tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30684](#30684)) * fix[react-devtools/InspectedElement]: fixed border stylings when some of the panels are not rendered ([hoxyq](https://github.com/hoxyq) in [#30676](#30676)) * Compute new reordered child set from the instance tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30668](#30668)) * Unmount instance by walking the instance tree instead of the fiber tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30665](#30665)) * Further Refactoring of Unmounts ([sebmarkbage](https://github.com/sebmarkbage) in [#30658](#30658)) * Remove lodash.throttle ([sebmarkbage](https://github.com/sebmarkbage) in [#30657](#30657)) * Unmount by walking previous nodes no longer in the new tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30644](#30644)) * Build up DevTools Instance Shadow Tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30625](#30625)) * chore[packages/react-devtools]: remove unused index.js ([hoxyq](https://github.com/hoxyq) in [#30579](#30579)) * Track DOM nodes to Fiber map for HostHoistable Resources ([sebmarkbage](https://github.com/sebmarkbage) in [#30590](#30590)) * Rename mountFiberRecursively/updateFiberRecursively ([sebmarkbage](https://github.com/sebmarkbage) in [#30586](#30586)) * Allow Highlighting/Inspect HostSingletons/Hoistables and Resources ([sebmarkbage](https://github.com/sebmarkbage) in [#30584](#30584)) * chore[react-devtools]: add global for native and use it to fork backend implementation ([hoxyq](https://github.com/hoxyq) in [#30533](#30533)) * Enable pointEvents while scrolling ([sebmarkbage](https://github.com/sebmarkbage) in [#30560](#30560)) * Make Element Inspection Feel Snappy ([sebmarkbage](https://github.com/sebmarkbage) in [#30555](#30555)) * Track the parent DevToolsInstance while mounting a tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30542](#30542)) * Add DevToolsInstance to Store Stateful Information ([sebmarkbage](https://github.com/sebmarkbage) in [#30517](#30517)) * Implement "best renderer" by taking the inner most matched node ([sebmarkbage](https://github.com/sebmarkbage) in [#30494](#30494)) * Rename NativeElement to HostInstance in the Bridge ([sebmarkbage](https://github.com/sebmarkbage) in [#30491](#30491)) * Rename Fiber to Element in the Bridge Protocol and RendererInterface ([sebmarkbage](https://github.com/sebmarkbage) in [#30490](#30490)) * Stop filtering owner stacks ([sebmarkbage](https://github.com/sebmarkbage) in [#30438](#30438)) * [Fiber] Call life-cycles with a react-stack-bottom-frame stack frame ([sebmarkbage](https://github.com/sebmarkbage) in [#30429](#30429)) * [Flight] Prefix owner stacks added to the console.log with the current stack ([sebmarkbage](https://github.com/sebmarkbage) in [#30427](#30427)) * [BE] switch to hermes parser for prettier ([kassens](https://github.com/kassens) in [#30421](#30421)) * Implement Owner Stacks ([sebmarkbage](https://github.com/sebmarkbage) in [#30417](#30417)) * [BE] upgrade prettier to 3.3.3 ([kassens](https://github.com/kassens) in [#30420](#30420)) * [ci] Add yarn_test_build job to gh actions * [Fizz] Refactor Component Stack Nodes ([sebmarkbage](https://github.com/sebmarkbage) in [#30298](#30298)) * Print component stacks as error objects to get source mapping ([sebmarkbage](https://github.com/sebmarkbage) in [#30289](#30289)) * Upgrade flow to 0.235.0 ([kassens](https://github.com/kassens) in [#30118](#30118)) * fix: path handling in react devtools ([Jack-Works](https://github.com/Jack-Works) in [#29199](#29199))

Jack-Works added 2 commits May 21, 2024 23:42

fix: path handling in react devtools

9137d4c

fix: prettier

7e38c38

facebook-github-bot added the CLA Signed label May 21, 2024

vercel bot deployed to Preview May 21, 2024 15:49 View deployment

hoxyq reviewed May 22, 2024

View reviewed changes

packages/react-devtools-shared/src/utils.js Outdated Show resolved Hide resolved

packages/react-devtools-shared/src/symbolicateSource.js Outdated Show resolved Hide resolved

resolve review

b211182

vercel bot deployed to Preview May 22, 2024 16:30 View deployment

Jack-Works mentioned this pull request May 28, 2024

bug: Not working in NextJs 14.2.2 infi-pc/locatorjs#153

Open

3 tasks

Jack-Works added 3 commits July 1, 2024 23:43

test: add test

6827c5d

Merge branch 'main' into devtools-url

330d6a2

fix: prettier

954530f

vercel bot deployed to Preview July 1, 2024 15:53 View deployment

hoxyq approved these changes Jul 2, 2024

View reviewed changes

chore: resolve review

1345786

vercel bot deployed to Preview July 3, 2024 07:36 View deployment

hoxyq merged commit 3da2616 into facebook:main Jul 4, 2024
139 checks passed

Jack-Works deleted the devtools-url branch July 7, 2024 08:42

eps1lon mentioned this pull request Jul 16, 2024

Update React from dfd30974ab-20240613 to 01172397-20240716 vercel/next.js#67810

Closed

This was referenced Jul 25, 2024

Update React from 6230622a1a-20240610 to 76002254-20240724 vercel/next.js#68149

Merged

Update React from 6230622a1a-20240610 to 3208e73e-20240730 vercel/next.js#68330

Merged

hoxyq mentioned this pull request Sep 25, 2024

React DevTools 5.3.1 -> 6.0.0 #31058

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: path handling in react devtools #29199

fix: path handling in react devtools #29199

Jack-Works commented May 21, 2024

vercel bot commented May 21, 2024 •

edited

Loading

Jack-Works commented May 28, 2024

hoxyq commented May 28, 2024

Jack-Works commented May 29, 2024

hoxyq commented May 31, 2024

Jack-Works commented Jun 9, 2024

hoxyq commented Jun 10, 2024

Jack-Works commented Jul 1, 2024

hoxyq left a comment

hoxyq commented Jul 4, 2024

fix: path handling in react devtools #29199

fix: path handling in react devtools #29199

Conversation

Jack-Works commented May 21, 2024

Summary

How did you test this change?

vercel bot commented May 21, 2024 • edited Loading

Jack-Works commented May 28, 2024

hoxyq commented May 28, 2024

Jack-Works commented May 29, 2024

hoxyq commented May 31, 2024

Jack-Works commented Jun 9, 2024

hoxyq commented Jun 10, 2024

Jack-Works commented Jul 1, 2024

hoxyq left a comment

Choose a reason for hiding this comment

hoxyq commented Jul 4, 2024

vercel bot commented May 21, 2024 •

edited

Loading