KonvaJS Devtools Duc Trung Mai توسط

KonvaJS Devtools adds a "Konva" panel to your browser DevTools for inspecting, debugging, and profiling any Konva.js canvas application — like React DevTools, but for Konva.

ELEMENTS

Browse the full scene graph — every Stage, Layer, Group, and Shape — in a fast, virtualized tree view that handles thousands of nodes.

• Select nodes by clicking directly on the canvas
• Edit any attribute live with color pickers and drag-to-scrub number inputs
• Add, remove, and configure Konva image filters (plus CSS filters on Konva v10)
• Inspect event listeners and spot "listening: false" issues blocking pointer events
• View cache status, dimensions, and memory usage; enable or clear cache in one click
• Snapshot attributes and track changes in real time
• Search by class name, /regex/, attr:value, or #id
• Drag and drop nodes to reorder or reparent them
• Export any stage as JSON and import it back
• Copy a node as a new Konva.X({...}) constructor call
• Toggle a hit-region overlay to visualize pointer event targets
• Toggle a render heatmap to see which layers redraw most
• Pin frequently inspected nodes for quick access across sessions
• Resize, rotate, and move nodes with an interactive transform gizmo
• Screenshot the full stage or a single node as a high-res PNG
• Accessibility insights flag missing names, tiny hit areas, blocked listeners, and hidden interactive nodes
• The selected node is available as $konva in the console

PROFILER

Record Layer.draw() calls and measure render performance per layer.

• Draw count, average time, max time, and total time for each layer
• Visual bar charts for quick comparison
• Timeline of recent draw events with timestamps

ANIMATIONS

Monitor every running Konva.Animation and Konva.Tween in real time.

• See target layers and animated properties at a glance
• Stale entries from destroyed stages are filtered out automatically

KEYBOARD SHORTCUTS

• Arrow keys to navigate and expand/collapse the tree
• Delete to remove nodes, H to toggle visibility, L to toggle listening
• Cmd/Ctrl+F to search, Escape to deselect

Supports Konva v9 and v10. Multiple stages on the same page. Dark and light theme.