tools google extension developer depurar debugger debug chrome google-chrome-devtools plunker

google-chrome-devtools - google - https://chrome:inspect



depurando plunker en herramientas de desarrollador de cromo (5)

Creé un archivo javascript en Plunker y quiero depurarlo. Cuando abro el panel ''Fuentes'', no veo el archivo js que creé. Sólo veo un montón de archivos Plunker js. Por favor aconséjame. Gracias


Esto puede cambiar, pero actualmente en Chrome 47.0.2526.111 m en Windows 10, 64 bits, así es como puede encontrar sus archivos fuente de plunk:

  • Abrir herramientas de desarrollo (F12)
  • Fuentes abiertas
  • Busque run.plnkr.co
  • Expande esto para mostrar un solo directorio con un nombre críptico

En el interior, encontrará sus archivos para que pueda comenzar a depurar


La imagen vale más que mil palabras ... F12 y luego selecciona las fuentes; plunkerPreviewTarget tiene el código fuente


Otra forma es poner esto en tu archivo javascript.

depurador

y deje la consola abierta, lo que obligará al depurador no solo a detenerse allí sino también a abrir el archivo.


Tiene dos opciones principales para profundizar en el archivo de origen que creó.

1. Utilice el modo de ventana emergente del panel de vista previa

De forma predeterminada, la vista previa se ejecuta dentro de un <iframe> dentro de la aplicación web de plunker. Puede pedirle a Plunker que muestre la vista previa en una ventana separada haciendo clic en el icono de expansión azul en la parte superior derecha de la ventana de vista previa. Si abre herramientas de desarrollo para la ventana emergente, solo verá los archivos de origen.

2. Haga clic derecho en la vista previa y pulse el elemento inspeccionar

Si lo hace de esta manera, podrá usar la vista previa integrada y en vivo, y le dará un acceso directo para profundizar en el DOM asociado con su código.


Una forma más rápida que encontré es simplemente agarrar la identificación única de su plnk.

En modo normal ''editar'' la URL será algo así como

http://plnkr.co/edit/P0fqZG6G6khKKrtfBkDP?p=preview

Simplemente agregue este ID - P0fqZG6G6khKKrtfBkDP a la URL

http://run.plnkr.co/plunks/ por lo tanto se convierte en

http://run.plnkr.co/plunks/P0fqZG6G6khKKrtfBkDP/

Importante: asegúrate de que agregas el final /

  • Open new URL in a new chrome window
  • Hit F12 in chrome, voila native angular JS debugging for your plnk

Nota: luego puede continuar editando en plnkr, guardando y simplemente actualizando esta URL al depurar, para mantener su sesión de depuración activa.