debugging plunker in strumenti di sviluppo chrome

Question

Ho creato un file javascript in Plunker e voglio eseguire il debug. Quando apro il pannello 'Sorgenti', non vedo il file js che ho creato. Vedo solo un sacco di file js Plunker. Per favore consiglio Grazie

Answer 1

Hai due opzioni principali per eseguire il drill-down al file sorgente che hai creato.

1. Utilizzare la modalità finestra pop-up del pannello di anteprima

Per impostazione predefinita, il visualizzatore viene eseguito all'interno di un all'interno della webapp plunker. Puoi chiedere a plunker di mostrare l'anteprima in una finestra separata facendo clic sull'icona blu di espansione nella parte in alto a destra della finestra di anteprima. Se apri gli strumenti di sviluppo per la finestra a comparsa, vedrai solo i file di origine tuoi .

2. Fare clic destro l'anteprima e ha colpito ispezionare elemento

Facendo in questo modo vi permetterà di utilizzare il incorporato, anteprima dal vivo e vi darà una scorciatoia per drill-down per il DOM associato al tuo codice.

Answer 2

Un altro modo è quello di mettere questo nel vostro file JavaScript

debugger;

e lasciare la console aperta, che costringerà il debugger non solo a fermarsi lì, ma anche a aprire il file.

Answer 3

Questo potrebbe cambiare, ma attualmente su Chrome 47.0.2526.111 m su Windows 10, 64 bit, questo è come si possono trovare i file di origine Plunk:

• strumenti Open di sviluppo (F12)
• fonti aperte
• Cercare run.plnkr.co
• Espandi questo per mostrare un unico terribile ctory con un nome criptico

All'interno, troverete i file in modo da poter avviare il debug

Answer 4

Un modo più veloce che ho trovato è quello di afferrare semplicemente l'unica id del vostro plnk.

In normali 'modifica' modalità URL sarà qualcosa di simile

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

Semplicemente aggiungere queste id - P0fqZG6G6khKKrtfBkDP all'URL

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

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

Importante: effettuare doppie che si aggiunge il trailing /

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

Nota: È quindi possibile continuare a modificare in plnkr, salvare e semplicemente aggiornare questo URL durante il debug per mantenere attiva la sessione di debug.

Answer 5

L'immagine vale più di mille parole ... F12 e quindi selezionare le fonti; plunkerPreviewTarget ha il codice sorgente