¿Cómo abrir la consola devtools correcta para ver el resultado de un script de extensión?

Resuelto harish asked hace 8 años • 0 respuestas

Estoy intentando probar un código de muestra para una extensión web para navegadores. Pero no funciona. Revisé la consola para Google Chrome y también para Firefox. No imprime nada. El siguiente es mi código:

manifiesto.json :

{
    "description": "Demonstrating webRequests",
    "manifest_version": 2,
    "name": "webRequest-demo",
    "version": "1.0",

    "permissions": [
        "webRequest"
    ],
    "background": {
        "scripts": ["background.js"]
    }
}

fondo.js :

function logURL(requestDetails) {
    console.log("Loading: " + requestDetails.url);
}

chrome.webRequest.onBeforeRequest.addListener(
    logURL,
    {urls: ["<all_urls>"]}
);
console.log("Hell o extension background script executed");

¿Me estoy perdiendo de algo?

harish avatar Aug 12 '16 15:08 harish
Aceptado

Su código es correcto tal como está escrito, funciona y sale a la consola.
Si no lo ves, probablemente estés mirando la consola equivocada .

1. Firefox

Mozilla describe qué salida de extensión se puede ver en cada consola en su artículo de Depuración .

  • Consola del navegador

    La consola del navegador ya no muestra los resultados de las páginas de fondo de WebExtensions de forma predeterminada . Puede hacer que muestre el resultado de todas las WebExtensions seleccionando mostrar "Mostrar mensajes de contenido", que está disponible en la ventana emergente que se abre al hacer clic en el símbolo de engranaje "⚙️" en la parte superior derecha de la ventana, justo al derecho de "Solicitudes". Dependiendo de lo que esté haciendo, la consola del navegador puede mostrar el resultado de un experimento de WebExtensions . Puede acceder a la Consola del navegador desde Herramientas➜Desarrollador web➜Consola del navegador (atajo de teclado Ctrl- Shift- Jo Cmd- Shift- Jen Mac).

    En versiones anteriores de Firefox, esta era la consola que se usaba para ver el resultado de las extensiones. Sin embargo, ese ya no es el caso.

  • Caja de herramientas del navegador

    Si lo tiene habilitado, también puede usar la consola Browser Toolbox . Puede acceder a él desde Herramientas➜Web Developer➜Browser Toolbox (atajo de teclado Ctrl- Alt- Shift- I; en una Mac: Cmd- Alt- Shift- I). Si no está disponible, puede habilitarlo a través de las opciones de la página de configuración de la Consola web.

    La consola de esta caja de herramientas mostrará el resultado de los scripts que se ejecutan en segundo plano y de los scripts de contenido. Sin embargo, los datos complejos no estarán disponibles (por ejemplo, no habrá Objetos).

  • Depurador de complementos

    Esto es lo que debería usar para ver la salida de la consola de los scripts que se ejecutan en el contexto de fondo de su WebExtension. Esto incluye scripts en segundo plano, scripts que se ejecutan en ventanas emergentes, páginas de opciones y cualquier otra página cargada desde la extensión como URL principal de una pestaña o iframe. Puede acceder al depurador de complementos mediante about:debugging➞Inspeccionar (use el botón "Inspeccionar" asociado con la extensión web que está depurando; hay un botón separado para cada extensión). Esto abrirá una nueva pestaña con el depurador. Luego puede hacer clic en la pestaña Consola dentro de esa pestaña del navegador. Esta consola mostrará solo el contenido de la WebExtension que está inspeccionando.

  • Consola web

    Probablemente esté mirando la Consola web (atajo de teclado F12) que está asociada con una sola pestaña. Esto es lo que desea al depurar una página web, pero no los scripts en segundo plano de un complemento. Para un script de contenido que se inyecta en esa pestaña, el console.log()resultado se mostrará en esta consola. Sin embargo, no verá resultados de ninguna otra parte de su complemento (por ejemplo, ni scripts de contenido en otras pestañas, ni scripts de fondo, etc.).

2.Google Chrome

