---
title: "The DevTools panel: changes, files, history, PRs"
question: devtools panel
area: quadrants
surface: desktop
audience: beginner
keywords: [devtools, dev tools, developer tools, inspector, changes, source control, source control panel, git panel, explorer, browse files, find file, history, commit, commit history, commit and push, PRs, pull requests, github actions, workflows, tabs]
related: [the-built-in-browser, what-is-a-quadrant, whats-inside-a-quadrant]
updated: 2026-07-21
---

# The DevTools panel: changes, files, history, PRs

DevTools is the panel you open next to the web preview, and five tabs run along its top, each with one job. 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. **Changes** stages and commits your edits, **Explorer** browses your files, **History** shows past commits, **PRs** lists GitHub pull requests, and **Actions** lists GitHub Actions runs. Click the name of the tab you want. Unlike the terminal, your mouse works inside this panel, so you can click and scroll as you would in Chrome.

## The five tabs

**Changes** is your Git working area. It groups every edit into **Staged Changes**, **Changes**, **Untracked** and **Merge Changes**. Click the **+** on a file to stage it, type a message in the **Message** box, and click **✓** to commit; click a row to see its diff, **−** to unstage, or **↶** to discard your edits. The bar at the top shows your branch name (click it to switch branches) and three round buttons: **↑** to push, **↓** to pull, and **⟳** to fetch.

**Explorer** is a file tree of the folder. Click a folder to open it (▶ closed, ▼ open) and a file to read it, or type in the **Search files…** box to jump to a file by name. It hides heavy folders like `node_modules`, `dist` and `build` so you see your real project files.

**History** lists the project's commits, newest first, each row showing a short code, the message, the author's initials and how long ago it was made. Click a commit to see the exact lines it added and removed, click **Load more** for the next fifty, or **⟳** to refresh.

**PRs** lists the open pull requests for the folder's GitHub repository, so it needs your GitHub account connected: click **Connect GitHub** and approve codus in your browser using the code the panel shows. Each row has an **Open** button that opens the pull request on github.com and a **Checkout** button that downloads its branch and switches your local folder to it; **+ New** starts a new one if you have push access.

**Actions** lists your GitHub Actions workflows from the repo's `.github/workflows/` folder and their recent runs, and also needs GitHub connected with the workflow permission (if your connection is missing it, a **Reconnect to enable Actions** button grants it). Click a workflow, set the branch, tag or commit in the **Ref** box, and click **Run**. Only workflows set up for manual runs can be started this way; the rest show their past runs read-only.

## Common problems

- **The </> button is greyed out.** DevTools opens into the quadrant directly above or below the preview, so that neighbour must be switched on. The tooltip says so: "DevTools needs the column-partner quadrant enabled (it hosts the panel)".
- **A tab looks empty.** **Changes**, **Explorer** and **History** only work when the folder here is a Git repository (otherwise you get "Not a git repository" or "No folder selected"), and **PRs** and **Actions** need GitHub connected first.