VisBug
Open Source
Browser Design Tools
![curly bug arrows pointing to tool pallete](./assets/arrow.png)
Tab & Shift + Tab traverse laterally
Enter & Shift + Enter traverse lineage
Hold shift to manually multi-select
Click 1, then click a class in the label for that element: ".cmd-e" in this case!
Press cmd+e to expand your selection
Press cmd+shift+e to expand to all matches
Click one of these squares, then click a color icon under the toolbar to get a picker!
Hotkey m
Redlines & distance coming soon!
Press cmd+d
Copy the circle from the left box cmd+c
Paste it in the right box cmd+v
Did I mention it works across tabs!
Copy styles with cmd+opt+c
Paste copied styles with cmd+opt+v
For fun: copy the styles of a dark artboard and paste it over some light artboards
Select all 4 images and drag in some new ones
OR just drag a new image onto any one of these
Hotkey f
The font in this artboard is the system font. It has lots of weights and is very elegant at large or small sizes. Can you make it look better?
Multiselect these headings and edit the ramp with the font tool, what ramp styles do you like?
Fix the order of the circles below
Tip: left and right are safe, up and down are difficult
Flow direction can make left/right be up/down 🤔
Fix the order of the stop light below
Delete, copy, paste, & duplicate svg!
Change color, move x/y, & inspect svg!
Hotkey p
Hotkey d
Hotkey l
Click to select, then click hold and drag anything around
Move this artboard to somewhere wierd!
Hotkey a
Hotkey s
Press opt+del to remove inline styles
Ew, get rid of these terrible edits someone (me) did! 👇Hotkey [ or ] to switch between foreground/background
Try multi-selecting all these circles and changing their hue contextually, it makes a pretty light show