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.
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.
Go to the Tabs entry. Here, use the toggles to customize which tabs are visible in the panel and save your changes.
Another way to hide tabs is by right-clicking a tab and selecting Hide the "..." tab.
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.
Go to the Custom Tabs entry and click on Add Custom Tab.
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.
The tabs will now be visible in the debugging panel.
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.
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.
As a bonus, Butler opens a tab even when the debugging panel is collapsed.
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.
This will open a popup window instead of a tab. Make changes and click anywhere outside the popup to close it.
