2011-02-18 30 views
33

Estoy haciendo una extensión de Chrome y necesito ver el HTML/CSS/JS del popup.html.¿Debug popup.html de una extensión de Chrome?

No puedo hacer clic derecho para inspeccionar los elementos. ¿Hay otra manera? Necesito asegurarme de que CSS y JavaScript se inserten correctamente. Cómo depurar un problema en ese archivo emergente?

+0

Documentación para los registros, Tutorial: Depuración: https://developer.chrome.com/extensions/tut_debugging – brasofilo

Respuesta

47

Haga clic derecho en el botón de la extensión, a continuación, 'Inspeccionar emergente'

+2

Exactamente lo que quería. No tenía idea de que estaba allí. ¡Gracias! – Skizit

+5

En Chrome 22 (Canary el 8/1/2012), se ha eliminado la opción 'Inspeccionar ventana emergente', probablemente porque puede 'Inspeccionar elemento' desde la ventana emergente. Sin embargo, debido a esto, no hay forma de depurar/establecer un punto de interrupción en el código que se ejecuta en carga. Hasta ahora, mi única solución es poner un setTimeout durante 10-15 segundos, lo que me permite abrir la ventana emergente, seleccionar 'Inspeccionar elemento', buscar la etiqueta de Scripts y establecer el punto de interrupción dentro de la función de tiempo de espera agotado. ¿Conoces una manera más fácil? – Schmuli

+4

No lo sé, lo siento, ojalá el equipo de Chrome deje de romper cosas. –

2

Sí, 'Inspeccionar emergente' en el icono de la extensión, y aparte de eso - de gestor de extensiones también se puede inspeccionar su página de opciones.

60

Inspect Popup se ha ido con la última versión.

Así es como debo depurar ventanas emergentes de extensión de Chrome.

  1. Haga clic en el botón emergente para ver la página web (la ventana emergente en sí).
  2. Haga clic derecho en la ventana y seleccione el elemento
  3. inspeccionar la ventana de Chrome depurador viene con el contexto correcto, pero ya hemos perdido los puntos de interrupción y debugger declaraciones.
  4. AQUÍ ESTÁ EL TRUCO. Haga clic en la parte de la consola del depurador y escriba: location.reload(true) y presione Intro.

¡Ahora se han alcanzado sus puntos de interrupción! Una excelente forma de volver a cargar los scripts cambiados sin volver a visitar la página de extensiones.

+0

Obtengo la ventana emergente cuando hago clic en el ícono de acción de la página. – ripper234

+3

Gracias Tom. location.reload (true) funciona. –

+1

También puede presionar F5 mientras está en el depurador, activa "recargar" y no "ejecutar". Aunque esto debería considerarse una falla de UI, ya que los desarrolladores esperarían que F5 "corra", no "recargue". Por lo tanto, tenga cuidado con este útil F5 que también ha estropeado algunas depuraciones cuando se golpea en el momento equivocado. Lo último también ocurre en Firefox. –

18

Quizás otra manera puede ser encontrar el ID: para su aplicación en chrome: // chrome/extensions/

, puede cargar su emergente en una ventana normal por

chrome-extension://id_of_your_application/popup.html 

emergente Cambio .html para el archivo que ha especificado en manifest.json en la propiedad "default_popup".

+0

Esto no parece funcionar. – tanushree

+0

Lo probé y funciona si tu extensión es una ventana emergente. Aquí hay un ejemplo del enlace emergente de AdBlock que se ejecuta en el navegador. Debe tener AdBlock instalado. chrome-extension: //gighmmpiobklfepjocnamgkkbiglidom/button/popup.html –

+1

excelente respuesta. La mejor manera de depurar – DMTintner

Cuestiones relacionadas