Sizzy 0.31 πŸŽ‰

Sizzy 0.31 is here 😍

img

New Debugging Panel

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

img

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!

More Plugins

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 πŸ’ͺ

img

Other improvements and fixes

  • Fix: Sizzy console does not work
  • Fix: White device select on Windows
  • Improvement: Persist the setting for the collapsed toolbar in float mode
  • Fix: When selecting a tab in themes it automatically gets applied and the popup is closed
  • Fix: Universal inspect element does not work if the devtools are not already open for the inspected device
  • Fix: Some icons are not visible in the ipad status bar

Sizzy 0.30 πŸŽ‰

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

img

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

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.

img

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.

CleanShot 2020-07-24 at 15.59.46.png

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. 07-24-2020-15.55.44.jpg

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

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. imgur

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. CleanShot 2020-07-17 at 15.49.04.png

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. CleanShot 2020-07-17 at 15.43.12.png

Support command line args for code editor

When adding a custom editor now you can add extra args along with the CLI name. CleanShot 2020-07-17 at 15.51.34.png

Preact Extension for the DevTools

We're working on enabling extensions when the Devtools are docked. CleanShot 2020-07-17 at 15.54.57.png

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)

Sizzy 0.27 πŸŽ‰

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

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