Vueable-query
Vueable Query is an easy to use Chrome Extension that provides visualization and performance metrics for programs using Tanstack Query for Vue.
Installation
Install Vueable Query from the Chrome Web Store
Developer Installation
- Clone this repository
- Run
npm install
then npm run build
to build the extension to the dist folder
- Then load the dist folder in Google Chrome as an unpacked Chrome Extension
Run Demo Program
- Clone this repository
- Run
npm run demo
- Navigate to localhost:5173
- Open the Chrome developer tool and select Vueable Query Panel
Features
- A timeline to visualize the query history
- A text panel to display all relevant queries under their query key.
- Highlighting on click and hover
- Tooltip displayed on hover
Usage
- View a program running Tanstack Query for Vue or load up the example program above
- Open up the Dev Tools for Chrome
- Navigate to Vueable Query pane
- Hover over a timeline point to view information
- Click a query to highlight it on both views
- Expand the text entry to see more details