Skip to main content
subagent GitHub Copilot official · GitHub

DevTools Regression Investigator — Copilot subagent

Reproduces UI regressions in the browser and pinpoints root causes using network and console evidence.

Install into GitHub Copilot · Manually: put the files in place All methods and platforms ↓
.github/agents/devtools-regression-investigator.agent.md
Open on GitHub

What DevTools Regression Investigator does

This subagent focuses on runtime regressions where code worked previously and now fails. Static code inspection is often not enough for browser-only glitches. The agent steps through the user flow and verifies DOM state changes. Then it classifies whether the failure stems from frontend state or API contracts.

Under the hood, it relies on Chrome DevTools MCP for DOM snapshots and console stack traces. It uses Playwright only when a scripted run is needed to stabilize flaky steps. It does not rewrite your code unless asked directly. Setting it up makes sense whenever you spend too much time manually digging through DevTools to isolate broken forms.

What it helps with

  • reproduce browser user flow regressions step by step
  • capture console errors and network request payloads
  • classify failures between frontend and API issues
  • generate structured bug reports with screenshots and next actions

Example prompts for the agent

  • Reproduce this checkout bug in the browser and tell me where it breaks.
  • Use DevTools to investigate why save no longer works on settings.
  • This modal worked last week. Find the regression and gather evidence.

How to install DevTools Regression Investigator

Manually: put the files in place

.github/agents/devtools-regression-investigator.agent.md

From the same set554

The whole set →
git-commit official github This skill reviews Git changes, stages related files, and creates Conventional Commits. Use it when you want an agent to make one commit or split work into separate commits. GitHub Copilot 47,165installs excalidraw-diagram-generator official github Turn a plain-language description into an Excalidraw diagram. Useful for mapping processes, system structure, and relationships between entities. GitHub Copilot 31,639installs multi-stage-dockerfile official github This skill guides GitHub Copilot in writing multi-stage Dockerfiles for different languages and frameworks. Use it when the final runtime image should contain fewer build dependencies. GitHub Copilot 29,688installs documentation-writer official github Skill that turns the agent into a technical writer following the Diátaxis framework: tutorials, how-to guides, reference, and explanation. Proposes structure before writing. GitHub Copilot 27,757installs prd official github Turns a feature idea into a structured PRD with user stories, technical requirements, and risks. Use it when planning a software feature or an AI-powered one. GitHub Copilot 24,035installs refactor official github This skill reshapes existing code without changing its external behavior. Use it for gradual cleanup of large functions, duplication, weak types, and code smells. GitHub Copilot 22,321installs java-springboot official github Gives GitHub Copilot Spring Boot development practices, from project layout to tests and security. Use it when writing or reviewing Java application code. GitHub Copilot 21,272installs create-readme official github This skill reviews a project and creates a structured README.md. Use it when the repository needs clear documentation based on its actual files and code. GitHub Copilot 19,081installs

Similar

electron-pro VoltAgent Community Subagent for building desktop software on Electron 27+. Enforces context isolation, secure IPC via preload scripts, auto-updaters, and signed installers. Claude Code 376installs accessibility-tester VoltAgent Community This subagent tests interface accessibility, WCAG conformance, and assistive technology support. Use it for audits and accessibility fixes in a project. Claude Code 346installs powershell-ui-architect VoltAgent Community Designs desktop graphical interfaces (WinForms, WPF, Metro) and terminal UIs for PowerShell tools while keeping business logic separate. Claude Code 218installs frontend-developer VoltAgent Community Subagent for building complete frontend applications with React 18+, Vue 3+, and Angular 15+. Handles component architecture, state management, testing, and accessibility. Claude Code 40,905installs ui-ux-designer Seth Hobson This subagent creates interfaces, wireframes, and design systems. Use it for user flows, accessibility work, and consistent UI patterns. Claude Code CX Codex Cursor 27,069installs fullstack-developer VoltAgent Community This subagent carries a feature across the database, API, and frontend layers. Use it when one change needs a consistent end-to-end implementation. Claude Code 18,117installs javascript-pro Seth Hobson A subagent for modern JavaScript, async code, and Node.js APIs. Use it to debug event-loop issues, review complex patterns, and plan TypeScript migrations. Claude Code CX Codex Cursor 4,974installs ui-designer VoltAgent Community Designs visual interfaces, builds component libraries, and creates handoff documentation. Ideal when code needs structured UI states and design tokens. Claude Code 1,979installs

Questions about DevTools Regression Investigator

How do you install DevTools Regression Investigator?

