---
title: What is the DevTools panel and how do I open it?
question: open DevTools
area: browser
order: 6
surface: desktop
audience: beginner
keywords: [devtools, dev tools, developer tools, inspector, code panel, less than greater than button, open devtools, cmd option i, changes, explorer, history, prs, actions, git panel, greyed out]
related: [the-devtools-panel, how-do-i-review-and-commit-my-changes, how-do-i-browse-files-history-and-pull-requests]
updated: 2026-07-21
---

# What is the DevTools panel and how do I open it?

DevTools is a panel you open next to the preview for looking under the hood of your project: reviewing the code changes your agent made, browsing files, and working with GitHub. Open it by clicking the **</>** button on the preview's toolbar, or press **Cmd+Option+I**. It opens in the slot directly above or below the preview, and its title bar reads **DevTools** followed by your quadrant's label, such as **DevTools — Q1**.

Like the preview, and unlike the terminal, your mouse works everywhere inside this panel. You can click, scroll, and select just as you would in a normal app.

## What is inside the panel

The panel has two parts side by side, with a divider you can drag to change how much space each gets. Double-click the divider to reset it.

- The larger area shows the same developer tools you get in a web browser, such as the Elements and Console views, pointed at the page in your preview.
- Down one side is a set of five tabs for your project's files and version history.

The five tabs run along the top:

- **Changes** stages and commits your edits.
- **Explorer** browses your files.
- **History** shows past commits.
- **PRs** lists GitHub pull requests.
- **Actions** lists GitHub Actions runs.

Click the name of the tab you want. [Review and commit your changes](how-do-i-review-and-commit-my-changes.md) covers the **Changes** tab, and [Browse files, history, and pull requests](how-do-i-browse-files-history-and-pull-requests.md) covers the other four.

## Closing it

Click the **×** in the panel's top-right corner, or press **Cmd+Option+I** again. Both read "Close DevTools (⌘⌥I)".

## Common problems

**The </> button is greyed out.** DevTools needs somewhere to open. It uses the quadrant directly above or below the preview, so that neighbour must be switched on. The button's tooltip says exactly this: "DevTools needs the column-partner quadrant enabled (it hosts the panel)". Turn that quadrant on and the button becomes available.

**A tab looks empty or says "Not a git repository".** The **Changes**, **Explorer**, and **History** tabs only work when the folder in this quadrant is a Git project. **PRs** and **Actions** need your GitHub account connected first. See [Browse files, history, and pull requests](how-do-i-browse-files-history-and-pull-requests.md).