Agent skill

verification

View SKILL.md on GitHub Repository
Stars 3,860
Forks 647

Install this agent skill to your Project

npx add-skill https://github.com/ChromeDevTools/devtools-frontend/tree/main/.agents/skills/verification

SKILL.md

Instructions on how to verify your changes

Testing

  • To test a file, you can run npm run test -- <FILEPATH> where FILEPATH is a path to a *.test.ts file, relative to the working directory.
  • Test files are usually defined alongside their implementation. So if you are working on front_end/panels/timeline/TimelinePanel.ts, you would expect the test file to be defined in front_end/panels/timeline/TimelinePanel.test.ts.
  • You can also test an entire directory. For example, npm run test -- front_end/models/trace will run all tests in that directory.

Building & compiling

  • Check for TypeScript or dependency issues in the build system by running autoninja -C out/Default.

Fast builds

  • If the out/Fast or out/fast-build directory exists, this means that a build that does not execute TypeScript is available to you which greatly decreases build time.
  • To use the fast build for tests, pass the --target=Fast (adjust the value based on the name of the directory) argument to npm run test.

Linting

  • npm run lint will execute ESLint and StyleLint. It will report any violations and automatically fix them where possible.
  • To run the linter on a specific file or directory, you can run npm run lint -- <PATH> where PATH is a path to a file or directory. This will also automatically fix violations where possible.

Best practices

  • Run tests often to verify your changes.
  • Prefer using a fast build, if it exists, to keep the feedback loop shorter.
  • Periodically compile with TypeScript to check for type errors.
  • Run linting at the end of your code changes.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

ChromeDevTools/devtools-frontend

devtools-ui-widgets

Guidelines for building UI widgets using the MVP architecture in DevTools. Covers Widget lifecycle, lit-html views, and state management.

3,860 647
Explore
ChromeDevTools/devtools-frontend

devtools-version-control

Use when managing branches, creating and uploading CLs, or handling stacked changes in the DevTools Gerrit-based workflow.

3,860 647
Explore
ChromeDevTools/devtools-frontend

creating-a-model

3,860 647
Explore
ChromeDevTools/devtools-frontend

devtools-imports

Conventions for importing code in Devtools to avoid build errors. Covers cross-module imports, internal imports, and the "import * as" requirement.

3,860 647
Explore
ChromeDevTools/devtools-frontend

devtools-module-merging

Workflow for merging a DevTools submodule into its parent module. Covers BUILD.gn consolidation and updating devtools_grd_files.gni.

3,860 647
Explore
ChromeDevTools/chrome-devtools-mcp

memory-leak-debugging

Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to analyze heapsnapshots or run memory leak detection tools like memlab.

32,738 1,940
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results