DevTools
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.
Start a Devtool
You can add a Devtool by clicking on the + button on the header or by pressing Cmd/Clt shift o to open the DevTool menu.
Manage your DevTool
Minimize
Minimize the Devtool by clicking on 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
Close the Devtool by clicking on the ... in the top left corner and selecting the option Close. You can also close all devtools through the command palette (Cmd/Clt K) by 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 the option Close and stop.
Reorder
Drag and drop to reorder the Devtools, or click on the ... button in the top right corner, then choose Move up or Move down.
Configure
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.
Available DevTools
We are working on supporting other DevTools in the future, which may include:
- Test runner UI
- Viewing / editing Design Tokens (opens in a new tab) in a project
- Viewing components in isolation and changing their props from a UI
- Postman (opens in a new tab) integration
- Bundle size analyzer
If you would like to collaborate on building a DevTool, please reach out to us at [email protected].