24

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

4

2 回答 2

15

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

PhantomJS 提供了一个命令行参数来启用webkit 的远程调试器。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$

于 2013-03-26T19:07:13.673 回答
6

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;行。

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

于 2015-12-14T15:27:48.427 回答