使用IntelliJ/WebStorm和PhantomJS/Casper设置JS调试



我可以得到一个交互式JS调试器在PhantomJS和/或CasperJS上工作吗?

我没有完全解决这个问题,但我确实减少了痛苦。

PhantomJS提供了一个命令行参数来启用webkit的远程调试器。我猜,PhantomJS启动一个服务器,并使用熟悉的浏览器内调试器将脚本转储到网页的<head>。它实际上非常好,有断点等。但是,切换到在终端中手动挖掘随机命令行参数和脚本路径是非常令人恼火的。

所以,我使用IntelliJ的"外部工具"功能来启动一个Bash脚本,该脚本会杀死之前的任何调试会话,启动PhantomJS,然后在Chrome中打开页面。

#!/bin/bash
lsof -i tcp@0.0.0.0: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$

PhantomJS有一个remote-debugger-port选项,你可以用它在Chrome开发工具中调试你的casper脚本。要使用它,只需使用以下参数执行casper脚本:

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

然后,在Chrome中打开http://localhost:9000并单击显示自己的about:blank链接。然后你就会发现自己进入了熟悉的Chrome开发工具领域。

因为这是一个脚本而不是一个网页,为了开始调试,你必须在脚本执行之前做两件事之一:

  1. 在Chrome开发工具页面中,打开控制台并执行__run()实际启动脚本。
  2. 在代码中插入debugger;行,并使用附加的--remote-debugger-autorun=yes参数运行casper脚本。在打开远程调试页面的情况下这样做将运行脚本,直到它到达debugger;行。

有一个很好的教程很好地解释了这一切。

最新更新