技能 chrome-devtools
🖥️

chrome-devtools

低風險 ⚙️ 外部命令

Automatiza Chrome y Depura Páginas Web

La automatización del navegador es lenta y propensa a errores con comandos manuales. Esta skill proporciona patrones optimizados para automatizar Chrome, depurar páginas, capturar capturas de pantalla e inspeccionar solicitudes de red a través del servidor chrome-devtools-mcp.

支援: Claude Codex Code(CC)
📊 69 充足
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「chrome-devtools」。 Take a screenshot of https://example.com

預期結果:

  • Captura de pantalla capturada exitosamente (página completa, formato PNG)
  • Sesión del navegador limpiada automáticamente
  • Comando completado en aproximadamente 8 segundos

正在使用「chrome-devtools」。 Check console errors on localhost:3000

預期結果:

  • Mensajes de consola encontrados: 3 errores
  • Error 1: Uncaught ReferenceError at line 42
  • Error 2: TypeError: undefined is not an object

正在使用「chrome-devtools」。 Show network requests on example.com

預期結果:

  • Solicitudes de red capturadas: 12 en total
  • GET / (200 OK) - 15ms
  • GET /styles.css (200 OK) - 45ms
  • GET /api/data (304 Not Modified) - 23ms

安全審計

低風險
v5 • 1/16/2026

Documentation-only skill providing patterns for chrome-devtools-mcp server. Contains only markdown files with shell command examples for legitimate browser automation. No executable code, no credential access, no network exfiltration. Static findings are false positives from pattern detection in documentation text.

2
已掃描檔案
343
分析行數
1
發現項
5
審計總數

風險因素

⚙️ 外部命令 (1)
審計者: claude 查看審計歷史 →

品質評分

38
架構
100
可維護性
85
內容
30
社群
90
安全
91
規範符合性

你能建構什麼

Depurar Desarrollo Local

Verificar errores de consola y solicitudes de red en servidores de desarrollo localhost rápidamente.

Automatizar Pruebas de Navegador

Tomar capturas de pantalla y capturar contenido de páginas para verificar cambios y comportamiento de la interfaz.

Extraer Datos de Páginas Web

Navegar a páginas, ejecutar scripts y capturar instantáneas de contenido para flujos de trabajo de extracción de datos.

試試這些提示

Verificar Errores de Consola
Check console errors on http://localhost:3000 using chrome-devtools skill
Capturar Captura de Pantalla
Take a full-page screenshot of https://example.com using chrome-devtools
Inspeccionar Red
Show all network requests on https://httpbin.org using chrome-devtools
Ejecutar JavaScript
Run JavaScript on https://example.com to count all div elements

最佳實務

  • Usar modo shell con múltiples comandos en un pipeline para una ejecución más rápida
  • Siempre usar la bandera --isolated para prevenir conflictos de bloqueo del perfil del navegador
  • Incluir envoltura de timeout para prevenir comandos que se cuelguen

避免

  • Ejecutar sesiones shell separadas para cada comando causa problemas de bloqueo del navegador
  • Omitir el paso de limpieza conduce a errores de navegador ya en ejecución
  • Usar npx en lugar de bunx puede causar problemas de compatibilidad

常見問題

¿Qué navegadores son compatibles?
Solo Google Chrome es compatible. El servidor MCP usa el protocolo Chrome DevTools directamente.
¿Cuál es el tamaño máximo de captura de pantalla?
Las capturas de pantalla admiten captura de página completa. Las páginas grandes pueden tardar más en procesarse.
¿Cómo me conecto a una instancia de Chrome existente?
Iniciar Chrome con la bandera --remote-debugging-port=9222 y usar el parámetro --browserUrl.
¿Están seguros mis datos de navegación?
La bandera --isolated usa perfiles de navegador temporales. Evitar visitar sitios sensibles durante la automatización.
¿Por qué obtengo errores de bloqueo del navegador?
Instancias anteriores del navegador están reteniendo el perfil. Ejecutar pkill -9 -f chrome-devtools-mcp primero.
¿Cómo se compara esto con Puppeteer o Playwright?
Esto usa el protocolo Chrome DevTools MCP directamente. Es más ligero pero menos rico en funciones que esas herramientas.

開發者詳情

檔案結構

📄 SKILL.md