跳到主要内容
VisBug

VisBug EN

argyleink · Firefox

Open source browser design tools

5.0/5 35 人评分 2.3千用户 v0.4.6当前版本

截图

  • VisBug 截图
  • VisBug 截图
  • VisBug 截图
  • VisBug 截图

简介

Open source web design debug tools built with JavaScript: a FireBug for designers.

- Point, click & tinker
- Edit or style any page, in any state, like it's an artboard
- Inspect styles, spacing, distance, accessibility and alignment
- Nitpick layouts & content, in the real end environment, at any device size
- Leverage adobe/sketch skills
- Edit text, replace images
- Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities
- Design while DevTools simulates latency, i18n, media queries, platform constraints, CPUs, screensize, etc
- Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc)
- No waiting for developers to expose their legos, just go direct and edit the end state (regardless of framework) and execute/test an idea

Give power to designers & content creators, in a place where they currently feel they have little to none, by bringing design tool interactions and hotkeys to the browser.

VisBug 是做什么的

VisBug 是一款面向 Firefox 的开发者工具类扩展,主要用来调试页面、查看样式与请求、测试接口、辅助前端开发。官方对它的介绍是:Open source browser design tools在Firefox 附加组件商店(AMO)上,它当前版本 0.4.6,评分 5(35 人评价),约 2,300 名用户。

适合什么人用

从功能定位看,VisBug 更适合前端工程师、测试与需要经常查看页面结构的用户。如果你平时只是偶尔遇到相关需求,用浏览器自带功能也能凑合;但如果这件事每天都发生,装一个专门处理它的扩展通常比手动操作省事得多。

怎么安装 VisBug

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

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

常见问题

VisBug 是免费的吗?

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

VisBug 安全吗?

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

VisBug 支持哪些浏览器?

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

怎么卸载 VisBug?

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

权限清单 来自 manifest.json 原文

接口权限 4

  • activeTab
  • contextMenus
  • scripting
  • storage