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

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.

We renamed the "Docked Panel" to "Debugging Panel" because now it can be opened as a separate window.

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.

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.

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!