skills.rest
VisActor
VisActorOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vtable-browser-debugger-assistant

Diagnose VTable canvas rendering and interaction issues by inspecting the VRender scenegraph via Chrome DevTools.

3.7k|486|Updated Jun 5, 2023
Search Tags:#Chrome DevTools#Debugging#react-reconciler#vtable#scenegraph#CANVAS#vrender
One-click install
npx skills add https://github.com/VisActor/VTable --skill vtable-browser-debugger-assistant
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vtable-browser-debugger-assistant
Source: https://github.com/VisActor/VTable/tree/main/skills/vtable-browser-debugger-assistant
Command: npx skills add https://github.com/VisActor/VTable --skill vtable-browser-debugger-assistant

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Debugging canvas-based tables is hard because DevTools DOM inspection shows nothing about what is drawn on the canvas. This Skill provides a structured workflow to inspect the VTable/VRender scenegraph (Scenegraph.tableGroup) in the browser, so you can root-cause blank canvases, missing or misaligned cells, frozen region errors, hover/selection box issues, DOM overlay problems, and React18 vs React19 custom-layout differences.

Core Features & Use Cases

  • Scenegraph Inspection: Locate the VTable instance on the page, enumerate partition groups (colHeaderGroup, bodyGroup, rightFrozenGroup, componentGroup, etc.), export node trees with controlled depth, and overlay node bounds on screen for screenshot comparison.
  • React18/React19 Differential Diagnosis: Detect duplicate React copies, react-reconciler version mismatches, Fiber contamination of graphic attributes, missing HostConfig callbacks, and decodeReactDom 'type is not a function' errors.
  • Interaction Debugging: Dynamically inject table options, check selection ranges and merged cells, simulate drag selection with pointer events, and detect stale coordinates in tree/lazy-load/collapse scenarios.
  • Use Case: A React19 app renders blank custom-layout cells while React18 works. The Skill guides you to scan the scenegraph for Fiber-polluted attributes, confirm the reconciler HostConfig signature mismatch, and fix commitUpdate accordingly.

Quick Start

Ask the assistant to debug why my VTable canvas renders blank cells in React19 by inspecting the scenegraph with Chrome DevTools.

Frequently Asked Questions about vtable-browser-debugger-assistant

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

FAQPage Schema
How do I debug a blank VTable canvas in the browser?▼

First verify the container height and stage width/height are nonzero, then locate the table instance via window.__vtable__ and inspect scenegraph partition groups like bodyGroup and colHeaderGroup. Export the node tree and check visible flags and bounds to find missing or zero-sized nodes.

How to inspect the VTable scenegraph with Chrome DevTools?▼

Use evaluate_script snippets to grab the table instance, list children counts of each group (tableGroup, bodyGroup, componentGroup), find cells by role/col/row, and dump trees with controlled depth. Overlay globalAABBBounds on screen to compare scenegraph coordinates with actual pixels.

Why does VTable custom-layout render blank in React19 but work in React18?▼

The usual causes are duplicate React copies in the dependency tree, a react-reconciler version mismatch, or HostConfig signature changes such as commitUpdate writing Fiber fields into graphic attributes. Scan node attributes for keys like tag, child, sibling, or memoizedProps to confirm Fiber contamination.

What causes the 'type is not a function' error in VTable customLayout?▼

This error comes from decodeReactDom when the customLayout rootContainer's type is not a callable constructor. Return VGroup, VText, VTag, or VImage from @visactor/vtable instead of React components, or use react-custom-layout for real React elements.

Why does VTable highlight the wrong row after expanding or sorting a tree table?▼

Stale coordinates are reused after layout changes. dataSource.getTableIndex(path) returning -1 means the path is not visible, and old row values in customCellStyle arrangements point to different records. Clear old arrangements and recompute against the latest visible layout.

When should I not use scenegraph inspection for VTable issues?▼

Skip deep scenegraph analysis when stage width or height is zero, when two React copies exist on the page, or when Fiber contamination is detected. Fix layout containers, dependency aliasing, or the reconciler HostConfig first, then return to scenegraph verification.

Related Skills

Explore More Software Engineering Skills→
different-aidifferent-ai
63

chrome-mcp-bootstrap

Restart chrome-devtools-mcp and verify Chrome MCP connection readiness.

Official
Intermediate
podman-desktoppodman-desktop
8.0k

storybook-hmr

Applies a local git patch enabling Storybook hot reload for UI component source changes.

Official
Intermediate
zaid-khan-codezaid-khan-code
3

react-debugging

Map React DOM elements to owning components and inspect their props.

Community
Intermediate
bdbchbdbch
2

browser-test

Execute manual browser tests in Chrome with navigation, form interactions, and state verification.

Community
Intermediate