browser-testing-with-devtools
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.
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 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、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「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.
安全審計
安全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.
風險因素
⚙️ 外部命令 (22)
🌐 網路存取 (2)
📁 檔案系統存取 (2)
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/addyosmani-browser-testing-with-devtools/audits/2?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](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/2BibTeX 引用
@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.
試試這些提示
Open the local page I provide. Report the visible structure, console errors, and any obvious rendering problems.
Reproduce the reported UI issue, inspect the affected element and computed styles, then verify the fix with a fresh screenshot.
Run the specified user flow. Record expected network requests, response status codes, console output, accessibility changes, and visual results.
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?
What setup does it require?
Can it test authenticated pages?
Does it replace automated tests?
Is JavaScript execution unrestricted?
How does it handle page instructions?
開發者詳細資訊
作者
addyosmani授權
MIT
Skillstore 修訂
r2
版本提示
作者未聲明版本。
引用
5d5054f8a23586f9b500fece1cb613a9dffc787b
維護新鮮度
2026/9/19
使用量
1 次下載 · 0 次瀏覽
檔案結構
📄 SKILL.md