Sizzy 0.26 πŸŽ‰

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.

CleanShot 2020-07-07 at 13.32.39@2x.png

View Source

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

CleanShot 2020-07-07 at 13.36.51@2x.png

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)

CleanShot 2020-07-07 at 13.38.00@2x.png

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 πŸŽ‰

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.

CleanShot 2020-06-29 at 20.21.30@2x.png

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

CleanShot 2020-06-29 at 20.22.32@2x.png

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.

CleanShot 2020-06-29 at 20.31.35@2x.png

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 πŸŽ‰

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 πŸŽ‰

https://i.imgur.com/hDO4wTz.gif

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 πŸŽ‰

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.

img

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 😜️

img2

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 πŸ™Œ

Sizzy 0.21: Docking the DevTools 😱

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

docked

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.

img


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 πŸŽ‰

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)

Sizzy%200%2020%209597e7a2a8244df4a89385b699201a86/co.gif

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 😍

Sizzy%200%2020%209597e7a2a8244df4a89385b699201a86/onee.gif

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.

Sizzy%200%2020%209597e7a2a8244df4a89385b699201a86/res.gif


πŸ”Ž 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.

Sizzy%200%2020%209597e7a2a8244df4a89385b699201a86/zoooom.gif

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 πŸŽ‰ πŸ₯³

Sizzy%200%2020%209597e7a2a8244df4a89385b699201a86/ext.png


🐞 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 πŸ™Œ

Sizzy 0.19: Introducing Sizzy Projects πŸŽ‰

Hey everyone πŸ‘‹ Long time no see, huh? Well, we’ve been busy. Let's dig in!

Sizzy Projects

This is the feature that we were working on for the past 2 months, and we really hope that you will love it! 😍 It's really hard to summarize this amount of work in a short video, but Kitze will try his best to explain it in 2 minutes πŸ‘‡

πŸ—’ Side note: A team has been working on Sizzy since the beginning. Our team has 4 people for now and it's gonna grow soon. So even though Kitze is the public face behind it, everyone in the team should get credit for their hard work! Keep that in mind when praising our work πŸ˜‡

What is Sizzy projects?

Let's get the most important feature out of the way. Sizzy Projects is a complete game-changer for webdev and for browsing 😎

img

πŸ€– It’s an easy way to organize, manage, and navigate all the web development projects that you’re working on.

🌟 For every project you can save a list of bookmarks, reference links, todos, notes, etc. so all of your work remains in one place. This takes productivity to the next level!

πŸ“± Each project can be assigned to a view in Sizzy (Horizontal, Vertical, Focus, Responsive, Full, etc.) or a preset of devices. So when switching projects you can easily switch to a new set of devices in Sizzy 🀯

πŸ“‚ You can also open any project in Finder/Explorer or in the code editor of your choice. This makes switching between projects super easy!

🌍 When working on a Sizzy Project you’ll be able to open a mini-browser (yes, we went there) within Sizzy with all of your important reference links (like a project board, GitHub repo, Figma, deployment URL, documentation, etc.), so you don’t have to switch to another browser while doing some work.

ref browser

πŸ“ We’re working hard on documenting Sizzy Projects properly in our Help Center, and we’ll post a changelog update when the docs are published.


Managing permissions

Now you can (finally) manage permissions in Sizzy! πŸŽ‰

For example, when a website has push notifications, you can grant them or deny them from appearing in Sizzy.

dialog

If you grant the permission, push notifications will appear in Sizzy.

con

This refers to all kinds of permissions, not just push notifications. You can even manage media permissions, such as giving access to mic and camera for video calling and similar.

Once you grant or deny permission, a shield icon will appear in the URL bar which will allow you to change the permission, or to delete it.

arrow


πŸ‘‚ We have big plans for Sizzy Projects, but we really wanted to hear your feedback first, so we know how to develop it further.

πŸ“£ Please don’t hesitate to contact us, leave a card on our public board, or just mention us on Twitter.

P.S the weekly release schedule is back, yay πŸŽ‰

Enjoy πŸ™Œ

Sizzy 0.18 πŸŽ‰

Before announcing our latest update, we would like to apologize to some of our users that upgraded to 0.17.0 and lost all of their settings. The issue is now fixed with the latest release, so if you're still on 0.17.0 please update the app to 0.18.1 as soon as possible.

We apologize for the issue and we would like to let you know that we have implemented some changes so that this will never happen in the future.

Backup and restoring user configuration

Now Sizzy makes an automatic backup every 15 minutes and saves your configuration.

We have implemented this feature in order to easily recover your previous configuration. In case a migration crashes, you can restore your data from the backup configurations, by going through Settings β†’ Import Configuration.

Sizzy%200%2018/import.png

A dialog with all your saved configurations will appear, and you can choose which one you would like to import. In order to import a configuration, you can click on the "Import" button.

Sizzy%200%2018/iiiii.png

Another way of importing a configuration is to "Import from File," an option that you would find on the bottom of the dialog.

Sizzy%200%2018/siz.gif

In case you have a corrupted configuration, you can still recover your settings from the previous backups. From the recovery dialog, you can select which properties you would like to be restored.

Sizzy%200%2018/mmm.png

Improve updates

We have finally changed how Sizzy updates work. From now, checking for updates and updating Sizzy will be a smooth process. You will get a progress indicator in your icon, and a progress bar when Sizzy is updating.

Sizzy%200%2018/upd.png

If an update is available, you will get a prompt notifying you to download the new update. In the top right corner, you can see the update downloading.

Sizzy%200%2018/gif.gif

Also, clicking the Install and Restart to install buttons should now work 100% of the time.

