Sizzy 0.30 is here 😍

Revamped Settings Dialog

The settings dialog has been completely revamped 😍 Now it looks prettier and way more organized than before 🎉

Other fixes & improvements

• Fix: Random "Oops! The Site can't be reached."
• Fix: Cannot choose a search engine in the reference browser URL bar
• Fix: Toasts appear under the window controls for macOS
• Fix: iOS URL bar text color is white
• Fix: Devices get cut off in center align mode
• Fix: Device frame gets squeezed with the docked dev tools
• Improvement: Add back the reload dev tools button
• Improvement: Show the version being downloaded when downloading an update

Sizzy 0.29 is here 😍

The docked DevTools finally support extensions 🎉🎉🎉

Yes, the moment is finally here. The docked DevTools are finally complete! Now all the installed extensions (from Settings -> DevTools) will appear in the docked DevTools 🥳 😍

We are also working on a completely new debugging experience in Sizzy, so just wait for it 😉

Request an extension

Missing a DevTools extension? You don't need to wait for an update anymore. Just click on "Request an extension" in the settings and as soon as we approve it, it's gonna be instantly available in Settings -> DevTools and everyone will be able to install it.

For example, we added the XState extension and now it's available for everyone.

Clear cache in the reference browser

Now you can hard reload a page in the reference browser, or clear the cache for the entire browser.

Other improvements and fixes

• Fix: Photo Studio screenshots on Windows 10 include the title bar
• Fix: Content overlays frame in screenshots
• Improvement: New devices should be added on top of other devices in Float mode
• Fix: Stuck in redirect in Reference browser (Now you can right-click -> refresh in the ref. browser and you will get an option to clear cache)

Sizzy 0.28 is here 😍

Show the favicon and the title of the page in a popup

Just hover the "i" icon in the URL bar to see them.

Prevent alert spam

Ever got yourself in an alert loop? We got you. Just block the alerts after the first one and they won't show until the next reload.

Helpful buttons if the page cannot be loaded

It was super annoying to see a blank white page if a page cannot be loaded. Now you're going to see a helpful message along with a "Reload" button. If you currently have an active project, Sizzy will show a button so you can easily navigate to one of your bookmarks that's not on localhost.

Support command line args for code editor

When adding a custom editor now you can add extra args along with the CLI name.

Preact Extension for the DevTools

We're working on enabling extensions when the Devtools are docked.

Other fixes and improvements

• Improvement: In focus mode reload the selected device first
• Improvement: Make sure webviews look sharp at 100% zoom
• Fix: The loading bar on iOS devices in not in the correct place
• Fix: When the console is listening for only onge device, changing the device from the dropdown doesn't change the listened device
• Fix: Blinking cursor in ref. browser disappears (From Trello)

We were focused on refactoring some internal logic and improving the overall stability of the app, as well as fixing a lot of bugs.

A few notable bug fixes:

• Fix: Window controls get cut off after resizing the window on Windows 10
• Fix: Default devices with wrong pixel density (From Trello)
• Fix: Not able to take a screenshot in the middle of a page
• Fix: Details button for extensions goes to undefined

Sizzy 0.26 is here 😍

Toggle Metal and Hardware Acceleration

We added two new toggles that might help with performance:

• Use Metal instead of OpenGL for rasterization
• Disable Hardware Acceleration

You can find them in Settings -> Performance. Try to play with them and see which configuration works best for you.

View Source

You can now right-click any device and click "View Source" to inspect the source of the page.

Add Angular State Inspector extension

We added a new extension for inspecting Angular apps, and we fixed the installation of extensions (when the dev tools are not docked)

Other fixes and improvements

