Onde ler as mensagens do console do background.js em uma extensão do Chrome?

194

Comecei com as extensões do Google Chrome e não consigo fazer logon no console dos meus js em segundo plano. Quando ocorre um erro (devido a um erro de sintaxe, por exemplo), também não consigo encontrar nenhuma mensagem de erro.

Meu arquivo de manifesto:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "pageCapture",
    "tabs"
  ]
}

background.js:

alert("here");
console.log("Hello, world!")

Quando carrego a extensão, o alerta é exibido, mas não vejo nada sendo registrado no console. O que estou fazendo de errado?

debugging google-chrome-extension console google-chrome-devtools grasaved
fonte

2

possível duplicata de Como depurar o script em segundo plano do Google Chrome?

ripper234

Por favor, selecione mensagens ou informações se bar destacado é em outras guias, como Sem detalhado assuntos guia selecionada

siluveru Kiran Kumar

375

Você está olhando para o lugar errado. As mensagens do console registradas não aparecem na página da Web, mas na página de plano de fundo (invisível). Para ver essas mensagens no console, siga estas etapas:

Visite chrome://extensions/.
Você também pode clicar com o botão direito do mouse no ícone da extensão e clicar em "Gerenciar extensões".

Ativar modo de desenvolvedor
Clique no link da sua página de plano de fundo (em "Inspecionar visualizações").
O console do desenvolvedor é aberto para esta página .

Nova interface do usuário:

UI antiga:

Rob W
fonte

@ RobW, não tenho o botão triangular para expandir a extensão e não vejo nenhuma visualização ativa. Essa resposta não é mais a solução para a versão mais recente do Chrome ou estou faltando alguma coisa?

gwg

1

@ggundersen Atualizei a imagem. O triângulo foi removido. Essa etapa agora acontece automaticamente quando o modo Desenvolvedor é ativado.

Rob W

como você depura scripts de conteúdo então?

SuperUberDuper

1

@SuperUberDuper Via devtools na guia em que o script de conteúdo está sendo executado.

22630 Robert W

13

Eu tive o mesmo problema; no meu caso, o registro foi definido como "Ocultar tudo" na guia console nas ferramentas do desenvolvedor do Chrome. Eu nem percebi que isso era uma opção e não me lembro de desligá-lo

Michiel
fonte

7

Para os seguidores que desejam ver o console de depuração para um "script de conteúdo" de sua extensão do Chrome, ele está disponível com um "show developer console" normal e, em seguida, use a seta suspensa para selecionar seu "ambiente javascript", para que você tenha acesso aos seus métodos, etc.

rogerdpack
fonte

5

Além disso

se você quiser ver o content_scriptarquivo js (quando a propriedade "background" não estiver configurada) no manifest.json

"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["popup.js"],
  }]

"browser_action": {
    "default_icon": "icon_32.png",
    "default_popup": "popup.html"
  }

depois clique com o botão direito do mouse no ícone da extensão e clique em Inspecionar a janela pop - up e o desenvolvedor abrirá com popup.html aberto, você verá a guia console.

diEcho
fonte

9

1) Isso não responde à pergunta, 2) Isso é simplesmente errado; O script de conteúdo registra as mensagens no console da página em que foi injetado, ou seja, na guia do navegador real. Suponho que no seu código, popup.jsfoi reutilizado no popup.htmle, como tal, a saída dessa cópia vai para o local que você mencionou. Mas é totalmente enganador.

Xan

2

esta resposta me ajuda a verificar o log do Chrome extensão que são executados como pop-up

RashFlash

1

Semelhante à resposta de Michiel, eu também tinha uma configuração engraçada de console: Um filtro que não me lembro da configuração:

Depois de limpar o filtro, vi as mensagens.

Tonio Liebrand
fonte

1

Se quisermos ler as mensagens impressas no console na página pop-up, podemos clicar no ícone de extensão para abrir a página pop-up e clicar com o botão direito do mouse na página pop-up em qualquer lugar, um menu suspenso será exibido, basta clicar no menu "Inspecionar" para abra a ferramenta de desenvolvedor. Observe que a página pop-up deve permanecer aberta. Se estiver fechado (por window.close ()), a ferramenta de desenvolvedor também será fechada.

Token Yi
fonte

0

Eu tive esse problema também. Parece que minha página da web não estava sendo atualizada para o script recém-salvo. Isso foi resolvido pressionando Ctrl+ atualizar (ou Ctrl+ F5) no navegador Chrome.

fonte

Onde ler as mensagens do console do background.js em uma extensão do Chrome?

Respostas: