24
È possibile ottenere un debugger JS interattivo su PhantomJS e/o CasperJS?Impostazione del debugging JS con IntelliJ/WebStorm e PhantomJS/Casper
A
risposta
6
PhantomJS ha un'opzione remote-debugger-port è possibile utilizzare per eseguire il debug dello script Casper in strumenti di sviluppo di Chrome. Per utilizzarlo, è sufficiente eseguire lo script Casper con questo argomento:
casperjs test script.js --remote-debugger-port=9000
Poi, aprire http://localhost:9000 in Chrome e fai clic sul link about:blank che si presenta. Dovresti quindi trovarti nel familiare territorio degli strumenti di sviluppo di Chrome.
Dal momento che questo è uno script e non una pagina web, al fine di avviare il debug, devi fare una delle due cose prima che lo script eseguirà:
- Nella pagina di strumenti di sviluppo Chrome, aprire il console ed eseguire
__run()a effettivamente avviare il tuo script. - Inserire una riga
debugger;nel codice ed eseguire lo script casper con un ulteriore argomento--remote-debugger-autorun=yes. Facendo così con la pagina di debug remota aperta eseguirai lo script fino a quando non raggiunge la tua lineadebugger;.
C'è un ottimo tutorial che spiega tutto molto bene.
15
Non ho risolto tutto questo, ma ho decisamente ridotto il dolore.
PhantomJS fornisce un command line argument per abilitare webkit's remote debugger. AFAIK, PhantomJS avvia un server e scarica lo script nello <head> di una pagina Web con il familiare debugger nel browser. In realtà è piuttosto carino, con punti di interruzione, ecc. Tuttavia, passare a scavare manualmente nel terminale per un parametro a riga di comando casuale e il percorso verso il tuo script è seriamente irritante.
Quindi, ho utilizzato la funzione "Strumenti esterni" di IntelliJ per avviare uno script Bash che elimina qualsiasi sessione di debug precedente, lancia PhantomJS e quindi apre la pagina in Chrome.
#!/bin/bash
lsof -i [email protected]:9000 #list anything bound to port 9000
if [ $? -eq 0 ] #if something was listed
then
killall 'phantomjs'
fi
/usr/local/Cellar/phantomjs/2.0.0/bin/phantomjs --remote-debugger-port=9000 $1 &
# --remote-debugger-autorun=yes <- use if you have added 'debugger;' break points
# replace $1 with full path if you don't pass it as a variable.
sleep 2; #give phantomJS time to get started
open -a /Applications/Google\ Chrome.app http://localhost:9000 & #linux has a different 'open' command
# alt URL if you want to skip the page listing
# http://localhost:9000/webkit/inspector/inspector.html?page=1
#see also
#github.com/ariya/phantomjs/wiki/Troubleshooting
Le prossime righe sono le impostazioni per IntelliJ, anche se il codice precedente funziona altrettanto bene su qualsiasi piattaforma/IDE.
programma: $ProjectFileDir$/path/to/bash/script.sh
parametri: $FilePath$
dir di lavoro: $ProjectFileDir$
In Chrome è --remote-debugging-port, non --remote-debugger-port. Questa è anche la bandiera nell'articolo del webkit. Potresti voler ricontrollare che il flag sia corretto. –
No, è [sicuramente] (https://github.com/ariya/phantomjs/wiki/Troubleshooting#remote-debugging) '--remote-debugger-port = 9000' – Indolering
Mentre questa risposta mi ha ottenuto molti punti internet , Mi piacerebbe vedere una soluzione * REAL * a questa volta e sarei felice di assegnare la risposta a chiunque possa postarla! – Indolering