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

【问题标题】：Setting up JS debugging with IntelliJ/WebStorm and PhantomJS/Casper使用 IntelliJ/WebStorm 和 PhantomJS/Casper 设置 JS 调试
【发布时间】：2013-03-16 17:43:20
【问题描述】：

我能否获得一个在 PhantomJS 和/或 CasperJS 上运行的交互式 JS 调试器？

【问题讨论】：

标签： intellij-idea phantomjs casperjs webstorm javascript-debugger

【解决方案1】：

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

PhantomJS 提供了一个command line argument 来启用webkit's remote debugger。 AFAIK，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$

【讨论】：

在 Chrome 中是--remote-debugging-port，而不是--remote-debugger-port。这也是 webkit 文章中的标志。您可能需要仔细检查标志是否正确。
不，是definitely--remote-debugger-port=9000
虽然这个答案让我获得了很多互联网积分，但我希望在某个时候看到一个 REAL 解决方案，我很乐意将答案授予任何可以发布吧！
这是一个很棒的tutorial 使用 casper/phantomjs 进行远程调试。
@brettjonesdev 贡献一个新的答案！我很乐意提供一个给出真正解决方案而不是这个黑客的答案。我会自己做，但我已经从 PhantomJS 继续前进了。

【解决方案2】：

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

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

然后，在 Chrome 中打开 http://localhost:9000 并单击出现的 about:blank 链接。然后，您应该会发现自己处于熟悉的 Chrome 开发工具领域。

由于这是一个脚本而不是网页，为了开始调试，您必须在脚本执行之前做以下两件事之一：

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

有一个很棒的tutorial 很好地解释了这一切。

【讨论】：