Agent Skills › ChromeDevTools/devtools-frontend › devtools-verification

devtools-verification

GitHub

提供 DevTools 项目构建、测试和代码健康验证的标准化指令。强制使用 ./dt 替代 npm,规范测试运行、编译检查、Lint 及 Tryjob 结果获取流程,确保正确执行仓库特定命令。

.agents/skills/devtools-verification/SKILL.md ChromeDevTools/devtools-frontend

Trigger Scenarios

需要构建或编译项目时 运行测试或 Lint 检查时 验证代码质量或健康状态时 获取 Tryjob 失败日志或截图黄金文件时

Install

npx skills add ChromeDevTools/devtools-frontend --skill devtools-verification -g -y
More Options

Non-standard path

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

Use without installing

npx skills use ChromeDevTools/devtools-frontend@devtools-verification

指定 Agent (Claude Code)

npx skills add ChromeDevTools/devtools-frontend --skill devtools-verification -a claude-code -g -y

安装 repo 全部 skill

npx skills add ChromeDevTools/devtools-frontend --all -g -y

预览 repo 内 skill

npx skills add ChromeDevTools/devtools-frontend --list

SKILL.md

Frontmatter
{
    "name": "devtools-verification",
    "description": "MANDATORY: Activate this skill ANY TIME you need to build the project, run tests, or verify code health in DevTools. You MUST use this skill before executing commands like .\/dt test, .\/dt build, autoninja, or linters (never run these through npm or npx), as it contains critical, repository-specific instructions on how to correctly format these commands, filter test runs, and interpret failures."
}

Instructions on how to verify your changes

Running scripts

Run the scripts from the root package.json (test, lint, build, start, and so on) with ./dt <script> [args] from the repository root (on Windows: .\dt <script> [args]). Don't use npm run, npm test, or npx for them. Run ./dt without arguments to list the available scripts. Arguments after the script name are passed to the script as is, so don't add a -- separator.

Testing

  • To test a file, you can run ./dt 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, ./dt test front_end/models/trace will run all tests in that directory.

Building & compiling

  • Check for build issues by running autoninja -C out/Default.

Linting

  • ./dt 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 ./dt lint <PATH> where PATH is a path to a file or directory. This will also automatically fix violations where possible.

Fetching Tryjob Results, Failure Logs, & Screenshot Goldens

Use scripts/tools/get_cl_test_results.py to fetch all tryjob build statuses, per-test failure logs, Blink web test text diffs, and screenshot artifacts (actual_image, expected_image, image_diff) for a CL in one command:

# Fetch all build statuses, failure logs, and artifacts for a CL into an output directory:
scripts/tools/get_cl_test_results.py --cl <CL_NUMBER> --output-dir <OUTPUT_DIR>

# Filter for specific failing tests (e.g. DOMTreeWidget) or specific builders:
scripts/tools/get_cl_test_results.py --cl <CL_NUMBER> --test-filter "DOMTreeWidget" --output-dir <OUTPUT_DIR>

# Also apply Linux actual_image screenshot artifacts directly to test/goldens/linux/...:
scripts/tools/get_cl_test_results.py --cl <CL_NUMBER> --output-dir <OUTPUT_DIR> --apply-goldens

Screenshot Golden & Inspection Rules

  • Linux-only goldens: Never generate, update, or commit golden PNGs from macOS. Screenshot tests in DevTools only use Linux goldens (test/goldens/linux/...) produced by Linux trybots (dtf_linux_rel / dtf_linux_dbg). Do not run screenshot tests locally on macOS to verify goldens.
  • Multimodal inspection only: Always inspect actual_image.png, expected_image.png, and image_diff.png directly using your multimodal file viewer (view_file). Never write or run programmatic image comparison scripts.

Best practices

  • Run tests often to verify your changes.
  • Prefer using a fast build, if it exists, to keep the feedback loop shorter.
  • Periodically build to check for errors.
  • Run git cl presubmit -u at the end of your code changes.

Version History

  • 6527f72 Current 2026-10-20 02:26

    将脚本执行方式从 npm run/npx 替换为自定义启动器 ./dt,以适配无 npm 环境并确保命令格式正确。

  • fa08629 2026-09-23 06:25

    新增get_cl_test_results.py脚本以统一获取CL构建状态、失败日志及截图工件;重构update_goldens.py;新增Linux专属截图黄金标准规则及多模态检查指南。

  • 678d19c 2026-08-20 15:20

Same Skill Collection

.agents/skills/code-review/SKILL.md
.agents/skills/devtools-ci/SKILL.md
.agents/skills/devtools-imports/SKILL.md
.agents/skills/devtools-model-management/SKILL.md
.agents/skills/devtools-setting-migration/SKILL.md
.agents/skills/devtools-source-maps/SKILL.md
.agents/skills/devtools-testing-guidance/SKILL.md
.agents/skills/devtools-unicode-escaping/SKILL.md
.agents/skills/devtools-ux-writing-refactor/SKILL.md
.agents/skills/evaluate-ai-css-completion/SKILL.md
.agents/skills/fix-tests/SKILL.md
.agents/skills/fixing-skipped-tests/SKILL.md
.agents/skills/foundation-test-migration/SKILL.md
.agents/skills/gerrit-cli/SKILL.md
.agents/skills/merging-devtools-module/SKILL.md
.agents/skills/migrate-chromium-test/SKILL.md
.agents/skills/review-models-core/SKILL.md
.agents/skills/review-tests/SKILL.md
.agents/skills/review-ui-widgets/SKILL.md
.agents/skills/ui-eng-vision-local-lit-renderer/SKILL.md
.agents/skills/ui-eng-vision-logic-consolidator/SKILL.md
.agents/skills/ui-eng-vision-orchestrator/SKILL.md
.agents/skills/ui-eng-vision-test-scaffolder/SKILL.md
.agents/skills/ui-eng-vision-widget-promoter/SKILL.md
.agents/skills/ui-widgets/SKILL.md
.agents/skills/version-control/SKILL.md
.agents/skills/repro-flaky-tests/SKILL.md

Metadata

Files
0
Version
6527f72
Hash
c2d3aecb
Indexed
2026-08-20 15:20

홈 - 위키
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-10-21 16:18
浙ICP备14020137号-1