Habilidades chrome-devtools-debugging

📦

chrome-devtools-debugging

Name: chrome-devtools-debugging
Author: Consiliency

Revisión del contenido r1 Riesgo alto 🌐 Acceso a red⚡ Contiene scripts⚙️ Comandos externos

Depura apps web con Chrome DevTools

Los errores del navegador suelen ocultarse en los registros de consola, el tráfico de red y el estado autenticado. Esta skill guía a Claude, Codex y Claude Code en la depuración con Chrome DevTools MCP.

Compatible con: Claude Codex Code(CC)

⚠️ 38 Deficiente

Detente y solicita confirmación antes de instalar.

Revisa el plan y obtén el consentimiento explícito del usuario antes de modificar archivos.

Instalar con mi Agente

Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.

Solicitud de agente

Review the Skillstore skill "chrome-devtools-debugging" from https://skillstore.io/skills/consiliency-chrome-devtools-debugging.md and its manifest at https://skillstore.io/api/skills/consiliency-chrome-devtools-debugging/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.

Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.

Recursos legibles por agentes

Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.

Detalle Markdown GET /skills/consiliency-chrome-devtools-debugging.md Manifest firmado GET /api/skills/consiliency-chrome-devtools-debugging/manifest Lockfile firmado GET /api/skills/consiliency-chrome-devtools-debugging/lockfile

Pruébalo

Usando "chrome-devtools-debugging". Encuentra por qué el panel muestra una página en blanco después de iniciar sesión.

Resultado esperado:

La revisión de la consola encontró una excepción del frontend durante el renderizado del panel.
La revisión de red encontró una solicitud de sesión fallida con un error de autorización.
Siguiente paso recomendado: verificar el manejo de actualización de tokens sin exponer valores de tokens.

Usando "chrome-devtools-debugging". Comprueba si la página de producto es lenta por las llamadas de API.

Resultado esperado:

Las solicitudes más lentas fueron las llamadas de búsqueda de productos y metadatos de imágenes.
La traza del navegador mostró que el renderizado esperó la respuesta de búsqueda.
Siguiente paso recomendado: almacenar en caché los metadatos y diferir el trabajo no crítico de imágenes.

Usando "chrome-devtools-debugging". Revisa las advertencias actuales de la consola del navegador antes del lanzamiento.

Resultado esperado:

El informe enumera categorías de advertencias, páginas afectadas, causas probables y responsables sugeridos sin copiar datos sensibles del navegador.

Auditoría de seguridad

Riesgo alto

v10 • 13/7/2026 Abrir el informe versionado

Most static findings are false positives caused by Markdown formatting, reserved example URLs, localhost endpoints, and a normal Python import. The guides expose authenticated browser data, enable remote debugging on logged-in sessions, and recommend an unpinned NPM package. Publication should require version pinning and clear browser isolation and secret-handling safeguards.

Archivos escaneados

1,033

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Preocupaciones de seguridad confirmadas (2)

Alto

SKILL.md:110-130 cookbook/console-debugging.md:91-108 cookbook/network-debugging.md:90-130 reference.md:183-206

Authentication Secrets Printed in Debug Output

The guides direct users to print complete localStorage, sessionStorage, cookies, token values, and inspect authorization headers from authenticated sessions. This can expose credentials in terminal logs or model context.

Multiple explicit examples read and print browser authentication storage, cookies, tokens, or authorization data without redaction guidance.

Medio

SKILL.md:29-46 SKILL.md:110-130

Authenticated Browser Exposed to Remote Debugging

The setup enables a DevTools endpoint and then operates on a logged-in browser session. Any process that can reach the endpoint can control tabs and inspect sensitive page data.

The documented workflow explicitly starts Chrome with remote debugging and uses the connection against an authenticated session.

Elementos de revisión de capacidades (1)

Estas son capacidades locales reales que pueden esperarse para esta habilidad, por lo que requieren revisión, pero no se cuentan como comportamiento malicioso confirmado.

Medio

SKILL.md:172-179

Ruby/shell backtick execution

- MCP server not installed (`npx chrome-devtools-mcp@latest`)

The troubleshooting guidance recommends npx chrome-devtools-mcp@latest, which can download and execute a mutable package version without integrity pinning.

Factores de riesgo

🌐 Acceso a red (16)

cookbook/console-debugging.md:200 cookbook/network-debugging.md:60 cookbook/network-debugging.md:149 cookbook/network-debugging.md:227 reference.md:102 reference.md:314 reference.md:80 reference.md:20 reference.md:222 reference.md:235 reference.md:275 reference.md:20 SKILL.md:144 SKILL.md:46 SKILL.md:180 SKILL.md:46

