跳到主要内容
KonvaJS Devtools

KonvaJS Devtools EN

Duc Trung Mai · Firefox

Devtools for your Konva App

29用户 v1.0.1当前版本
前往 Firefox 商店
权限提示 该扩展申请访问所有网站（<all_urls>），意味着它可以读取你在任意站点的页面内容，包括已登录的页面。这是许多扩展正常工作的必要条件，但也值得你确认来源可信。

截图

  • KonvaJS Devtools 截图
  • KonvaJS Devtools 截图
  • KonvaJS Devtools 截图
  • KonvaJS Devtools 截图
  • KonvaJS Devtools 截图

简介

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.

KonvaJS Devtools 是做什么的

KonvaJS Devtools 是一款面向 Firefox 的开发者工具类扩展，主要用来调试页面、查看样式与请求、测试接口、辅助前端开发。官方对它的介绍是：Devtools for your Konva App在Firefox 附加组件商店（AMO）上，它当前版本 1.0.1，约 29 名用户。

适合什么人用

从功能定位看，KonvaJS Devtools 更适合前端工程师、测试与需要经常查看页面结构的用户。如果你平时只是偶尔遇到相关需求，用浏览器自带功能也能凑合；但如果这件事每天都发生，装一个专门处理它的扩展通常比手动操作省事得多。需要注意的是它作用于所有网站，装上后建议先观察一两天，确认不影响常用站点的正常使用。

怎么安装 KonvaJS Devtools

  1. 打开Firefox 附加组件商店（AMO）上的官方页面；
  2. 点「添加到浏览器」并确认权限提示；
  3. 装好后在扩展列表里固定图标，方便随时开关。

本站只做索引与介绍，安装包来自官方商店。如果商店页面提示当前地区不可用，说明该扩展未在你所在区域上架。

常见问题

KonvaJS Devtools 是免费的吗？

KonvaJS Devtools 在Firefox 附加组件商店（AMO）免费提供下载。它是浏览器扩展，装上就能直接用，不需要注册账号。

KonvaJS Devtools 安全吗？

它只申请了 0 项权限，范围比较克制，没有申请「读取所有网站数据」这种大权限。

KonvaJS Devtools 支持哪些浏览器？

当前收录的版本来自Firefox 附加组件商店（AMO），适用于 Firefox。同一个扩展在其他商店可能有对应版本，但功能与版本号不一定相同。

怎么卸载 KonvaJS Devtools？

在扩展管理页找到 KonvaJS Devtools，点移除即可。它在本地保存的设置会一起清掉，不会残留数据。

权限清单 来自 manifest.json 原文

站点访问 3

  • <all_urls>
  • http://*/*
  • https://*/*

接口权限 2

  • devtools
  • storage