DOCSEARCHbyAlgolia
Submit Docs

VisBug Documentation

repository·main·Indexed 26 days ago

https://github.com/googlechromelabs/projectvisbug

An open-source web design debug tool that enables real-time editing of text, images, and layouts directly in the browser. Available as a browser extension, npm package, or a custom HTML element <vis-bug> with support for programmatic command execution via execCommand() and configurable color schemes.

Tokens
512
Snippets
1
Records
6
Agent score
41%

What's inside VisBug

  3. Get started with VisBug

    main

    To begin using VisBug, you can explore the following resources:

    • Wiki: For detailed guides and documentation.
    • Keyboard Master List: To learn the full suite of keyboard commands for efficient tinkering.
    • CDN: Load VisBug directly from a CDN (example available on CodePen).
    • Community: Join discussions on Gitter or Spectrum.

  4. Use the VisBug Web Component

    main

    VisBug is exposed as a custom HTML element <vis-bug>. When added to the DOM, it initializes the VisBug toolbar, provides design tools (like Move, Margin, Padding, Font, etc.), and enables hotkey interactions.

    Attributes

    • color-scheme: Sets the visual theme. Supported values are auto, light, or dark.
    • color-mode: Sets the color format. Defaults to hex.
    • tutsBaseURL: (Optional) The base URL for tool demonstration GIFs. Defaults to tuts.

    Interaction

    • Tool Selection: Click a tool icon in the toolbar or use the registered hotkeys.
    • Toggle Visibility: Use metaKey + / or metaKey + . to show/hide the VisBug interface.
    • Command Execution: You can execute plugin commands via the execCommand(command) method.

  5. Execute VisBug plugin commands via execCommand()

    main

    The execCommand(command) method allows you to programmatically trigger VisBug plugins. The command string is prefixed with a forward slash / internally to look up the plugin in the PluginRegistry.

    If a plugin is found, it is called with an object containing:

    • selected: The current selection from the selectorEngine.
    • query: The command string (e.g., '/command-name').

    Returns a Promise that resolves to the plugin execution or an Error if the query is not found.