Documentation
Web Editor
DevTools

DevTools

CodeSandbox Projects Preview

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 in the + button on the header or by pressing Cmd/Clt shift o to open the DevTool menu.

Manage your DevTool

CodeSandbox Projects Preview

Minimize

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

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.

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 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].

Last updated on August 3, 2022