⚡ Contiene scripts (1)

reference.md:110-114

⚙️ Comandos externos (38)

Auditado por: codex Ver historial de auditorías →

Compartir y citar este informe

Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.

Abrir el informe versionado

Copiar enlace del informe

https://skillstore.io/skills/consiliency-chrome-devtools-debugging/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/consiliency-chrome-devtools-debugging/security.svg)](https://skillstore.io/skills/consiliency-chrome-devtools-debugging?utm_source=security_passport_badge)

Insignia HTML

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

Tarjeta para insertar

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

Citas académicas (APA · BibTeX · CFF)

Cita APA

Consiliency. (2026). chrome-devtools-debugging security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/consiliency-chrome-devtools-debugging/audits/10

Cita BibTeX

@techreport{consiliency-consiliency-chrome-devtools-debugging-2026,
  author = {Consiliency},
  title = {chrome-devtools-debugging security audit report (audit version 10)},
  institution = {Skillstore},
  year = {2026},
  number = {10},
  url = {https://skillstore.io/skills/consiliency-chrome-devtools-debugging/audits/10},
  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: "chrome-devtools-debugging security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
  - name: "Consiliency"
date-released: "2026-07-13"
url: "https://skillstore.io/skills/consiliency-chrome-devtools-debugging/audits/10"
identifiers:
  - type: other
    value: "skillstore:consiliency-chrome-devtools-debugging:audit:10"
    description: "Skillstore immutable audit report identifier"

Puntuación de Skillstore

Por qué esta puntuación Confianza de la evidencia: Medio

Arquitectura

Mantenibilidad

Contenido

Comunidad

Cumplimiento de la especificación

Lo que puedes crear

Diagnosticar fallos de consola en el frontend

Revisa errores del navegador, advertencias, trazas de pila y estado de la aplicación para identificar posibles defectos del frontend.

Investigar problemas de API autenticada

Inspecciona solicitudes XHR y fetch fallidas después de un inicio de sesión manual mientras protege datos sensibles de la sesión.

Analizar cargas de página lentas

Captura trazas, encuentra solicitudes lentas y correlaciona problemas de rendimiento con evidencias de red y consola.

Prueba estos prompts

Inspeccionar errores de consola

Usa la depuración de Chrome DevTools para listar los errores y advertencias actuales de la consola. Resume las causas probables y no imprimas secretos.

Revisar llamadas de API fallidas

Lista las solicitudes XHR y fetch fallidas recientes. Agrúpalas por código de estado, patrón de endpoint e impacto probable en el frontend.

Depurar flujo autenticado

Inspecciona la página autenticada en busca de errores de consola y llamadas de API fallidas. Redacta cookies, tokens y cuerpos de solicitudes antes de informar.

Correlacionar evidencia de rendimiento

Captura una traza de carga de página, revisa solicitudes de red lentas y conecta la evidencia más sólida con pasos concretos de optimización.

Mejores prácticas

Usa un perfil de navegador de prueba dedicado para las sesiones de depuración.
Redacta tokens, cookies, cuerpos de solicitudes y datos personales antes de compartir resultados.
Empieza con resúmenes y luego solicita detalles completos de solicitudes o consola solo cuando sea necesario.

Evitar

Imprimir localStorage, sessionStorage, cookies o encabezados de autorización completos.
Dejar disponible la depuración remota de Chrome después de que termine la sesión.
Ejecutar paquetes npx sin fijar o comandos copiados sin revisión.

Preguntas frecuentes

¿Qué ayuda a depurar esta skill?

Ayuda a inspeccionar mensajes de consola, solicitudes de red, trazas de rendimiento, estado del navegador y sesiones web autenticadas.

¿Reemplaza las herramientas de automatización del navegador?

No. Está enfocada en la depuración con DevTools, no en capturas de pantalla, rellenado de formularios ni flujos amplios de automatización.

¿Puede funcionar con sesiones iniciadas?

Sí, si Chrome ya tiene una sesión iniciada y el acceso a DevTools está configurado. Los datos sensibles deben redactarse.

¿Por qué la depuración remota es una preocupación de seguridad?

Un endpoint de DevTools puede inspeccionar y controlar páginas del navegador. Usa acceso por loopback, un perfil de prueba y sesiones cortas.

¿Qué deberían evitar compartir los usuarios?

Evita compartir cookies, tokens, encabezados de autorización, datos personales, volcados completos de almacenamiento y cuerpos de solicitudes privadas.

¿Qué herramientas de IA son compatibles?

El informe enumera soporte para Claude, Codex y Claude Code.