diff --git a/docs/framework/angular/devtools.md b/docs/framework/angular/devtools.md index 1787544ca1..f3d73b6987 100644 --- a/docs/framework/angular/devtools.md +++ b/docs/framework/angular/devtools.md @@ -3,6 +3,8 @@ id: devtools title: Devtools --- +> For Google Chrome users: A third-party Chrome extension is available for debugging TanStack Query directly in Chrome DevTools. This provides the same functionality as the framework-specific devtools packages. Check it out here: [TanStack Query DevTools](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai) + ## Enable devtools The devtools help you debug and inspect your queries and mutations. You can enable the devtools by adding `withDevtools` to `provideTanStackQuery`. diff --git a/docs/framework/react/community/community-projects.md b/docs/framework/react/community/community-projects.md index fbe8292b1c..5d71d6a3b7 100644 --- a/docs/framework/react/community/community-projects.md +++ b/docs/framework/react/community/community-projects.md @@ -31,6 +31,12 @@ A family of libraries for building building browser and gRPC-compatible HTTP API Link: https://connectrpc.com/docs +## DevTools Chrome Extension + +A Chrome browser extension that provides devtools for TanStack Query, allowing you to inspect and debug queries, mutations, and cache state directly in Chrome DevTools. + +Link: https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai + ## GraphQL Code Generator Generate React Query hooks from your GraphQL schema diff --git a/docs/framework/react/devtools.md b/docs/framework/react/devtools.md index 0208442911..6e0004293b 100644 --- a/docs/framework/react/devtools.md +++ b/docs/framework/react/devtools.md @@ -7,6 +7,8 @@ Wave your hands in the air and shout hooray because React Query comes with dedic When you begin your React Query journey, you'll want these devtools by your side. They help visualize all the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch! +> For Google Chrome users: A third-party Chrome extension is available for debugging TanStack Query directly in Chrome DevTools. This provides the same functionality as the framework-specific devtools packages. Check it out here: [TanStack Query DevTools](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai) + > For React Native users: A third-party native macOS app is available for debugging React Query in ANY js-based application. Monitor queries across devices in real-time. Check it out here: [rn-better-dev-tools](https://github.com/LovesWorking/rn-better-dev-tools) > Note that since version 5, the dev tools support observing mutations as well. diff --git a/docs/framework/solid/devtools.md b/docs/framework/solid/devtools.md index 9c0caf6537..4fe752a385 100644 --- a/docs/framework/solid/devtools.md +++ b/docs/framework/solid/devtools.md @@ -7,6 +7,8 @@ Wave your hands in the air and shout hooray because Solid Query comes with dedic When you begin your Solid Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of Solid Query and will likely save you hours of debugging if you find yourself in a pinch! +> For Google Chrome users: A third-party Chrome extension is available for debugging TanStack Query directly in Chrome DevTools. This provides the same functionality as the framework-specific devtools packages. Check it out here: [TanStack Query DevTools](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai) + ## Install and Import the Devtools The devtools are a separate package that you need to install: diff --git a/docs/framework/svelte/devtools.md b/docs/framework/svelte/devtools.md index db495f2c0e..56d2260344 100644 --- a/docs/framework/svelte/devtools.md +++ b/docs/framework/svelte/devtools.md @@ -3,6 +3,8 @@ id: devtools title: Devtools --- +> For Google Chrome users: A third-party Chrome extension is available for debugging TanStack Query directly in Chrome DevTools. This provides the same functionality as the framework-specific devtools packages. Check it out here: [TanStack Query DevTools](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai) + ## Install and Import the Devtools The devtools are a separate package that you need to install: diff --git a/docs/framework/vue/community/community-projects.md b/docs/framework/vue/community/community-projects.md index dd3dfa2306..687ac23ebb 100644 --- a/docs/framework/vue/community/community-projects.md +++ b/docs/framework/vue/community/community-projects.md @@ -7,6 +7,12 @@ There are lots of community projects that build on top of Vue Query and use it t > Please note that these projects are entirely community maintained. If you have questions about these projects, please reach out to the project maintainers. +## DevTools Chrome Extension + +A Chrome browser extension that provides devtools for TanStack Query, allowing you to inspect and debug queries, mutations, and cache state directly in Chrome DevTools. + +Link: https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai + ## Query Key factory A library for creating typesafe standardized query keys, useful for cache management in `@tanstack/query` diff --git a/docs/framework/vue/devtools.md b/docs/framework/vue/devtools.md index f242c033aa..3180fab8e4 100644 --- a/docs/framework/vue/devtools.md +++ b/docs/framework/vue/devtools.md @@ -7,6 +7,8 @@ Wave your hands in the air and shout hooray because Vue Query comes with dedicat When you begin your Vue Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of Vue Query and will likely save you hours of debugging if you find yourself in a pinch! +> For Google Chrome users: A third-party Chrome extension is available for debugging TanStack Query directly in Chrome DevTools. This provides the same functionality as the framework-specific devtools packages. Check it out here: [TanStack Query DevTools](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai) + ## Component based Devtools (Vue 3) You can directly integrate the devtools component into your page using a dedicated package.