• Fix: Some pages get cut off
• Fix: Incorrect dimensions in Resizable mode
• Fix: Sync scroll issue
• FIx: Cannot access HTTPS site with invalid certificate (i.e when using invalid HTTPS certificate with create-react-app)
• Improvement: The shortcut for toggling the dev tools is now Cmd + Alt + I or Ctrl + Shift + I. You can find the full list of shortcuts in Settings -> Shortcuts.
• Fix: DevTools can disappear and universal inspect doesn't work until the app is restarted. This always happens after an update.
• Fix: App crashes on Windows Insider Build
• Remember scroll position after reload
• Fix: Opening settings in zen mode causes the focus mode tabs to jump to the header
• Fix: Scrollbars of some devices do not look good
• Fix: CORS toggle doesn't work
• Fix: Emulations sometimes don't work when laptop wakes from sleep and the app has to be reloaded
• Fix: The dev tools extensions don't work
• Fix: Scroll to selector does not work properly

Sizzy 0.25 is here 😍

CPU & performance improvements

We tried to get rid of all the performance problems, and now the CPU usage in Sizzy should be similar to using any other browser. We also improved the startup time by ~2 seconds (scientifically measured down to the last ms 😎)

However, if your website or web app takes 10% CPU, and you have 10 devices open in Sizzy, you should expect it to multiply its CPU usage by 10. Sizzy will always be resource-hungry because it's the only browser that shows multiple websites at once.

Our advice is to pay attention to animations and transitions in your website, because usually, they are the performance biggest problem, especially if displayed on multiple devices at once.

You can easily toggle animations and transitions in Sizzy with the Debug Styles plugin.

You can read more about improving the performance in Sizzy in our Help Center article.

Custom scrollbars

Styling the scrollbars in Sizzy caused some issues on macOS, so we made the custom scrollbars optional. If you want to show them only when scrolling, you can easily enable that setting in macOS.

However, if you want the custom scrollbars back, you can enable them in Settings -> Performance.

More class names for debugging elements

Did you know you can easily debug your elements in Sizzy by adding a "sizzy-[color]-[size]" classes to your HTML elements? You can enable that setting in the Debug Styles plugin.

We added new colors so now you have more options for debugging:

• blue
• red
• green
• black
• cyan
• aqua
• pink
• orange
• purple
• gray
• yellow
• brown
• white
• magenta
• maroon
• navy
• teal
• turquoise
• tomato
• violet
• lime

Other changes and fixes

• The shortcut for toggling the DevTools has changed to Cmd + Option + I on macOS and Ctrl + Alt + I on Windows.
• Fix: CORS enable/disable doesn’t work
• Fix: The docked dev tools switch their theme color
• Fix: The selected device in the docked devtools doesn't change when changing focused device in focused mode
• Fix: Devtools is blocked when debugging using the docked DevTools
• Fix: When exiting zen mode via keyboard shortcut the projects popup is shown
• Fix: Website automatically scrolls up when navigating to an element using the plugins
• Improvements for "Scroll to selector" plugin
• Fix: Pressing Cmd+R and then trying to quit the app doesn't quit the app on the first try

Sizzy 0.24 is here! 😍

Note: We skipped the changelog for 0.23 because it mostly consisted of bugfixes 🐛️

Find In Page

Finally, right?! 😅 You can now press Cmd + F or Ctrl + F to search for text in all devices in any mode: Responsive Mode, Full Mode, Focus Mode, etc.

It even works in the Reference Browser tabs 🎉

We really apologize that this issue took us so long, but there was a bug in Electron that prevented us from shipping it. Let us know if you find any issues with it! 🙌

Other improvements and fixes

