google-chrome-extension
Depuración de extensiones de Chrome

Usando las herramientas del desarrollador para depurar su extensión

Una extensión de cromo se separa en un máximo de 4 partes:

• la página de fondo
• la página emergente
• uno o más scripts de contenido
• la página de opciones

Cada parte, ya que están separadas de forma innata, requiere depuración individual.

Tenga en cuenta que estas páginas están separadas, lo que significa que las variables no se comparten directamente entre ellas y que un console.log() en una de estas páginas no será visible en los registros de ninguna otra parte.

Usando los devtools de cromo:

Las extensiones de Chrome se depuran de forma similar a otras aplicaciones web y páginas web. La depuración se realiza con mayor frecuencia con el uso del inspector de devtools de Chrome utilizando el método abreviado de teclado para Windows y Mac respectivamente: ctrl + shift + i y cmd + shift + i o haciendo clic derecho en la página y seleccionando inspeccionar.

Desde el inspector, un desarrollador puede verificar los elementos html y cómo los afecta css, o usar la consola para inspeccionar los valores de las variables de javascript y leer los resultados de cualquier console.log() ) que haya configurado el desarrollador.

Puede encontrar más información sobre el uso del inspector en Chrome Devtools .

Inspeccionando la ventana emergente, la página de opciones y otras páginas accesibles usando chrome: //.....yourExtensionId.../:

Se puede acceder a la página emergente y la página de opciones simplemente inspeccionándolas cuando están abiertas.

Las páginas html adicionales que forman parte de la extensión, pero que no son la ventana emergente ni la página de opciones, también se depuran de la misma manera.

Inspeccionando la página de fondo:

Para acceder a su página de fondo , primero debe navegar a la página de la extensión de chrome en chrome: // extensions / . Asegúrese de que la marca de verificación 'Modo desarrollador' esté habilitada.

Luego haga clic en el script de fondo junto a "Inspeccionar vistas" para inspeccionar su página de fondo.

Inspeccionar guiones de contenido:

Los scripts de contenido se ejecutan junto a los sitios web en los que se insertaron. Puede inspeccionar el script de contenido inspeccionando primero el sitio web donde se inserta el script de contenido. En la consola, podrá ver cualquier console.log() s generado por su extensión, pero no podrá cambiar ni inspeccionar las variables del script de contenido.

Para solucionar este problema, debe hacer clic en el menú desplegable que normalmente se establece en 'top' y seleccionar su extensión de la lista de extensiones.

Desde allí tendrá acceso a las variables dentro de su extensión.