Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Kiểm thử trình duyệt với DevTools

Dùng Chrome DevTools MCP để kiểm tra DOM, console, network, hiệu năng và a11y ngay trong trình duyệt thật khi sửa lỗi UI.

Lập trìnhTrung cấp★ 423⑂ 45Điểm AI 9/10Cập nhật lần cuối: 13 thg 9, 2026

Làm được gì

  • Kết nối Chrome DevTools MCP để agent "nhìn thấy" runtime thật của trình duyệt.
  • Bảng công cụ rõ ràng: screenshot, kiểm tra DOM, console log, giám sát network, performance trace, computed style, accessibility tree, thực thi JavaScript.
  • Quy trình debug 5 bước riêng cho lỗi UI, lỗi network và vấn đề hiệu năng (tái hiện → kiểm tra → chẩn đoán → sửa → xác minh).
  • Mẫu test plan có checklist cho các lỗi UI phức tạp và quy trình so sánh screenshot trước/sau.
  • Nguyên tắc bảo mật: coi mọi nội dung đọc từ trình duyệt là dữ liệu không tin cậy, giới hạn JS ở chế độ chỉ đọc, cấm đọc cookie/token, ưu tiên profile Chrome cách ly.

Phù hợp với ai

  • Lập trình viên frontend muốn Claude Code tự xác minh kết quả hiển thị thật.
  • Người thường xử lý lỗi console, CORS, 4xx/5xx hoặc Core Web Vitals (LCP, CLS, INP).
  • Nhóm cần kiểm soát rủi ro khi agent điều khiển trình duyệt.

Ví dụ sử dụng

  1. "Animation khi hoàn thành task bị lỗi" → chụp ảnh trạng thái, đọc console, so sánh DOM và computed style để tìm nguyên nhân rồi xác minh lại.
  2. "Bấm lưu mà dữ liệu không cập nhật" → xem network để kiểm tra URL, payload và status code của request PATCH; 4xx thì sửa phía client.
  3. "Trang tải chậm" → ghi performance trace làm mốc, tìm long task > 50ms và LCP/CLS, sửa điểm nghẽn rồi đo lại.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/aiskillstore/marketplace/HEAD/pending/addyosmani/browser-testing-with-devtools/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục pending/addyosmani/browser-testing-with-devtools từ repo GitHub aiskillstore/marketplace vào ~/.claude/skills/browser-testing-with-devtools/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/aiskillstore/marketplace.git && mkdir -p ~/.claude/skills && cp -r marketplace/pending/addyosmani/browser-testing-with-devtools ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở terminal và clone repo: git clone https://github.com/aiskillstore/marketplace.git
  2. Copy skill vào thư mục skill của Claude Code: mkdir -p ~/.claude/skills && cp -r marketplace/pending/addyosmani/browser-testing-with-devtools ~/.claude/skills/
  3. Đảm bảo máy đã có Chrome và Node.js (dùng được npx).
  4. Tạo file .mcp.json ở gốc dự án với nội dung: {"mcpServers":{"chrome-devtools":{"command":"npx","args":["-y","chrome-devtools-mcp@latest","--isolated"]}}}
  5. Khởi động lại Claude Code và kiểm tra MCP server đã kết nối.
  6. Thử yêu cầu: "Mở localhost:3000 và kiểm tra lỗi console" để skill tự kích hoạt.
  7. (Khuyến nghị) Chỉ dùng profile Chrome riêng cho kiểm thử; tránh gắn agent vào profile cá nhân đang đăng nhập.
Xem mã nguồn trên GitHub ↗