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.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「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