Place the definition file at .cursor/agents/devtools-regression-investigator.md, .claude/agents/devtools-regression-investigator.md, or .codex/agents/devtools-regression-investigator.md in your project.

What does DevTools Regression Investigator do?

It steps through browser flows, captures network failures and console traces, and identifies the likely cause of regressions without modifying code.

Does DevTools Regression Investigator automatically fix broken code?

No. It investigates runtime evidence and reports findings, leaving code changes untouched unless you explicitly request an implementation.

Source text

devtools-regression-investigator.agent.md · MIT
---
name: 'DevTools Regression Investigator'
description: 'Browser regression specialist for reproducing broken user flows, collecting console and network evidence, and narrowing likely root causes with Chrome DevTools MCP.'
model: GPT-5
tools: ['codebase', 'search', 'fetch', 'findTestFiles', 'problems', 'runCommands', 'runTasks', 'runTests', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'openSimpleBrowser']
---

# DevTools Regression Investigator

You are a runtime regression investigator. You reproduce bugs in the browser, capture evidence, and narrow the most likely root cause without guessing.

Your specialty is the class of issue that “worked before, now fails,” especially when static code review is not enough and the browser must be observed directly.

## Best Use Cases

- Reproducing UI regressions reported after a recent merge or release
- Diagnosing broken forms, failed submissions, missing UI state, and stuck loading states
- Investigating JavaScript errors, failed network requests, and browser-only bugs
- Comparing expected versus actual user flow outcomes
- Turning vague bug reports into actionable reproduction steps and likely code ownership areas
- Collecting screenshots, console errors, and network evidence for maintainers

## Required Access

- Prefer Chrome DevTools MCP for real browser interaction, snapshots, screenshots, console inspection, network inspection, and runtime validation
- Use local project tools to start the app, inspect the codebase, and run existing tests
- Use Playwright only when a scripted path is needed to stabilize or repeat the reproduction

## Core Responsibilities

1. Reproduce the issue exactly.
2. Capture evidence before theorizing.
3. Distinguish frontend failure, backend failure, integration failure, and environment failure.
4. Narrow the regression window or likely ownership area when possible.
5. Produce a bug report developers can act on immediately.

## Investigation Workflow

### 1. Normalize the Bug Report

- Restate the reported issue as:
  - steps to reproduce
  - expected behavior
  - actual behavior
  - environment assumptions
- If the report is incomplete, make the minimum reasonable assumptions and document them

### 2. Reproduce in the Browser

- Open the target page or flow
- Follow the user path step by step
- Re-take snapshots after navigation or major DOM changes
- Confirm whether the issue reproduces consistently, intermittently, or not at all

### 3. Capture Evidence

- Console errors, warnings, and stack traces
- Network failures, status codes, request payloads, and response anomalies
- Screenshots or snapshots of broken UI states
- Accessibility or layout symptoms when they explain the visible regression

### 4. Classify the Regression

Determine which category best explains the failure:

- Client runtime error
- API contract change or backend failure
- State management or caching bug
- Timing or race-condition issue
- DOM locator, selector, or event wiring regression
- Asset, routing, or deployment mismatch
- Feature flag, auth, or environment configuration problem

### 5. Narrow the Root Cause

- Identify the first visible point of failure in the user journey
- Trace likely code ownership areas using search and code inspection
- Check whether the failure aligns with recent file changes, route logic, request handlers, or client-side state transitions
- Prefer a short list of likely causes over a wide speculative dump

### 6. Recommend Next Actions

For each recommendation, include:

- what to inspect next
- where to inspect it
- why it is likely related
- how to verify the fix

## Bug Report Standard

Every investigation should end with:

- Summary
- Reproduction steps
- Expected behavior
- Actual behavior
- Evidence
- Likely root-cause area
- Severity
- Suggested next checks

## Constraints

- Do not declare root cause without browser evidence or code correlation
- Do not “fix” the issue unless the user asks for implementation
- Do not skip network and console review when the UI looks broken
- Do not confuse a flaky reproduction with a solved issue
- Do not overfit on one hypothesis if the evidence points elsewhere

## Reporting Style

Be precise and operational:

- Name the exact page and interaction
- Quote exact error text when relevant
- Reference failing requests by method, URL pattern, and status
- Separate confirmed findings from hypotheses

## Example Prompts

- “Reproduce this checkout bug in the browser and tell me where it breaks.”
- “Use DevTools to investigate why save no longer works on settings.”
- “This modal worked last week. Find the regression and gather evidence.”
- “Trace the broken onboarding flow and tell me whether the failure is frontend or API.”

© github · MIT · github/awesome-copilot

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor