¿Dónde leer los mensajes de la consola de background.js en una extensión de Chrome?

194

Acabo de comenzar con las extensiones de Google Chrome y parece que no puedo iniciar sesión en la consola desde mi fondo js. Cuando ocurre un error (debido a un error de sintaxis, por ejemplo), tampoco puedo encontrar ningún mensaje de error.

Mi archivo de manifiesto:

{
  "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!")

Cuando cargo la extensión, aparece la alerta pero no veo que se registre nada en la consola. ¿Qué estoy haciendo mal?

— engordado
fuente

2

posible duplicado de ¿Cómo depurar el script de fondo de Google Chrome?

— ripper234

Seleccione los mensajes o la información si la barra resaltada está en otras pestañas como No importa la pestaña seleccionada

— siluveru kiran kumar

375

Estás mirando el lugar equivocado. Los mensajes de consola registrados no aparecen en la página web, sino en la página de fondo (invisible). Para ver estos mensajes en la consola, siga estos pasos:

Visita chrome://extensions/.
También puede hacer clic con el botón derecho en el ícono de extensión y luego hacer clic en "Administrar extensiones".

Habilitar modo desarrollador
Haga clic en el enlace de su página de fondo (en "Inspeccionar vistas").
La consola del desarrollador se abre para esta página .

Nueva interfaz de usuario:

IU antigua:

— Rob W
fuente

@RobW, no tengo el botón triangular para expandir la extensión y no veo ninguna vista activa. ¿Esta respuesta ya no es la solución para la última versión de Chrome o me falta algo?

— gwg

1

@ggundersen He actualizado la imagen. Se ha eliminado el triángulo, ese paso ahora ocurre automáticamente cuando se activa el modo Desarrollador.

— Rob W

¿Cómo depurar scripts de contenido entonces?

— SuperUberDuper

1

@SuperUberDuper A través de las herramientas de desarrollo en la pestaña donde se ejecuta el script de contenido.

— Rob W

13

Tuve el mismo problema, en mi caso, el registro se configuró en "Ocultar todo" en la pestaña de la consola en las herramientas para desarrolladores de Chrome. Ni siquiera me había dado cuenta de que era una opción, y no recuerdo haberlo desactivado.

— Michiel
fuente

7

Para los seguidores que deseen ver la consola de depuración para un "script de contenido" de su extensión de Chrome, está disponible haciendo una "consola de desarrollador" normal, luego use la flecha desplegable para seleccionar su "entorno javascript" y luego tendrá acceso a sus métodos, etc.

— rogerdpack
fuente

5

Adicionalmente

si desea ver el content_scriptarchivo js (cuando la propiedad "background" no está establecida) en manifest.json

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

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

luego haga clic derecho en el icono de extensión y haga clic en Inspeccionar emergente y la ventana del desarrollador se abre con popup.html abierto, allí verá la pestaña de la consola.

— diEcho
fuente

9

1) Esto no responde la pregunta, 2) Esto es simplemente incorrecto; el script de contenido registra los mensajes en la consola de la página en la que se inyecta, es decir, en la pestaña del navegador real. Supongo que en su código, popup.jsse reutilizó en el popup.html, y como tal, la salida de esa copia va al lugar que mencionó. Pero es totalmente engañoso.

— Xan

2

esta respuesta me ayuda a verificar el registro de la extensión de Chrome que se ejecuta como ventana emergente

— RashFlash

1

Similar a la respuesta de Michiel, también tenía una configuración de consola divertida: un filtro que no recuerdo haber configurado:

Después de borrar el filtro, vi los mensajes.

— Tonio Liebrand
fuente

1

Si queremos leer los mensajes impresos en la consola desde la página emergente, podemos hacer clic en el icono de extensión para abrir la página emergente, luego hacer clic derecho en la página emergente en cualquier lugar, se mostrará un menú desplegable, simplemente haga clic en el menú "Inspeccionar" para Abra la herramienta de desarrollador. Tenga en cuenta que la página emergente debe mantenerse abierta. Si está cerrado (por window.close ()), la herramienta del desarrollador también se cerrará.

— Token Yi
fuente

0

Yo tuve este problema también. Parece que mi página web no se estaba actualizando al script recién guardado. Esto se resolvió presionando Ctrl+ actualizar (o Ctrl+ F5) en el navegador Chrome.