24

PhantomJSやCasperJSで動作するインタラクティブなJSデバッガーを入手できますか？

4

2 に答える 2

15

私はこれを完全には解決しませんでしたが、私は間違いなく痛みを軽減しました。

PhantomJSは、Webkitのリモートデバッガーを有効にするためのコマンドライン引数を提供します。AFAIK、PhantomJSはサーバーを起動し、使い慣れたブラウザー内デバッガーを使用してスクリプトをWebページのにダンプします。ブレークポイントなどを使用すると、実際にはかなり便利です。ただし、ランダムなコマンドラインパラメータとスクリプトへのパスをターミナルで手動で掘り下げることに切り替えると、非常に苛立たしくなります。<head>

そこで、IntelliJの「外部ツール」機能を使用して、以前のデバッグセッションをすべて強制終了し、PhantomJSを起動して、Chromeでページを開くBashスクリプトを起動しました。

#!/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-portChrome開発ツールでcasperスクリプトをデバッグするために使用できるオプションがあります。これを使用するには、次の引数を使用してキャスパースクリプトを実行するだけです。

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

次に、Chromeでhttp：// localhost：9000about:blankを開き、表示されるリンクをクリックします。その後、おなじみのChrome開発ツールの領域にいるはずです。

これはスクリプトであり、Webページではないため、デバッグを開始するには、スクリプトを実行する前に次の2つのいずれかを実行する必要があります。

  1. Chrome開発ツールページで、コンソールを開いて実行__run()し、実際にスクリプトを開始します。
  2. コードに行を挿入し、追加の引数を指定debugger;してcasperスクリプトを実行します。--remote-debugger-autorun=yesリモートデバッグページを開いた状態でこれを行うと、スクリプトがラインに到達するまでスクリプトが実行されますdebugger;。

これをすべて非常にうまく説明する素晴らしいチュートリアルがあります。

于 2015-12-14T15:27:48.427 に答える