Подтвердить что ты не робот

Настройка отладки JS с помощью IntelliJ/WebStorm и PhantomJS/Casper

Можно ли получить интерактивный отладчик JS, работающий на PhantomJS и/или CasperJS?

4b9b3361

ОТВЕТЫ

Ответ 1

PhantomJS имеет параметр remote-debugger-port, который вы можете использовать для отладки вашего casper script в инструментах Chrome dev. Чтобы использовать его, просто выполните ваш casper script с этим аргументом:

casperjs test script.js --remote-debugger-port=9000

Затем откройте http://localhost:9000 в Chrome и нажмите ссылку about:blank, которая отображается сама. Затем вы должны оказаться на знакомой территории Chrome dev.

Так как это script, а не веб-страница, чтобы начать отладку, вы должны сделать одну из двух вещей до выполнения script:

  • На странице инструментов разработчика Chrome откройте консоль и выполните __run(), чтобы запустить ваш script.
  • Вставьте строку debugger; в свой код и запустите свой casper script с помощью дополнительного аргумента --remote-debugger-autorun=yes. При открытии открытой страницы отладки будет выполняться script, пока она не ударит по вашей строке debugger;.

Там отличный учебник, который объясняет это все очень красиво.

Ответ 2

Я не решил это полностью, но я определенно уменьшил боль.

PhantomJS предоставляет аргумент командной строки, чтобы включить удаленный отладчик webkit. AFAIK, PhantomJS запускает сервер и выгружает script в <head> веб-страницы со знакомым отладчиком в браузере. Это на самом деле довольно приятно, с точками останова и т.д. Однако переключение на ручное копание в терминале для случайного параметра командной строки и путь к вашему script вызывает серьезное раздражение.

Итак, я использовал функцию "внешние инструменты" IntelliJ для запуска Bash script, который убивает любой предыдущий сеанс отладки, запускает PhantomJS, а затем открывает страницу в 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

Следующие несколько строк являются настройками для IntelliJ, хотя приведенный выше код работает так же хорошо на любой платформе /IDE.

: $ProjectFileDir$/path/to/bash/script.sh
параметры: $FilePath$
рабочий каталог: $ProjectFileDir$