feat(dev): add TanStack Devtools source inspector in dev builds#3218
Merged
Conversation
Adds @tanstack/devtools-vite to the renderer, gated to dev mode, with injectSource enabled. This restores the "Go to Source" helper: an AST transform that stamps every JSX element with data-tsd-source="<file>:<line>:<col>", so you can trace any rendered element back to its source file and line. Generated-By: PostHog Code Task-Id: 8b7d16a6-3479-4232-981d-5d78077ce759
|
Merging to
After your PR is submitted to the merge queue, this comment will be automatically updated with its status. If the PR fails, failure details will also be posted here |
|
React Doctor found no issues in the changed files. 🎉 Reviewed by React Doctor for commit |
Contributor
|
Reviews (1): Last reviewed commit: "feat(dev): add TanStack Devtools source ..." | Re-trigger Greptile |
jonathanlab
approved these changes
Jul 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The dev-only "Go to Source" helper went missing locally — the one that let you hold a modifier to inspect an element and see exactly which file/line it renders from (via a
data-tsd-sourceattribute on every element). Raised in a Slack thread; folks missed it and confirmed it's fine to add back.Changes
Adds
@tanstack/devtools-viteto the Electron renderer, gated to dev mode, withinjectSourceenabled. During dev it runs an AST transform that stamps every JSX element withdata-tsd-source="<file>:<line>:<col>". Read it in the Elements panel (or hold the inspector hotkey) to jump straight to the source. Excluded entirely from production builds.How did you test this?
data-tsd-source="…/Comp.tsx:2:10"on the emitted elements.electron-vite buildevaluates the full config and completes the main bundle with the change in place. (The preload step fails in this sandbox on an unbuilt workspace package; I reproduced the identical failure on a clean tree without this change, so it's pre-existing and unrelated.)Automatic notifications
Created with PostHog from a Slack thread