A Chrome app to create custom breakpoints to test against when building websites.
- Add custom sizes and reorder them in the left panel. And though you shouldn't design to a device I've added a few popular ones for previews. See Material Device Metrics for full list of device sizes.
- When scrolling the stage, as opposed to an individual webview, hold the "option" or "alt" key. This prevents the webview from capturing the cursor focus.
- Pointbreak uses Chrome Sync to remember your state so that when you reopen the app it will load where you left off.
- Try it with Browsersync for synced scrolling and auto-injection of CSS.
Under the hood
Pointbreak uses Chrome
webviews to render websites. They are similar to iframes but provide number of methods to add or retrieve data. They also do not suffer the same security restrictions that iframes do, so sites normally blocked to iframes will render inside Pointbreak.