oslabs-beta/vueable-query

Chrome extension dev tool to monitor vue-query cache hits and refetching sequences

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