qol-tray-dev-logging

Enforce createDebug-based logging with namespaces and a runtime toggle.

Updated Apr 19, 2026
One-click install
npx skills add https://github.com/qol-tools/qol-skills --skill qol-tray-dev-logging
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: qol-tray-dev-logging
Source: https://github.com/qol-tools/qol-skills/tree/main/plugins/qol-host/skills/qol-tray-dev-logging
Command: npx skills add https://github.com/qol-tools/qol-skills --skill qol-tray-dev-logging

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend diagnostic logs in qol-tray are often noisy and inconsistent. This skill standardizes logging by enforcing the createDebug(namespace) pattern, reducing spam and improving grepability across the UI codebase.

Core Features & Use Cases

  • Enforces the use of createDebug(namespace) to generate per-namespace loggers with uniform formatting.
  • Provides a global enable/disable mechanism via localStorage under 'qol-debug' to toggle logs at runtime.
  • Aligns logging with existing namespaces (e.g., qol:app, qol:camera, qol:nav, qol:spatial, qol:wedge, qol:world) to support rapid debugging during camera, navigation, world, and UI state work.
  • Offers guidance for adding logs during development without leaking sensitive or verbose data.

Quick Start

Enable debug logging by converting raw console calls to the createDebug-based logger and toggling the qol-debug setting.

Frequently Asked Questions about qol-tray-dev-logging

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce consistent frontend logging in JavaScript UI applications?

To enforce consistent frontend logging, you can standardize on the createDebug(namespace) pattern to generate per-namespace loggers with uniform formatting. This reduces log spam and improves grepability across the UI codebase.

What is the best way to toggle diagnostic logs at runtime in a JavaScript frontend?

The best way to toggle diagnostic logs at runtime is by using a global enable/disable mechanism stored in localStorage under a specific debug key. This allows you to selectively activate modular frontend tooling logs during development.

How do I structure debugging namespaces for camera and navigation state in a frontend UI?

You structure debugging namespaces by aligning logging with specific UI state domains, such as qol:camera, qol:nav, qol:world, and qol:spatial. This namespace convention supports rapid debugging during camera, navigation, and world state work.

Why are my frontend diagnostic logs noisy and hard to search?

Frontend diagnostic logs are noisy and hard to search because raw console calls lack a standardized format. Converting them to a createDebug-based logger enforces a structured, grep-friendly log format with consistent namespaces.

Can I use createDebug logging without leaking sensitive data into the console?

Yes, you can use createDebug logging without leaking sensitive data by following guidance for adding logs during development. The standardized approach ensures structured messages are suitable for scalable debugging without verbose data exposure.