What is DevTools, and how do I open it?
Click DevTools in a quadrant's bottom bar to open that project's file and source-control drawer. You do not need a running browser preview. The preview's </> button is a separate entrance that also opens the webpage inspector.
Before you start
Assign the intended project folder. Source-control operations need a Git repository; GitHub pull requests and Actions need the relevant GitHub connection and permissions.
Open the right tools
- For project files, click DevTools in the source quadrant's bottom bar.
- Select Changes, Explorer, History, PRs or Actions.
- Click a file or change to open it in the editor area. Follow an unsaved-edit warning before switching away.
- A file reference printed in the terminal can open this same drawer at its exact line and column.
- If you need webpage elements, console or network requests, open the preview and use </>.
The project drawer opens from the appropriate side while keeping the source quadrant visible. You can resize the workspace while it is open. Close it with ×, DevTools or Escape when the key is not being used by an active control.
If a control is unavailable
A greyed-out preview </> button can indicate that its required partner pane is disabled. That does not prevent the independent project drawer from opening through DevTools.
An empty Git tab, unavailable GitHub connection and a browser inspector with no page are different cases. Read the error in the relevant tab instead of assuming the whole panel failed.
How do I know it worked?
The drawer names the correct project and shows the selected file or source-control view. A file link lands at the expected location. Saving a file, committing it and pushing it are separate actions; opening DevTools does none of them.