Devtools are tools for developers to work faster and more efficiently. They are useful for debugging, testing, and developing. They are collaborative by default, allowing you to share their content: a terminal output, a preview error, a console log...
Add as many devtools as you want. For one or two devtools, the layout will adapt to the viewport; more than three items will create a scroll.
You can add a Devtool by clicking in the
+ button on the header or by pressing Cmd/Clt shift o to open the DevTool menu.
Minimize the Devtool by clicking in the
... icon in the top left corner and selecting the option
Minimize. A minimized view is useful when you have limited viewport space and would like to still track some processes.
Close the Devtool by clicking in the
... in the top left corner and selecting the option
Close. You can also close all devtools through the command pallete (Cmd/Clt K) and typing
close all devtools.
Closing a devtool will not stop it, it will keep running in the background. If you want to stop the process, you must select option
Close and stop.
Drag and drop to reorder the Devtools, or click on the
... button in the top right corner, then choose
Move up or
You can control the name, position and what Devtools to run when you open the Web Editor. Check the
tasks.json documentation for more information on how to configure the Devtools.
Setting up the Devtools makes it easier for non-developers to access and run your project.
We are working on supporting others DevTools in the future, which may include:
- Test runner UI
- Viewing / editing Design Tokens in a project
- Viewing components in isolation and changing their props from a UI
- Postman integration
- Bundle size analyzer
If you would like to collaborate on building a DevTool, please reach out to us at [email protected].