googlechromelabs / projectvisbug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug

「VisBug」

Open source web design debug tools

• Point, click & tinker
• Hold shift and multi-select
• Edit any page in any state
• Hover inspect styles, accessibility and alignment
• Nitpick layouts & content, in the real end environment, at any device size
• Leverage design tool nudging skills
• Edit any text
• Replace image(s)
• Traverse DOM like groups & layers in Sketch
• Design within the chaos of production or prototypes and the odd states they produce
• Bugs become design opportunities
• Design while simulating: latency, translation, media queries, platform constraints, orientation, 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 power within the web project they have today, by bringing design tool interactions to the browser.

Check out the list of features me and other's are wishing for. There's a lot of fun stuff planned or in demand. Cast your vote on a feature, leave some feedback or add clarity.

Let's do this design community, I'm looking at you! Make a GitHub account and start dreamin' in the issues area! Help create the tool you need to do your job better.

🤔 It's not:

• A competitor to design authoring tools like Figma, Sketch, XD, etc; it's a complement!
• Something you would use to start from scratch
• A design system recognizer, enforcer, enabler, etc.. but it is a design system leverager!
• An interaction prototyping tool, you need to produce the states for VisBug to design against

Installation

Add to your browser

Chrome Extension
Firefox Add-on
Safari Extension
Edge Extension

Getting Started

Check the Wiki
Master List of Keyboard Commands
Open Feature Requests
Chat on Gitter
Chat on Spectrum
Load VisBug from a CDN

Web Component (coming soon 💀🤘)

npm i visbug

Contribute

First off, thanks for taking the time to contribute! Now, take a moment to be sure your contributions make sense to everyone else. Questions or need help building a feature, come chat on Gitter or Spectrum!

Reporting Issues

Found a problem? Want a new feature? First of all see if your issue or idea has already been reported. If it hasn't, just open a new clear and descriptive issue.

Submitting pull requests

• Fork it!
• Clone your fork: git clone https://github.com/<your-username>/ProjectVisBug
• Navigate to the newly cloned directory: cd ProjectVisBug
• Create a new branch for the new feature: git checkout -b my-new-feature
• Install the packages for development: npm i
• Make your changes
• Commit your changes: git commit -am 'Added some feature'
• Push the branch: git push origin my-new-feature
• Submit a pull request with full remarks documenting your changes through the GitHub UI

License

Apache2 License © Adam Argyle

projectvisbug's Issues

Copy styles: CRUD copied styles

show a list with checkboxes of the copied styles so the user can pick what they want to paste, right now it's a mystery

Find a way to use PixelBug with remote inspect

Metatip: clicking on the swatch should copy the color to the clipboard

Hueshift doesn't update the color picker in the pallete

Action toast

Show a tiny tip summary of the action/manipulation that was applied

Sticky guides

ux should match metatip sticky behavior

HTML color input only allowing 1 color to be picked

After that color has been set via the DOM api, it refuses to update to new values

Move tool: potential placement stubbing

The move tool needs some UX feedback so the user can move things with more confidence. One option is to ghost and place all potential moves with arrows over the ghost, indicating that the arrow key on that ghost will result in the current element moving into that slot.

Extension sometimes wont invoke the tool

likely a state issue. consider watching for tab closing as a safe way to reset extension state memory

SVG inspection

unsure if this is even desired, need to user test. a basic aspect of the feature would be to show colors and strokes. but i think inspecting svg requires a lot of new logic to handle properly.

3D Transform

translate, rotate, scale

Screenshot with annotations

Just like how OS's are providing users now

Hueshift: alpha as cmd+left,cmd+shift+left,cmd+right,cmd+shift+right

Spell check

Turn on and off? Always on?

Look into screenshot uploading to Gallery

before and after's

metatip shadow DOM

styles are leaking into the metatips

Firebase collab editing?

Could we publish/subscribe the changes coming from pixelbug across sessions so remote pixel debugging can happen? i mean, we can, but should we? LOE? value? desire?

Selection outline and label should be elements on the body

pseudo elements and outline aren't dependable and are hamstringing some features. need to move to abs positioned nodes at the highest level.

TODO: measure perf before/after

metatip: clickable classnames for easy search autofill expansion

or just click and that selects everything?
or hover puts dashed borders around all matches, and click does full select?

Border manipulation

color
size
radius

Background image replace

Can currently swap any img node, but background images aren't swappable, and they should be

Inspector: hold alt/opt and get redlines

match sketch if possible

• https://sketchapp.com/docs/canvas/measuring
• http://utom.design/news

tip_key() isn't unique

this makes pinning metatips not work proper

Positioning

absolute/relative/fixed?
x/y

sounds problematic, tricky, and not a whole lot of gain

Copy/paste style

Hueshift should highlight which color in the tool-pallete the tool is tweaking

Object fit

Ability to change an elements object-fit properties so designers can:

• fill
• cover
• fit
• etc

Comments: put notes on elements before screenshotting

could be a whole new sidebar feature or optional addition to metatips

Sticky text editing

sometimes the UI has a hard time exiting text edit mode. (probably a blur event fire failure)

Consider a feature like this https://github.com/mrflix/dimensions

Lingering metatips

a variety of things can cause a metatip to persist, need to hunt them down and clean them up.

Metatip needs arrow pointing to which element it's showing info about

holla at aerotwist for suggesting this obvious one
also was thinking that holding alt could create an element snapping experience, cuz why would you want to pin data about it OVER the element? should be perfectly next to it.

requirement:

• arrow needs to handle NSEW directions
• snapping should intelligently choose NSEW to snap to

nice to have:

• convert to custom element

Eye dropper

already built into chrome devtools

Expand selection hotkey should expand with classname

currenly only nodename, was by design and made sense until latest feature of clicking links

Conditionally show color pickers

Instead of showing empty state for color inputs, hide them
allow the number of colors to scale beyond 2 to allow changing (border colors, shadow colors, etc)

Copy/Paste uses older cross tab clipboard instead of newer current tab copy

Multi-selection expansion

The label links are clickable now, it's awesome, but what if i want to add a selector to the scope? remove a selector from the scope? I'd love to be able to shift click on classnames to build a selection.

pseudo element label when selected

nice to have a name or node type reference after my hover tip is gone
&&
when i'm navigating via keyboard, i can get a tiny peak that way

Meta tip: ability to show just local changes

a toggle somewhere would be nice to help the share be succinct

Extension: no way to close it after opening it

show some flexbox labels

at least indicate if it's a flex container

Resize

height/width/intrinsic/extrinsic

Alignment guides

Be pretty sweet if the inspector drew alignment guides as you hovered elements

Screenshot tool

• selected nodes
  • node with shadow bg (carbon.sh)
  • node without shadow
• full page
• select node (pick it post instead of pre)

Toolbar: Consider a divider to distinguish and group manipulators from actions

Edit text experience isn't smooth

you can even see the currently selected/editing item flash

Multiple cursors

just like in our favorite IDEs, we should be able to expand our text selection or create multiple cursors and send text changes to all cursors

Wireframe mode?

Remove all colors and images to help focus on layout?

Styleguide extraction

something like this, basic rollup:

More modules

Some areas have grown a bit out of control and need some organization