Skip to content

Conversation

@zaidhaan
Copy link

🎯 Changes

This PR adds functionality to configure the hotkey that triggers the inspector by introducing inspectHotkey into the devtools config.

This was discussed a bit in Discord, so I figured I'd implement this myself as I was growing a little impatient as I frequently use Cmd+Shift+4 on macOS to take screenshots, which conflicts with the default inspector hotkey.

Now we've got two subsections within the Keyboard section, as seen in the screenshot below (one to open/close devtools, one to trigger the inspector):

image

Q: Why is there a modifier called "Ctrl or Meta"?

This is because the hotkey behavior originally operated on logic like isShiftHeld && (isCtrlHeld || isMetaHeld). This isn't exactly easily representable using a combination of modifiers.

One possibility would be to allow for a multiple distinct sets of modifiers to be configured, this way we could have one for Meta + Shift and one for Ctrl + Shift. However, this would be not only be complex to implement, but it would also require a more complex configuration UI.

As such, the "Ctrl or Meta" modifier was used to cater to this.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

@changeset-bot
Copy link

changeset-bot bot commented Nov 29, 2025

🦋 Changeset detected

Latest commit: 4f051d7

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

This PR includes changesets to release 4 packages
Name Type
@tanstack/devtools Minor
@tanstack/react-devtools Patch
@tanstack/solid-devtools Patch
@tanstack/vue-devtools 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

@nx-cloud
Copy link

nx-cloud bot commented Dec 1, 2025

View your CI Pipeline Execution ↗ for commit 4f051d7

Command Status Duration Result
nx affected --targets=test:format,test:eslint,t... ✅ Succeeded 56s View ↗
nx run-many --targets=build --exclude=examples/** ✅ Succeeded 10s View ↗

☁️ Nx Cloud last updated this comment at 2025-12-01 11:02:24 UTC

@pkg-pr-new
Copy link

pkg-pr-new bot commented Dec 1, 2025

More templates

@tanstack/devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools@275

@tanstack/devtools-client

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-client@275

@tanstack/devtools-ui

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-ui@275

@tanstack/devtools-utils

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-utils@275

@tanstack/devtools-vite

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-vite@275

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-bus@275

@tanstack/devtools-event-client

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-client@275

@tanstack/react-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/react-devtools@275

@tanstack/solid-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/solid-devtools@275

@tanstack/vue-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/vue-devtools@275

commit: 4f051d7

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.

1 participant