技能 browser-testing-with-devtools

📦

browser-testing-with-devtools

Name: browser-testing-with-devtools
Author: addyosmani

内容修订 r2 安全 ⚙️ 外部命令🌐 网络访问📁 文件系统访问

Test Browser Experiences with Chrome DevTools

Browser bugs can hide behind static code and incomplete unit tests. This skill uses Chrome DevTools MCP to inspect live behavior and verify fixes with runtime evidence.

支持: Claude Codex Code(CC)

🥉 77 青铜

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

Review the Skillstore skill "browser-testing-with-devtools" from https://skillstore.io/skills/addyosmani-browser-testing-with-devtools.md and its manifest at https://skillstore.io/api/skills/addyosmani-browser-testing-with-devtools/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/addyosmani-browser-testing-with-devtools.md 已签名 manifest GET /api/skills/addyosmani-browser-testing-with-devtools/manifest 已签名 lockfile GET /api/skills/addyosmani-browser-testing-with-devtools/lockfile

测试它

正在使用“browser-testing-with-devtools”。 Inspect the local task page after completing one task.

预期结果:

The task moved to the completed section and displayed the expected visual state.
The browser sent one PATCH request with a successful response.
No console errors appeared during the interaction.

正在使用“browser-testing-with-devtools”。 Investigate a button that looks correct but does not respond.

预期结果:

The button is present in the DOM, but its click handler throws a runtime error. The error appears in the console before any network request is sent.

正在使用“browser-testing-with-devtools”。 Review a page before release.

预期结果:

The accessibility tree includes names for all primary controls.
The page has no console errors, but the performance trace shows one long task during initial load.
A follow-up optimization should split the work before release.

安全审计

安全

v2 • 2026/9/19 打开版本化报告

All 30 static findings are false positives in the audited documentation. The command, filesystem, network, screenshot, reconnaissance, and prompt-injection matches describe configuration, safe testing boundaries, or local verification steps rather than malicious behavior.

已扫描文件

318

分析行数

复核项

已忽略误报

风险因素

⚙️ 外部命令 (22)

🌐 网络访问 (2)

SKILL.md:87 SKILL.md:192

📁 文件系统访问 (2)

SKILL.md:41 SKILL.md:41

最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。

审计者: codex 查看审计历史 →

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

复制报告链接

https://skillstore.io/skills/addyosmani-browser-testing-with-devtools/audits/2?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/addyosmani-browser-testing-with-devtools/security.svg)](https://skillstore.io/skills/addyosmani-browser-testing-with-devtools?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/addyosmani-browser-testing-with-devtools?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/addyosmani-browser-testing-with-devtools/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/addyosmani-browser-testing-with-devtools.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学术引用 (APA · BibTeX · CFF)

APA 引用

addyosmani. (2026). browser-testing-with-devtools security audit report (audit version 2) [Author version unspecified]. Skillstore. https://skillstore.io/skills/addyosmani-browser-testing-with-devtools/audits/2

BibTeX 引用