After the restart, you will be able to enjoy the latest update.

Sizzy%200%2018/rest.png

Storage Explorer

We have added a Storage explorer dialog where you can directly add and edit cookies, enable and disable the cache, clear the cache, and manage the local storage.

Sizzy%200%2018/nnn.png

Cookies Editor

The Cookie editor allows you to manually add cookies, edit already existing cookies, clear cookies, search cookies, and choose an expiry date with a nifty date picker.

Sizzy%200%2018/ooo.gif

Local Storage

In the Local Storage section you can easily manage the local storage values.

Sizzy%200%2018/loc.gif

Cache

In the Storage dialog you can also enable and disable cache, and also you can clear the cache.

Sizzy%200%2018/cacn.gif

Confirmation dialog in the Organize Devices dialog

We know it was a bit frustrating to lose your changes in the Organize Devices dialog, especially when you would click away by accident, or when you would forget to click on the "Save" button.

Because of this reason, we added a confirmation dialog in the Organize Devices. Now, when you click away or when you click on the "Cancel" button, you would have to confirm that you want to continue without the changes to be made.

Sizzy%200%2018/cancel.gif

Double click on the title bar

Double click to the title bar for maximize or center the window of the app.

Sizzy%200%2018/resize.gif

🐞 Additional fixes

  • Fix CORS naming
  • Upgrade electron to 7.0.0
  • Some console messages are not visible in Sizzy

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.16 πŸŽ‰

Sizzy 0.16 is here! Let's dig in 😍


Copy screenshot to the clipboard

We have made screenshotting more convenient for you!

From now on, you can copy the screenshots of the devices to your clipboard by pressing the "Copy" button in the screenshot notification. After that, you can upload them anywhere, just by pasting.

Sizzy%200%2016/copy_to_clip.gif

To make things even easier, we have added a button in Settings β†’ Screenshots which allows you to automatically copy the screenshots. If you have this option enabled, you don't have to copy the screenshot manually, because it will already be in your clipboard - you just have to paste it.

Sizzy%200%2016/copy.png

Disable JavaScript

We are introducing a new plugin - Disable JavaScript.

Sizzy%200%2016/pl.gif

Of course, you can show or hide the plugin in the Plugins section. If the plugin is enabled, it will appear next to the other enabled plugins.

Sizzy%200%2016/disabe_enable.png

You also have the option to choose whether you would like the devices to reload automatically when you enable or disable JavaScript.

If JavaScript is enabled, it will show a green dot as an indicator. But if it is disabled, the dot will turn red. When JS plugin is disabled, some of the functionality of Sizzy will beautomatically disabled.

Sizzy%200%2016/dos.png

Modify request and response headers

Now it is possible to add custom headers to all of your network requests.

You can create as many custom headers as you want, and then after refreshing the page, they will be applied to every network request.

Sizzy%200%2016/headerr.gif

The Custom Headers popup can be found in the left sidebar. You can also add a Label for each Header, so you can easily distinguish between multiple headers with the same value. By clicking the toggle button you can turn a header on or off. This allows you to have multiple headers with the same Key but different Value, so for example, you can simulate a different user or a role when testing your website.

Sizzy%200%2016/custom.png

Add a toggle for listening to console logs from only one device in the Console Settings

In the Console Settings, we have added an option to listen to logs only from one device. This will make the console a significantly faster, if you don't need the logs from all devices at once.

When you have this option enabled, in the Console you can choose a specific device, and you will only receive logs and messages from that device. Also if you are working in Focus, Full, or Resizable mode, you will only get the logs for that device.

Sizzy%200%2016/logs.png

Open a window on window.open and improve authentication flows

Sizzy now opens a new window on window.open(url), and returns a proxy object for the newly-created window. This means you can now test authentication flows that rely on window.open().

Sizzy%200%2016/main_large.gif

Sizzy now has a Firefox extension

Sizzy now has an extension for Firefox. All you need to do is open a website in your Firefox browser, and then click on the Sizzy extension button. Even if Sizzy is closed, the extension will still open the app together with the website URL.

You can download the extension here.

The extension for Microsoft Edge is waiting for an approval, and should be live soon.

🐞 Additional Improvements and fixes

  • Clean up the Photo Studio
  • App crashes when clicking on "Reset to Default" in Settings modal
  • Update all user agents to latest versions
  • Improve the speed of the console
  • Fix crash when a website asks for authentication

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.15 πŸŽ‰

Sizzy 0.15 is here! Let's dig in 😍

Features

Add support for opening HTML files

We have added support for opening and viewing a local static HTML file. You can do it by clicking File β†’ Open HTML in the main menu.

Sizzy%200%2015/html.gif

Toggle CORS in Sizzy

Now it is possible to enable and disable CORS within Sizzy Settings.

Sizzy%200%2015/cors.png

You can test if it’s working properly by going to https://webbrowsertools.com/test-cors/

If CORS is enabled, when clicking on the buttons the results would appear as green. However, if CORS is disabled, the results should be red.

Sizzy%200%2015/coors.gif


🐞 Fixes

  • When Webpack sends a signal to Sizzy to clear the console, it crashes (Fixes issues with local development of CRA, Next.js apps, etc.)
  • Navigate to element should have an indicator if the user is writing an element that doesn't exist
  • We shouldn't have two popup plugins open at the same time
  • Fix Console crash when logging a Map
  • The Console doesn't completely close (there are few px left)
  • When the size of the console is small, when we click on the search box, the console messages are changing their position in a weird way
  • Use a proper dark theme for all the dialogs

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 πŸ™Œ