适用于您的 Konva 应用程序的开发工具
KonvaJS Devtools 在浏览器 DevTools 中添加了一个“Konva”面板，用于检查、调试和分析任何 Konva.js 画布应用程序 - 类似于 React DevTools，但适用于 Konva。
元素
在可处理数千个节点的快速虚拟化树视图中浏览完整场景图（每个舞台、图层、组和形状）。
• 通过直接单击画布来选择节点
• 使用颜色选择器和拖拽式数字输入实时编辑任何属性
• 添加、删除和配置 Konva 图像过滤器（以及 Konva v10 上的 CSS 过滤器）
• 检查事件侦听器并发现阻止指针事件的“listening: false”问题
• 查看缓存状态、维度和内存使用情况；一键启用或清除缓存
• 快照属性并实时跟踪变化
• 按类名称、/regex/、attr:value 或#id 搜索
• 拖放节点以重新排序或重新设置父级
• 将任何阶段导出为 JSON 并将其导入回来
• 将节点复制为新的 Konva.X({...}) 构造函数调用
• 切换点击区域覆盖以可视化指针事件目标
• 切换渲染热图以查看哪些层重绘最多
• 固定经常检查的节点以便跨会话快速访问
• 使用交互式变换小控件调整大小、旋转和移动节点
• 将整个阶段或单个节点截屏为高分辨率 PNG
• 可访问性洞察标记丢失的名称、微小的点击区域、阻塞的听众和隐藏的交互节点
• 所选节点在控制台中可作为 $konva 使用
分析器
记录 Layer.draw() 调用并测量每层的渲染性能。
• 每层的绘制次数、平均时间、最大时间和总时间
• 用于快速比较的可视化条形图
• 最近绘制事件的时间线（带有时间戳）
动画
实时监控每个正在运行的 Konva.Animation 和 Konva.Tween。
• 目标图层和动画属性一目了然
• 自动过滤掉已销毁阶段中的陈旧条目
键盘快捷键
• 箭头键用于导航和展开/折叠树
• 删除以删除节点，H 切换可见性，L 切换监听
• Cmd/Ctrl+F 进行搜索，Escape 取消选择
支持 Konva v9 和 v10。同一页面上的多个阶段。深色和浅色主题。
