Custom Debugging Panel

Other than resizing and docking the debugging panel, you can customize it by hiding tabs you don't need to declutter the panel and adding custom tabs.

Hiding and unhiding tabs

The debug panel has several tabs by default and you probably don't need all of them. For example, you might not use CSS overrides and aren't interested in sharing your website on social media. In this case, you can hide these tabs.

Right-click anywhere on the panel's tab bar and select Customize Debugging Panel.

Document image

Go to the Tabs entry. Here, use the toggles to customize which tabs are visible in the panel and save your changes.

Document image

Another way to hide tabs is by right-clicking a tab and selecting Hide the "..." tab.

Document image

Custom tabs

Apart from the default tabs, you can add custom tabs for some tools that you want easy access to like development tools or design references. One workflow can be to have device previews on the left side of the app window and have Vue.js documentation open on the other side.

Here are some more ideas for custom tabs:

  • Development tools such as Storybook, GraphQL, or Prisma Studio
  • Design references
  • Project documentation or guidelines
  • Other websites or web apps you'd like to copy "take inspiration" from

To add a custom tab, right-click anywhere on the tab bar and select Customize Debugging Panel.

Document image

Go to the Custom Tabs entry and click on Add Custom Tab.

Document image

Enter the name and URL for the tab. Make additional tabs with the Create button on the top left and save your changes.

You can also toggle the tab visibility or delete a tab using the toggles on the left or the 🗑 Trash icon to the right of each entry respectively.

Document image

The tabs will now be visible in the debugging panel.

Document image

Butler shortcuts

In addition to using the tab bar, you can open or switch between tabs using Butler.

Invoke Butler with Ctrl+Shift+P on Windows/Linux, or Cmd+Shift+P on macOS.

Activating a tab

In Butler, enter the name of the tab that you want to open (say, DevTools). You can open both built-in and custom tabs.

This gives you access to not only the DevTools tab but also lets you choose the DevTools for individual devices in the workspace.

Document image

As a bonus, Butler opens a tab even when the debugging panel is collapsed.

Document image

Accessing hidden tabs

If you've hidden a default tab (Cookies in this example) and want to access it without permanently adding it back to the panel's tab bar, open Butler, enter "cookies" and hit Enter/Return.

Document image

This will open a popup window instead of a tab. Make changes and click anywhere outside the popup to close it.

Document image