Skip to content

Commit d936eeb

Browse files
committed
docs: add Chrome extension information for TanStack Query devtools across multiple frameworks
1 parent 33d008b commit d936eeb

File tree

7 files changed

+22
-0
lines changed

7 files changed

+22
-0
lines changed

docs/framework/angular/devtools.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ id: devtools
33
title: Devtools
44
---
55

6+
> 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)
7+
68
## Enable devtools
79

810
The devtools help you debug and inspect your queries and mutations. You can enable the devtools by adding `withDevtools` to `provideTanStackQuery`.

docs/framework/react/community/community-projects.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,12 @@ A family of libraries for building building browser and gRPC-compatible HTTP API
3131

3232
Link: https://connectrpc.com/docs
3333

34+
## DevTools Chrome Extension
35+
36+
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.
37+
38+
Link: https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai
39+
3440
## GraphQL Code Generator
3541

3642
Generate React Query hooks from your GraphQL schema

docs/framework/react/devtools.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ Wave your hands in the air and shout hooray because React Query comes with dedic
77

88
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!
99

10+
> 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)
11+
1012
> 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)
1113
1214
> Note that since version 5, the dev tools support observing mutations as well.

docs/framework/solid/devtools.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ Wave your hands in the air and shout hooray because Solid Query comes with dedic
77

88
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!
99

10+
> 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)
11+
1012
## Install and Import the Devtools
1113

1214
The devtools are a separate package that you need to install:

docs/framework/svelte/devtools.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ id: devtools
33
title: Devtools
44
---
55

6+
> 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)
7+
68
## Install and Import the Devtools
79

810
The devtools are a separate package that you need to install:

docs/framework/vue/community/community-projects.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ There are lots of community projects that build on top of Vue Query and use it t
77

88
> Please note that these projects are entirely community maintained. If you have questions about these projects, please reach out to the project maintainers.
99
10+
## DevTools Chrome Extension
11+
12+
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.
13+
14+
Link: https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai
15+
1016
## Query Key factory
1117

1218
A library for creating typesafe standardized query keys, useful for cache management in `@tanstack/query`

docs/framework/vue/devtools.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ Wave your hands in the air and shout hooray because Vue Query comes with dedicat
77

88
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!
99

10+
> 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)
11+
1012
## Component based Devtools (Vue 3)
1113

1214
You can directly integrate the devtools component into your page using a dedicated package.

0 commit comments

Comments
 (0)