How do I use the DevTools panel?

Codus gives you two ways into DevTools:

• Click DevTools in a quadrant's bottom bar for the project drawer. It slides in from the side of the window, fills the height between Codus's top and bottom bars, and stops at that quadrant's nearest edge so the quadrant stays visible. A left-hand quadrant opens the drawer from the right; a right-hand quadrant opens it from the left. The drawer stays open while you click elsewhere; close it with its ×, the DevTools button, or Escape.
• With a web preview open, click </> on the preview toolbar (or press Cmd+Option+I) for Chrome's page inspector. It opens in the slot directly above or below the preview and keeps the project tools beside it.

Both entrances provide five project tabs: 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. Unlike the terminal, your mouse works throughout DevTools.

When Claude Code, Codex, or one of your project terminals prints a source reference such as src/Quadrant.tsx:1746:12, the path becomes clickable. Clicking it opens the project drawer, loads that file in the built-in editor, and places the cursor at the referenced line and column. Codus ignores web links, version numbers, paths that leave the assigned project, and absolute paths belonging to another folder.

Changes and Explorer always open as a steady, narrow file list with an editor workspace beside it. Opening a file or change uses that workspace without resizing the list, so nothing jumps as you click through the project. If the current file has unsaved edits, Codus asks before replacing it. Closing the editor or diff returns the workspace to its helpful "Choose a file" message while keeping the same layout.

You can keep arranging the workspace while the project drawer is open. Drag the visible horizontal divider, the vertical divider at the drawer's inner edge, or their centre grip as usual; the quadrants resize and the drawer follows its source quadrant without closing.

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. Only the Chrome inspector needs the quadrant directly above or below the preview to be switched on. The DevTools button in the source quadrant's bottom bar still opens the project drawer without a preview or partner quadrant.
• 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.