• Remove headway widget and create a simple replacement widget using webview
• When ref. browser is docked to the left it cannot be resized unless hovering over sizzy UI elements (hover on the webview doesn't resize)
• Enable docked devtools by default
• [Windows] Menu Sizzy -> About Sizzy doesn't show the whole version
• Universal inspect element doesn't work
• After going offline -> online a few separate refreshes are needed for the devices to come online
• Resizing of devtools stops working hovered over a device
• The "x" button is showing when hovering over a pinned tab
• Screenshots don't work with a couple of websites

p.s We're working hard towards making the app more stable and we're trying to fix all the issues related to performance. We appreciate your patience 😇

Enjoy 🙌

Sizzy 0.22 is here! Let's dig in 😍

Keep docked DevTools in memory (Optional)

If you have some power to spare, you can keep the docked DevTools in memory, so when you collapse them (via dragging or keyboard shortcut) and open them again, they won't reload. This saves a bunch of time but it can cost some resources, that's why we disabled it by default.

The docked DevTools are now dark by default

Sizzy has an overall darker UI so it makes sense for the DevTools to be in dark mode by default. You can still switch back to the light mode from the DevTools settings if you prefer it, we won't judge 😜️

Other improvements & fixes

• Fix: The device individual zoom controls (+ and -) are not working
• Fix: When the Sizzy Console or the DevTools are manually closed by dragging them to the end, the panel doesn't open properly when it's opened with the ; shortcut

We're working hard on addressing all the CPU/GPU issues with Sizzy and we'll make sure to have a proper solution until the end of this month. We really appreciate your patience and support ❤️

Enjoy 🙌

This is our biggest release ever… Are you ready for it? 😎

THE DEVTOOLS CAN BE DOCKED. FINALLY! 🎉🥳🔥😍😱🤩

Go to Settings -> General and enable Docked DevTools 🎉🎉🎉

If it doesn't work immediately just restart Sizzy. This should also fix all the disconnect issues that were randomly occurring when using the DevTools before.

• You can easily select which device is being inspected
• You can automatically open the DevTools and navigate to any element in any devices by using the Universal Inspector
• You can right-click -> Inspect Element in any device
• You can toggle the DevTools by pressing ;
• Docked DevTools should work in any mode

You can read more about the Docked Devtools in our Help Center article.

⚠️ This is still an experimental feature so please let us know if you find any issues. We are aware that the DevTools extensions are not working and we're working on a fix. Also, while the DevTools are docked you cannot use the awesome Sizzy Console, but we have a solution for that and we can't wait to show it to you :)

Add X icon for closing the tabs in the reference browser

Opening the menu just to close a tab is annoying, so we added an X button for every tab in. Please let us know if you have more ideas for the reference browser.

Other Fixes

• The color scheme gets reset when the DevTools for that device are loaded/refreshed

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually. If you can't find the download link click here to download the app.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

Sizzy 0.20 is here! 🎉🎉🎉 Let's dig in 😍

🌓️ Simulate Light/Dark mode

The prefers-color-scheme CSS media feature is used to detect if the user has requested the system to use a light or a dark color theme. With Sizzy, now it is possible to simulate the prefers-color-scheme property.

This feature affects the content inside of the devices. If the website you're working on has support for prefers-color-scheme it should switch to the chosen color scheme, accordingly.

You can switch between three color schemes:

• Light color scheme
• Dark color scheme
• System's color scheme (whatever you have chosen in your OS settings)

You can also simulate the color scheme per device, by going through the device menu → choose a color scheme. In this case, only the chosen device will override the color scheme. This way you can work on the light and dark mode of your app at the same time 😍

In order to reset the color scheme of all the devices, you just need to click on the "Reset Color Scheme" button in the left sidebar. Then the devices that have manually been set to a certain color scheme, will reset to the default color scheme mode, set from the left sidebar.

🔎 Zoom page in Full Mode & Reference Browser

We made zooming in and out possible in Sizzy's Full Mode and in the Reference Browser. By pressing on the Cmd or Ctrl in combination with + or - you can control the zoom level.

You always reset your zoom back to the default one, by pressing on the Cmd or Ctrl + 0.

Please note that this zoom is different than the zoom in the Default mode. In Default mode, the zoom increases and decreases the size of the devices. While the fullscreen zoom makes the content inside the Full mode and Reference Browser tabs look bigger or smaller.

⚡️ DevTools extensions on Windows

DevTools extensions are finally enabled on Windows! You can go to Settings -> Dev Tools and enable the extensions for React, Vue, Angular, or whatever else you need 🎉 🥳

🐞 Additional Fixes

• Fix navigation crash on some websites
• Fix "Screenshot of all devices" button that used to freeze the app
• Bug fix for screenshots getting stuck on specific websites after a refresh

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible. If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