GoogleChromeLabs / ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
https://visbug.web.app
Apache License 2.0
5.42k stars 285 forks source link

plugin suggestion: auto-resize window to test media queries #527

Closed hchiam closed 3 years ago

hchiam commented 3 years ago

Here's the code of the bookmarklet version: https://github.com/hchiam/learning-js/blob/master/bookmarklets/autoResizeWindowToTestMediaQueries.js

It opens the current page in a separate window popup and loops through basically all possible screen widths (not just screen width breakpoints), with step sizes of 5px to reduce jankiness.

I'll definitely need to refactor it, but let me know if its behaviour needs to be tweaked for VisBug, or if it's out of scope.

argyleink commented 3 years ago

interesting! can you share a screencapture of the effect? looks like every 3 seconds it changes the popup size either up or down in width? do you leave it open while you work, or just watch it for a few seconds?

hchiam commented 3 years ago

it opens a popup, waits for 3 seconds (to give time for stuff on the page to load), and then starts shrinking/growing the popup width as far as it can go, and then goes back-and-forth infinitely until you run test.stop() in the original window, or close the popup. here's the beginning part of it: https://youtu.be/hTO8KP8fwcI

Personally I just have it run through once or twice, but i can see people leaving it on as they do live updates or move it to a separate screen

argyleink commented 3 years ago

seems like a neat plugin! let's try adding it yeah 👍🏻

argyleink commented 3 years ago

closed by #534