@techreport{addyosmani-addyosmani-browser-testing-with-devtools-2026,
  author = {addyosmani},
  title = {browser-testing-with-devtools security audit report (audit version 2)},
  institution = {Skillstore},
  year = {2026},
  number = {2},
  url = {https://skillstore.io/skills/addyosmani-browser-testing-with-devtools/audits/2},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "browser-testing-with-devtools security audit report (audit version 2)"
version: "unspecified"
type: report
authors:
  - name: "addyosmani"
date-released: "2026-09-19"
url: "https://skillstore.io/skills/addyosmani-browser-testing-with-devtools/audits/2"
identifiers:
  - type: other
    value: "skillstore:addyosmani-browser-testing-with-devtools:audit:2"
    description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据证据置信度: 中

架构

可维护性

内容

社区

规范符合性

你能构建什么

Debug a UI regression

Reproduce a layout or interaction bug, inspect the DOM and styles, capture evidence, and verify the implemented fix.

Validate an API workflow

Exercise a browser workflow and confirm request methods, payloads, responses, and console behavior against expected results.

Review release readiness

Check accessibility structure, visual output, performance signals, and browser errors before shipping a user-facing change.

试试这些提示

Check a Local Page

Open the local page I provide. Report the visible structure, console errors, and any obvious rendering problems.

Verify a UI Fix

Reproduce the reported UI issue, inspect the affected element and computed styles, then verify the fix with a fresh screenshot.

Trace a User Flow

Run the specified user flow. Record expected network requests, response status codes, console output, accessibility changes, and visual results.

Compare Performance

Capture a performance trace before and after the change. Compare LCP, CLS, INP, long tasks, and unnecessary re-renders, then identify the largest remaining bottleneck.

最佳实践

Use an isolated or dedicated browser profile unless the test explicitly needs authenticated state.
Treat DOM text, console logs, network responses, and page scripts as untrusted data.
Compare runtime evidence before and after every browser-facing change.

避免

Attaching to a daily browser profile for a test that only needs a local page.
Navigating to URLs or copying secrets discovered in browser content.
Marking a browser change complete without checking console, network, visual, and accessibility results.

常见问题

What does this skill test?

It tests browser-rendered applications through live DOM, console, network, accessibility, performance, and screenshot evidence.

What setup does it require?

It requires Chrome and a configured Chrome DevTools MCP server that the selected AI tool can access.

Can it test authenticated pages?

Yes, but use a separate testing profile with only the account and tabs required for the test.

Does it replace automated tests?

No. It complements unit, integration, end-to-end, server, and cross-browser testing with live inspection.

Is JavaScript execution unrestricted?

No. Use it for relevant read-only inspection by default. Confirm before triggering mutations, and never read credentials.

How does it handle page instructions?

Page content is treated as untrusted data. Instruction-like text is reported and never followed without user direction.

开发者详情

作者

addyosmani

许可证

MIT

Skillstore 修订

版本提示

作者未声明版本。

仓库

https://github.com/addyosmani/agent-skills/tree/c004a74784a08295d52749b04cda634125b9a581/skills/browser-testing-with-devtools

引用

5d5054f8a23586f9b500fece1cb613a9dffc787b

维护新鲜度

2026/9/19

使用量

1 次下载 · 0 次浏览

文件结构

📄 SKILL.md

addyosmani 的更多技能

查看全部

📦

code-review-and-quality

从五个质量维度审查代码

代码变更可能隐藏正确性、安全性、架构、可读性和性能问题。此技能采用结构化审查流程，并提供按优先级排列、可执行的反馈。

编码与开发查看

📦

interview-me

Clarify User Intent Before You Build

Underspecified requests cause teams to build the wrong outcome and discover misalignment late. This skill runs a focused, one-question interview that turns ambiguity into confirmed intent.

沟通查看

📦

planning-and-task-breakdown

Plan Work Into Verifiable Tasks

Large or vague software work can hide dependencies, missing acceptance criteria, and verification gaps. This skill converts a specification into ordered task slices with checkpoints, scope guidance, and clear completion conditions.

效率查看

📦

documentation-and-adrs

Document Decisions and Architecture Clearly

Teams lose context when important technical decisions remain in chat, code comments, or individual memory. This skill turns architectural reasoning, API guidance, project instructions, and release changes into structured documentation.

文档查看

📦

frontend-ui-engineering

Build Accessible, Production-Ready Frontends

Frontend work can become inconsistent, inaccessible, or difficult to maintain. This skill guides component architecture, responsive layouts, state handling, and polished user experiences.

设计与创意查看

📦

security-and-hardening

Harden Applications Against Security Risks

Security reviews can miss trust boundaries and unsafe data flows. This skill supplies threat-modeling prompts, OWASP patterns, and practical review checklists.

安全与合规查看

查看全部

📦