Saturday, August 29, 2020

The Sidebar might be gone, but all the functionality is still here. When you're in Responsive mode, you can find the rotation controls, screenshot buttons, and zoom control in the bottom toolbar. This toolbar is not visible in other modes because it contains only controls that can apply changes to multiple devices at once.

The left Sidebar is finally gone! We merged all the modes, align buttons, focus mode tabs, and presets into a new completely customizable tab bar. Now you can easily switch to any view with one click.

Modes & Views

On the left side, you can find the Filters, the Photo Mode, a popup for switching the alignment of the devices, and two tabs for switching to Full mode and Responsive mode.

Presets

You can see all of your presets in a popup if you click on the star icon in the new Tab Bar. If you like to keep some frequently accessed presets as tabs you can easily pin them.

Focus Mode tabs

To the right, you will find tabs of your currently visible devices, so you can easily switch between them with one click. Soon we'll completely change the way of hiding/showing devices, but for now, you can do that in the Organize Devices dialog.

Anything that you'd like to customize can be found in Settings -> General -> Workspace Tabs. You can:

• Toggle Filters
• Toggle Modes
• Toggle Presets
• Hide title
• Colorize Groups

Toggling the Tab Bar

You can press Cmd + Shift + B on macOS or Ctrl + Shift + B on Windows and Linux if you want to toggle the tab bar.

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 🎉 🥳

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.

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.

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.

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

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 :)

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

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.

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! 🙌

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

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.

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.

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

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

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.

The left sidebar is going away soon, so we moved a few buttons and converted them to Sizzy Plugins, so you can easily enable or disable them from the Plugins popup.

• Network Manager
• System Color Scheme switcher
• Touch Pointer
• Manage Cache

We removed the "clear cache" button and the "enable/disable cache" toggle from the Cache popup, and you can find it as a separate "Manage Cache" plugin. Soon we'll allow you to reorder plugins 💪

Missed the docked Sizzy Console with all of its filters and settings? Good news: the Docked DevTools are transforming into a dedicated panel for debugging everything. The Docked Panel includes the following tabs:

• Sizzy Console
• Dev Tools
• Request Headers
• Cookies Editor
• Local Storage Editor

Now you can have your cake and eat it too! 🍰

Soon we'll add more tabs to this panel, so please let us know if you have any ideas!

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

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

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.

Yes, the moment is finally here. The docked DevTools are finally complete! Now all the installed extensions Settings -> DevTools will appear in the docked DevTools 🥳 😍 We are also working on a completely new debugging experience in Sizzy.

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

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

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.

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.

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