GoogleChromeLabs/ProjectVisBug
ProjectVisBug
VisBug is an in-browser design tool that lets you inspect, edit, and manipulate live webpage elements directly, without touching source code. It functions as a browser design inspector, providing visual controls and keyboard shortcuts for real-time style inspection, element manipulation, and device simulation.
The tool offers design-tool-inspired interactions for navigating the DOM as grouped layers, enabling direct selection and editing of nested components. It includes capabilities for drag-and-drop image replacement, live style inspection with computed properties and accessibility information, and responsive design testing through device and network condition simulation.
VisBug supports in-place editing of text and images, visual CSS manipulation for applying shadows, colors, and typography changes, and layout adjustment through keyboard nudging and alignment guides. It also provides a computed style inspector overlay and keyboard-driven DOM traversal for efficient element selection and navigation.
Features
- In-Browser Design Editors - Enables direct editing of text, images, and styles on any live webpage without touching source code.
- Live Page Image Swappers - Provides drag-and-drop image replacement on live webpages without modifying source code.
- Live Page Image Swappers - Replaces images and background images on any live page by dragging files from the file system onto elements.
- Runtime DOM and CSSOM Overrides - Modifies live page elements by injecting runtime scripts that rewrite the browser's DOM tree and CSSOM in real time.
- Live Page Design Inspectors - Provides an in-browser design inspector with visual controls and keyboard shortcuts for live webpage editing.
- DOM-to-Design Layer Mappings - Traverses the page's element tree as grouped layers for direct selection and editing of nested components.
- Design Gesture Mappings - Maps design application gestures like nudging and alignment guides onto raw DOM traversal and style commands.
- Hover-Based Style Inspectors - Hovers over any element to see its computed styles, accessibility properties, and alignment guides directly in the browser.
- Element Property Inspection - Inspects the CSS properties applied to a selected element and copies or removes inline styles directly.
- In-Place Editing Inputs - Clicks any text or image on a live page and modifies its content or swaps the image source in place.
- Live Webpage Content Editors - Clicks any text or image on a live webpage and modifies its content or source without touching the underlying code.
- Layer Selection Tools - Navigates the page's element tree using a layers panel to select groups and elements like in a design application.
- Live Style Inspectors - Ships a hover-based inspector that shows computed styles, accessibility info, and alignment guides on any live page.
- Live Page Text Editors - Selects and modifies the text content of any element on the page directly in the browser.
- Computed Style HUDs - Provides a floating HUD that reads getComputedStyle and accessibility tree data for any hovered element.
- Live Image Swaps via Drag-and-Drop - Replaces images or background images on live webpages by dragging new images from the file system onto elements.
- Browser Device Simulators - Simulates screen size, orientation, latency, and media queries to test responsive behavior on any live webpage.
- Browser Device Constraint Simulators - Applies latency, media queries, orientation, and screen size constraints to test responsive behavior on any live page.
- Browser API Override Proxies - Intercepts browser APIs like matchMedia and navigator.connection to simulate device and network conditions.
- DOM Hierarchy Navigators - Moves selection between sibling and child elements using keyboard shortcuts for efficient DOM traversal.
- Responsive Testing Tools - Simulates device constraints, screen sizes, and network conditions to test responsive behavior on live pages.
- Browser Device and Network Simulators - Simulates device and network constraints like screen size, orientation, and latency to test responsive behavior on live pages.
- Live CSS Effect Applicators - Applies shadows, color shifts, and typography changes to selected elements using dedicated tool modes.
- Live Style Editors - Applies real-time style changes like shadows, colors, and typography to selected elements without modifying source files.
- Live Element Asset Swaps - Replaces image sources and background URLs on live page elements by intercepting file system drag events.
- Keyboard Nudging and Alignment Guides - Moves selected elements with keyboard nudging and alignment guides to position them precisely like in a design tool.
- Layer-Model DOM Traversal - Navigates the element tree using arrow keys that map sibling and child relationships into a flat layer-like selection model.
- Keyboard Layout Nudging Tools - Moves, resizes, and repositions elements using keyboard nudging and multi-select, mimicking familiar design tool interactions.
- Visual CSS Manipulators - Applies shadows, colors, typography, and layout changes to elements using visual design tool controls.
- Visual Layout Adjusters - Adjusts positioning, margins, padding, and alignment of selected elements through visual tools and keyboard commands.
- Visual Debugging - Browser-based tool for visual inspection and CSS manipulation.
- User Research And Feedback - Visual inspection and debugging tool for web page elements.