Mostrar la consola correcta para su extensión es un poco más complejo en Chrome. La salida de la consola se mostrará solo en uno de los múltiples lugares posibles, dependiendo del contexto en el que se console.log()ejecutó. Cada una de las siguientes DevTools son independientes entre sí y se muestran en ventanas o pestañas independientes. Mostrar en la pestaña asociada (inferior o lateral) es el valor predeterminado para las DevTools asociadas con páginas web y scripts de contenido, porque son específicos de la pestaña. Para la página web/script de contenido DevTools, tiene la opción de mostrarlo en su propia ventana separada o acoplarlo dentro de la pestaña (lateral o inferior).

  • Guiones de fondo

    Como se explica aquí , debe realizar varias selecciones en un menú desplegable para llegar a la chrome://extensionspágina (o puede escribirla a mano como URL o usar un marcador) y luego seleccionar ambas casillas de verificación ("Modo de desarrollador ") y luego haga clic en el enlace "página de fondo". Luego, debes seleccionar la pestaña "Consola" en la ventana que aparece.

    Es mucho más fácil mostrar lo que tienes que hacer:
    Mostrar consola para extensión en Google Chrome

  • Guiones de contenido

    El resultado se mostrará en la consola web normal (en las Herramientas para desarrolladores web ). Puede abrirlo presionando F12(u otros atajos) en la página web en la que se inyectó el script de contenido. Cada consola web solo mostrará el resultado de los scripts inyectados en esa pestaña.

    Hacer lo anterior mostrando el console.*resultado de su extensión, pero dará como resultado que la línea de comando de JavaScript de la consola, el depurador, etc. estén en el contexto de la página, no en el script de contenido.

    Si desea utilizar la línea de comando JavaScript de la consola en el contexto de los scripts de contenido que se inyectan en una página web, debe seleccionar el contexto del script de contenido de su extensión en el menú desplegable en la parte superior izquierda de la ventana de la Consola. Este menú desplegable normalmente comenzará con el valor "arriba". El menú desplegable tendrá selecciones para cada uno de los contextos de secuencias de comandos de contenido (una por extensión que tiene secuencias de comandos inyectadas).

  • Ventana emergente (integrada)

    Haga clic derecho en su browserActionbotón y seleccione "Inspeccionar ventana emergente". Alternativamente, haga clic derecho dentro de la ventana emergente y seleccione "Inspeccionar". Cualquiera de los dos abrirá DevTools para la página emergente. La ventana emergente se mantendrá abierta en más condiciones de las que normalmente lo haría, pero seguirá cerrada si cambia de pestaña, etc.

  • Opciones

    Haga clic derecho dentro del contenido principal de la ventana emergente Opciones (no en la barra de título) y seleccione "Inspeccionar". Esto abrirá DevTools para la página de opciones.

  • Panel de extensión de herramientas de desarrollo

    • Igual que Optionsarriba: haga clic derecho dentro + inspeccionar.
    • En caso de que su panel intercepte el clic derecho o en un Chrome 97/98 con errores , abra devtools-on-devtools , luego use su botón de selección en la barra de herramientas del panel Elementos (o presione Ctrl-Shift-Cen la PC) para seleccionar su panel en el original. ventana de herramientas de desarrollo.

  • Ficha o ventana emergente (separada) con una página de su extensión

    Cuando una pestaña o una ventana emergente separada está enfocada, puede abrir DevTools presionando F12(u otros atajos), o abriendo el menú contextual (haga clic con el botón derecho) y seleccionando "Inspeccionar".

    Tenga en cuenta que la "ventana emergente separada" aquí significa una ventana sin barra de direcciones, que se crea usando window.openo chrome.windows.create. Había otro tipo llamado "paneles", pero ya no es compatible con el Chrome moderno.

Makyen avatar Aug 12 '2016 14:08 Makyen

¿En qué consola estás viendo los registros?

Si estás viendo la consola en una pestaña, entonces ese es el lugar equivocado.

Abrir configuración/Extensiones o en un nuevo tipo de pestaña

chrome://extensions

Debajo de su extensión, haga clic en el enlace "página de fondo", que es donde puede buscar registros.

**Asegúrate de que el modo Desarrollador esté marcado

Srujan Reddy avatar Aug 12 '2016 09:08 Srujan Reddy