Skip to content

docs: add Chrome extension information for TanStack Query devtools across multiple frameworks #9275

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 1 commit into from
Jun 19, 2025
Merged

docs: add Chrome extension information for TanStack Query devtools across multiple frameworks #9275

merged 1 commit into from
Jun 19, 2025

Conversation

dborysov
Copy link
Contributor

No description provided.

@Copilot Copilot AI review requested due to automatic review settings June 13, 2025 16:00
@github-actions github-actions bot added the documentation Improvements or additions to documentation label Jun 13, 2025
Copilot
Copilot AI reviewed Jun 13, 2025
View reviewed changes
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR updates the documentation to include information about a third-party Chrome extension for debugging TanStack Query DevTools across multiple frameworks.

  • Added a note and link for the Chrome extension on the Vue, Svelte, Solid, React, and Angular devtools pages.
  • Added a new section on community projects pages for both Vue and React documenting the Chrome extension.

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file
File Description
docs/framework/vue/devtools.md Added a Chrome extension info block at the top of the devtools documentation.
docs/framework/vue/community/community-projects.md Added a new "DevTools Chrome Extension" section describing the extension.
docs/framework/svelte/devtools.md Inserted a blockquote note for Chrome users to use the third-party extension.
docs/framework/solid/devtools.md Added a similar Chrome extension info block in the Solid devtools documentation.
docs/framework/react/devtools.md Inserted a Chrome extension note alongside existing documentation and React Native info.
docs/framework/react/community/community-projects.md Added a section with a Chrome extension description under community projects.
docs/framework/angular/devtools.md Added a Chrome extension note at the beginning of the Angular devtools documentation.

@TkDodo
Copy link
Collaborator

TkDodo commented Jun 19, 2025

anything you can do about the permissions? This reads quite scary:

Screenshot 2025-06-19 at 11 25 36

@TkDodo
Copy link
Collaborator

TkDodo commented Jun 19, 2025

also, is the extension itself open-source?

@TkDodo
Copy link
Collaborator

TkDodo commented Jun 19, 2025

also, FYI, we now dispatch custom events from the devtools that you could potentially pick up instead of relying on a global queryClient?

query/packages/query-devtools/src/Devtools.tsx

Lines 2524 to 2529 in 3e7d715

const event = new CustomEvent(DEV_TOOLS_EVENT, {
detail: { type, queryHash, metadata },
bubbles: true,
cancelable: true,
})
window.dispatchEvent(event)

@dborysov
Copy link
Contributor Author

Hi @TkDodo,

anything you can do about the permissions?

This warning is triggered because of "matches": ["<all_urls>"] in the content script configuration. Unfortunately, I didn't find any other way to access the client's JS context without these broad permissions. Also, I noticed that other similar extensions like React DevTools, Vue DevTools, Redux DevTools, Apollo DevTools require similar permissions

also, is the extension itself open-source?

Not yet, but I'm planning to open source it somewhere today or tomorrow

also, FYI, we now dispatch custom events from the devtools that you could potentially pick up instead of relying on a global queryClient?

I assume that it would mean that in order to use this extension, the user would first need to install the devtools to their app? If so, I would prefer not to follow this path for 2 reasons:

  1. It sounds weird to me that the user needs the npm-based devtools in order to make chrome-based devtools work
  2. I would like to support not only the most popular frameworks like Angular, React, etc., but also things like Lit or even vanilla js. But installing the devtools in such cases is not really straight forward

@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Jun 19, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit d936eeb.

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 36s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 11s View ↗

☁️ Nx Cloud last updated this comment at 2025-06-19 13:20:32 UTC

@TkDodo
Copy link
Collaborator

TkDodo commented Jun 19, 2025

I assume that it would mean that in order to use this extension, the user would first need to install the devtools to their app?

yeah that’s right, they would

Not yet, but I'm planning to open source it somewhere today or tomorrow

let me know once that’s done please 👍

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Jun 19, 2025

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@9275

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9275

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9275

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9275

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9275

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9275

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9275

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9275

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9275

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9275

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9275

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9275

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9275

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9275

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9275

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9275

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9275

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9275

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9275

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9275

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9275

commit: d936eeb

@dborysov
Copy link
Contributor Author

@TkDodo, Done ✅ - https://github.com/DeeCode-inc/tanstack-query-chrome-devtools

@TkDodo TkDodo merged commit 1a0ab99 into TanStack:main Jun 19, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

Copilot code review Copilot Copilot left review comments

Assignees
No one assigned
Labels
documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@dborysov @TkDodo