skills.rest
lobehub
lobehubOFFICIAL
Explore all skills by this author →
Website𝕏@lobehubGitHub

debug-frontend-with-browser

Diagnose frontend state boundaries by comparing data flow across isolated browser and application layers.

82.1k|15.8k|Updated May 21, 2023
Search Tags:#zustand#state-management#Frontend#Debugging#browser-automation#reAct
One-click install
npx skills add https://github.com/lobehub/lobehub --skill debug-frontend-with-browser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug-frontend-with-browser
Source: https://github.com/lobehub/lobehub/tree/main/.agents/skills/debug-frontend-with-browser
Command: npx skills add https://github.com/lobehub/lobehub --skill debug-frontend-with-browser

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses intermittent frontend rendering, state synchronization, and navigation defects by isolating the specific boundary where data becomes corrupted or stale.

Core Features & Use Cases

  • Boundary Tracing: Systematically inspects data from the DOM, component props, derived state, client cache, and network responses.
  • Fixture-Based Replay: Uses minimal, safe fixtures to reproduce defects without relying on production user sessions.
  • Regression Attribution: Compares observable boundaries across code revisions to distinguish between latent bugs and new data triggers.

Quick Start

Use the debug-frontend-with-browser skill to isolate the first broken state boundary after running the acceptance test suite.

Frequently Asked Questions about debug-frontend-with-browser

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

FAQPage Schema
How do I identify the first broken boundary in a frontend defect?▼

Compare entity IDs at each layer, starting from the network response, through the client cache and derived state, to the final DOM output. Mark each boundary as correct or incorrect to pinpoint where the data transformation fails.

Can I use this skill to debug production issues directly?▼

No, this skill requires an isolated environment and fixture strategy. Never use a user's signed-in production browser or Electron client as a test sandbox to avoid unintended mutations or data exposure.

How does this skill handle virtualized list defects?▼

Virtualized lists often recycle DOM rows, making DOM inspection unreliable. Compare raw records, derived records, and virtual-list IDs separately to distinguish between state absence and offscreen rendering.

What should I do if the acceptance skill is unavailable?▼

Stop the diagnostic workflow immediately. This skill relies on the acceptance skill to establish the approved execution surface, environment isolation, and authentication gates.

Related Skills

Explore More Software Engineering Skills→
HZeroxiumHZeroxium

java-testing-integration

Automate deterministic integration testing for IO/DB/queue scenarios with container-backed environments.

Community
Intermediate
unnamedmistressunnamedmistress

fixer-agent

Fix code defects and security vulnerabilities from QA audits with minimal patches.

Community
Intermediate
Avila-TekAvila-Tek

browser-testing-with-devtools

Inspect DOM, console, network, and performance via Chrome DevTools MCP in real browsers.

Official
Intermediate
sergiodxasergiodxa
93

frontend-testing-best-practices

Guide frontend testing with E2E tests over unit tests and minimal mocking.

Community
Intermediate