AI 产品解读Browser-based design inspection and editing tool that brings design tool interactions directly into any web page
Web designers lack the ability to directly manipulate, inspect, and experiment with live web pages without developer intervention or switching to DevTools. VisBug bridges the gap between design tools and the browser, letting designers work on the actual end-state of any page.
User clicks the extension icon or presses Alt+Shift+D to inject the VisBug toolbar into the current page. A <vis-bug> web component is prepended to the page body, providing design tool interactions. Users can then point, click, and manipulate elements, inspect styles, edit text/images, and use keyboard shortcuts similar to design tools. The toolbar can be toggled off via the same shortcut or context menu, which removes the component with an animation.
Point, click, move, resize, and edit any element on any web pageEdit text and replace images directly on live pagesInspect styles, spacing, distance, accessibility, and alignmentNitpick layouts at any device sizeBrings Adobe/Sketch-like hotkeys and interactions to the browserSupports color mode preferences (hex/hsl/rgb) and theme (auto/light/dark)
- 目标用户
- Web designers / UI/UX designers / Frontend developers / Content creators / QA testers
- The main logic is in toolbar/bundle.min.js (318KB minified), which is too large to fully inspect, but all entry points and extension-authored code have been reviewed. No auth/payment patterns were found in the reviewed files and the extension's purpose and architecture are clear.
- The extension website (visbug.web.app) may have additional context but was not analyzed as it's outside the extension package.
付费分析未识别到付费功能
The extension is explicitly open source with no payment infrastructure. The only 'paid' keyword hits were false positives: 'pro' in base64-encoded verified_contents.json and minified bundle code, and 'license' in an MIT license comment for the bundled hotkeys-js library. No Stripe, billing APIs, upgrade prompts, subscription flows, or gated feature logic exists anywhere in the source.
- 置信度
- 97
- 支付平台
- --
- 来源
- AI / 高
- 需要登录
- 否
- 登录理由
- The extension operates entirely locally in the browser. It injects a <vis-bug> web component into the current page via chrome.scripting APIs. The 'storage' permission is used only for persisting color mode (hex/hsl/rgb) and color scheme (auto/light/dark) preferences locally. No authentication flows, account creation, tokens, or external service logins are present in any source file.
Serious time saver extension. Any one who is working on Front End part this will save a huge time. Especially on dealing css and look of the website or any significant changes. This is a right tool. Honestly never seen anything like this before. I could see the growth is just like what Postman has did. One day this is going to be a topper and people will love it. Cool and kudos to Developers.
Thank you! Could you add the CSS units setting?
Awesome. It's a game changer.
Color code in #HEX format would be very very helpful.
Great extension! Maybe it should incorporate some features from Page Ruler, to show the components' size in-screen when inspecting grid.
Anyone who works with CSS knows the pain of having to go through the dev tools, make a slight change there then going back in to copy what you just made. Especially for live Wordpress sites that don't have hot reload. This is just amazing! If I had the skills I would contribute to this
wow is really turn the browser to artboard is very easy to use an saving a lot of time instead of writing you just use 'arrow keys' very cool
Hoping for the future iteration will include like from css scan features -- Copy element style properties when clicking it. There's an inspect option but it's just showing style props when hovered. It would be cool if we could instantly copy it. Overall this extention is very helpful.
Super helpful! thank you friend
Lovely, minimalistic UI offering many useful tools for inspecting the elements of the current page. Nice work!