Habilidades chrome-devtools-debugging

📦

chrome-devtools-debugging

Name: chrome-devtools-debugging
Author: Consiliency

Revisão do conteúdo r1 Risco alto 🌐 Acesso à rede⚡ Contém scripts⚙️ Comandos externos

Depurar Aplicações Web com Chrome DevTools

Os erros do navegador escondem-se frequentemente nos registos da consola, no tráfego de rede e no estado autenticado. Esta skill orienta Claude, Codex e Claude Code na depuração com Chrome DevTools MCP.

Suporta: Claude Codex Code(CC)

⚠️ 38 Ruim

Pare e solicite confirmação antes de instalar.

Revise o plano e obtenha o consentimento explícito do usuário antes de alterar arquivos.

Instalar com meu Agente

Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.

Solicitação do 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.

Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.

Recursos legíveis por agentes

Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.

Detalhe em Markdown GET /skills/consiliency-chrome-devtools-debugging.md manifest assinado GET /api/skills/consiliency-chrome-devtools-debugging/manifest lockfile assinado GET /api/skills/consiliency-chrome-devtools-debugging/lockfile

Testar

Usando "chrome-devtools-debugging". Descubra porque é que o dashboard mostra uma página em branco após o login.

Resultado esperado:

A revisão da consola encontrou uma exceção de frontend durante a renderização do dashboard.
A revisão de rede encontrou um pedido de sessão falhado com um erro de autorização.
Próximo passo recomendado: verificar o tratamento da atualização do token sem expor valores do token.

Usando "chrome-devtools-debugging". Verifique se a página do produto está lenta por causa de chamadas de API.

Resultado esperado:

Os pedidos mais lentos foram as chamadas de pesquisa de produtos e de metadados de imagens.
O rastreamento do navegador mostrou que a renderização aguardou pela resposta da pesquisa.
Próximo passo recomendado: armazenar metadados em cache e adiar trabalho de imagem não crítico.

Usando "chrome-devtools-debugging". Reveja os avisos atuais da consola do navegador antes do lançamento.

Resultado esperado:

O relatório lista categorias de avisos, páginas afetadas, causas prováveis e responsáveis sugeridos sem copiar dados sensíveis do navegador.

Auditoria de segurança

Risco alto

v10 • 13/07/2026 Abrir o relatório 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.

Arquivos analisados

1,033

Linhas analisadas

Itens de revisão

Falsos positivos ignorados

Preocupações de segurança 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.

Médio

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.

Itens de revisão de capacidade (1)

Estas são capacidades locais reais que podem ser esperadas para esta habilidade, portanto exigem revisão, mas não são contabilizadas como comportamento malicioso confirmado.

Médio

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.

Fatores de risco

🌐 Acesso à rede (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

⚡ Contém scripts (1)

reference.md:110-114

⚙️ Comandos externos (38)

Auditado por: codex Ver histórico de auditoria →

Compartilhar e citar este relatório

Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.

Abrir o relatório versionado

Copiar link do relatório

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

Badge 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)

Badge 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>

Cartão incorporável

<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>

Citações acadêmicas (APA · BibTeX · CFF)

Citação 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ção 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"

Pontuação do Skillstore

Por que esta pontuação Confiança das evidências: Médio

Arquitetura

Manutenibilidade

Conteúdo

Comunidade

Conformidade com a especificação

O que você pode criar

Diagnosticar Falhas da Consola no Frontend

Reveja erros do navegador, avisos, stack traces e estado da aplicação para identificar prováveis defeitos no frontend.

Investigar Problemas de API Autenticada

Inspecione pedidos XHR e fetch falhados após um login manual, protegendo dados sensíveis da sessão.

Analisar Carregamentos de Página Lentos

Capture rastreamentos, encontre pedidos lentos e correlacione problemas de desempenho com evidências de rede e consola.

Teste estes prompts

Inspecionar Erros da Consola

Use a depuração do Chrome DevTools para listar os erros e avisos atuais da consola. Resuma as causas prováveis e não imprima segredos.

Rever Chamadas de API Falhadas

Liste pedidos XHR e fetch recentes que falharam. Agrupe-os por código de estado, padrão de endpoint e impacto provável no frontend.

Depurar Fluxo Autenticado

Inspecione a página autenticada para encontrar erros da consola e chamadas de API falhadas. Redija cookies, tokens e corpos de pedidos antes de reportar.

Correlacionar Evidências de Desempenho

Capture um rastreamento de carregamento de página, reveja pedidos de rede lentos e relacione as evidências mais fortes com passos concretos de otimização.

Boas práticas

Use um perfil de navegador de teste dedicado para sessões de depuração.
Redija tokens, cookies, corpos de pedidos e dados pessoais antes de partilhar resultados.
Comece com resumos e só depois peça detalhes completos de pedidos ou da consola quando necessário.

Evitar

Imprimir localStorage, sessionStorage, cookies ou cabeçalhos de autorização completos.
Deixar a depuração remota do Chrome disponível depois de a sessão terminar.
Executar pacotes npx não fixados ou comandos copiados sem revisão.