Debugging Panel
The tabbed panel docked on the right side in Sizzy. It contains a bunch of useful tabs with tools that will help you with debugging your website.
Changes
Custom tabs in Debugging Panel
The Debugging Panel comes with a lot of useful tabs out of the box, but you can also add custom tabs for some tools that you want easy access to, like:
- Storybook
- GraphQL Playground
- Prisma Studio
- GraphiQL
- Design reference
- Docs
- etc.
You can add the custom tabs in Settings -> Debugging Panel -> Custom Tabs
Customize Debugging Panel
You can right-click any tab in the Debugging Panel in order to hide it.
The hidden tabs are still accessible through Butler, and they can be opened in a dialog.
Undock Debugging Panel as a separate window
We renamed the "Docked Panel" to "Debugging Panel" because now it can be opened as a separate window.
Easily view the page source in the Docked Panel
The source will be updated live when your page is updated. You're also able to easily search it with Cmd + F on macOS or Ctrl + F on Windows and Linux.
Automatically position docked panel
Wouldn't it be nice if the Docked Panel (Console & DevTools) automatically moved to the bottom if the window is too small?
Of course, this is optional, and you can toggle the behaviour off in Settings -> Docked Panel. You can even choose between:
- Auto-position based on window width
- Auto-position based on the aspect ratio
You can specify the window width or aspect ratio that you want to trigger the switch.
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
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!