feat(console-query-debugger): create console query debugger

[piggggggggy]

Skip Review (optional)

• Minor changes that don't affect the functionality (e.g. style, chore, ci, test, docs)
• Previously reviewed in feature branch, further review is not mandatory
• Self-merge allowed for solo developers or urgent changes

Description (optional)

Add Vue Query Console Debugger for Enhanced Developer Observability
This PR introduces a custom in-browser console-based debugging utility for inspecting the internal state of Vue Query.

Features

• Global debug tool exposed as window.QUERY_DEBUG
• dump() prints a clean table of all queries, showing:
  • appContext (admin or workspace)
  • resourceIdentifier (dashboard/widget/etc.)
  • contextKey (additional context namespace)
  • params (serialized query params)
  • observers, isActive, and more
• log() prints all queries in full detail (grouped)
• inspect(index) prints a specific query with raw query object
• Filtering support in dump():
  • appContext(string), resourceIdentifier(string), activeOnly(boolean)
• isActive is calculated based on query result availability, usage, and enabled flag
• Queries are sorted by active status by default for better visibility

Why

In real-world development, it’s common to unintentionally create queries that are technically registered in the cache but never actually fetch data — typically due to conditional logic with enabled: false.
This tool helps developers clearly distinguish such inactive or placeholder queries from meaningful ones, improving clarity and reducing noise during debugging.

Additionally, this project is currently built on Vue 2.7, which is not compatible with the official Vue Query Devtools.
Due to this limitation, we lacked a way to inspect query cache state visually.
This lightweight, console-based debugger was implemented as a practical alternative to make up for the missing Devtools support in a Vue 2.x environment.

Usage

__QUERY_DEBUG__.dump(); // show all queries, sorted
__QUERY_DEBUG__.dump({ activeOnly: true });
__QUERY_DEBUG__.inspect(3); // see full state of a single query

---

Vue Query 디버깅을 위한 콘솔 기반 디버거 도구 추가
이 PR에서는 Vue Query의 내부 상태를 브라우저 콘솔에서 직접 확인할 수 있는 디버깅 유틸을 추가합니다.
디버거는 전역 객체 window.__QUERY_DEBUG__를 통해 접근할 수 있습니다.

주요 기능

• __QUERY_DEBUG__.dump()로 모든 쿼리의 요약 테이블 출력
  • appContext (admin 또는 workspace)
  • resourceIdentifier (예: dashboard/public-dashboard/list 등)
  • contextKey (추가 맥락 네임스페이스)
  • params (쿼리 파라미터)
  • observers, isActive 등 핵심 정보 포함
• log()는 전체 쿼리를 상세하게 그룹핑하여 출력
• inspect(index)는 특정 쿼리의 원본 객체까지 포함한 상세 조회
• dump()에 필터링 옵션 제공:
  • appContext(string), resourceIdentifier(string), activeOnly(boolean)
• isActive는 데이터 존재 여부, dataUpdatedAt, enabled 값을 기준으로 계산
• 기본적으로 활성 쿼리 → 비활성 쿼리 순으로 정렬되어 가독성 향상

도입 배경

실제 개발 과정에서는 조건부 로직, 복잡한 구조 등으로 인해
enabled는 false이지만 queryKey가 생성되는 불필요한 쿼리가 생기기 쉽습니다.
이 도구는 그러한 쿼리를 구분해주고,
디버깅 시 어떤 쿼리가 실제로 의미 있는지 빠르게 식별할 수 있게 도와줍니다.

또한, 현재 프로젝트는 Vue 2.7을 기반으로 하고 있어 Vue Query Devtools 공식 도구를 사용할 수 없는 환경입니다.
이러한 상황에서 직접적인 쿼리 캐시 확인 수단이 부족해,
개발자도구 콘솔에서 직접 확인 가능한 경량 디버거를 구현하게 되었습니다.

사용 예시

__QUERY_DEBUG__.dump(); // 전체 출력 (활성 쿼리 먼저)
__QUERY_DEBUG__.dump({ activeOnly: true }); // 활성 쿼리만 출력
__QUERY_DEBUG__.inspect(3); // 특정 쿼리 상세 보기

2025-04-24.5.48.46.mov

Things to Talk About (optional)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

4 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
console	⬜️ Ignored (Inspect)	Visit Preview		Apr 24, 2025 9:02am
dashboard	⬜️ Ignored (Inspect)	Visit Preview		Apr 24, 2025 9:02am
feature-integration-project-detail	⬜️ Ignored (Inspect)	Visit Preview		Apr 24, 2025 9:02am
web-storybook	⬜️ Ignored (Inspect)	Visit Preview		Apr 24, 2025 9:02am

[github-actions]

🎉 @skdud4659 and @seungyeoneeee have been randomly selected as the reviewers! Please review. 🙏

[Copilot]

Pull Request Overview

This PR introduces a new in-browser debugging utility for Vue Query to enhance developer observability and troubleshooting during development.

• Adds a dedicated debug tool that provides summary, detailed, and specific inspections for Vue Query data.
• Integrates the debug tool into the application in development mode via a dynamic import.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
apps/web/src/_dev-tools/vue-query-console-debug.ts	New debug utility exposing methods dump(), log(), inspect() to inspect Vue Query internal state
apps/web/src/App.vue	Dynamically imports and initializes the debug utility when running in DEV mode

Comments suppressed due to low confidence (1)

apps/web/src/_dev-tools/vue-query-console-debug.ts:20

• Consider adding automated tests for the debug tool functions (dump, log, inspect) to verify their behavior and prevent regressions.

export function initVueQueryConsoleDebug(client: QueryClient) {

[Copilot]

Pull Request Overview

This PR introduces a Vue Query Console Debugger tool that exposes a global debug object (QUERY_DEBUG) to help developers inspect and filter Vue Query states in the browser console.

• Implements the debugger in a new file (vue-query-console-debug.ts) with methods to dump summaries, log detailed info, and inspect individual queries.
• Conditionally imports the debugger in App.vue during development to enhance developer observability.

Reviewed Changes

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

File	Description
apps/web/src/_dev-tools/vue-query-console-debug.ts	Provides query summarization, filtering, and logging methods to inspect Vue Query state details.
apps/web/src/App.vue	Implements conditional dynamic import of the debug tool to expose QUERY_DEBUG only in DEV mode.

[Copilot]

Pull Request Overview

This pull request adds a new in-browser console debugger for Vue Query to improve developer observability by summarizing and inspecting query states. The key changes include:

• Creation of the Vue Query Console Debugger tool in a new file.
• Exposure of the debugger on the global window object.
• Integration of the debugger in development mode within the App.vue file.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
apps/web/src/_dev-tools/vue-query-console-debug.ts	Adds a module that implements query summarization, logging, and inspection.
apps/web/src/App.vue	Updates to automatically load the debugger module in DEV mode.

Comments suppressed due to low confidence (1)

apps/web/src/_dev-tools/vue-query-console-debug.ts:52

• [nitpick] The variable name 'q' is ambiguous; renaming it to something like 'querySummary' can improve code readability.

let summary = _summarizeQueries().map((q) => ({

[sulmoJ]

Debugging for view queries is also possible in version vue 2.7! Thank you!!
LGTM~~