DevTools
DevTools allow you 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. Each one lives in its own tab and each tab can be moved around, reordered or dropped into another tab to split the view.
When a tab is closed, the layout will re-arrange to fill up all the available space. Your layout is persisted in the browser, so you will see the same DevTools when you come back later to your VM.
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 from the dropdown menu ....
Open a DevTool
There are three main ways to open a new DevTool:
- Clicking on the
+sign on the right side of any tabbed panel. This presents a list of available DevTools—and clicking on any DevTool will open it in the current tab. - Double-clicking anywhere between the tabs and the
+button. - Pressing Cmd/Ctrl + Shift + S.
DevTools configuration
You can control the name and position of your DevTools, as well as define which DevTools run when you open the Web Editor. Check the Tasks 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].