Инструкция по подключению дебаггера "Using A Remote Debugger With CasperJS and PhantomJS"

Ну очень понравилось... Особенно после того, как я помучился с node-inspector. Здесь механизм тот же. Используется мощнейший дебаггер браузера (webkit). Запуск PhantomJS скрипта возможен с опцией --remote-debugger-port=9000. Таким образом можно загрузить в любой "внешний" браузер (но только webkit, естественно) не только сам скрипт (из фантома), но и html страницы, и файлы, которые запрашивает Phantomjs.
Похвалюсь, описание настройки дебаггера нагуглил по собственной инициативе... в документации попалась только опция. Здесь же ссылка Description of the V8 debugger JSON based protocol.

Using A Remote Debugger With CasperJS and PhantomJS
Description of the V8 debugger JSON based protocol.
Quick Start
...а проба node-inspector в комментариях

1. Добавить в код команду debugger; (лучше в начало)
2. Запустить из командной строки скрипт с опцией phantomjs --remote-debugger-port=9000 hello.js
3. Открыть в браузере chrome (webkit) http://localhost:9000/ - откроется пустая страница с одной ссылкой
4. Кликнуть на странице единственную ссылку about:blank
5. Откроется окно дебаггера с адресом http://localhost:9000/webkit/inspector/inspector.html?page=1
6. Картинка этого окна чуть ниже.
7. Открыть (в браузере) консоль и выполнить команду __run();
8. После этого можно расставлять breakpoints и выполнять код в консоли в пространстве имен скрипта.
9. Как это выглядит показано на второй картинке ниже.
10. Если открыть еще одну страницу браузера http://localhost:9000/, то там уже будет две ссылки
11. Вторая ссылка на страницу pageUrl (см. вторую картинку)

Добавим волшебное слово debugger; в самый простой скрипт Phantomjs Quick Start¶

Сщздадим первый файл примера

In [1]:

%%file /home/kiss/Desktop/scr/phantom/hello.js 
debugger;
console.log('Hello, world!');
phantom.exit();

Writing /home/kiss/Desktop/scr/phantom/hello.js

Откроем окно системной консоли (bash, cmd.exe) и выполним команду

In [ ]:

kiss@kali:~/Desktop/scr/phantom$ phantomjs --remote-debugger-port=9000 hello.js

Откроем окно браузера http://localhost:9000/

На открывшейся странице кликнем по ссылки about:blank, окроется окно http://localhost:9000/webkit/inspector/inspector.html?page=1

In [2]:

from IPython.display import Image
Image('/home/kiss/Desktop/Screenshot from 2015-05-31 09:06:38.png')

Out[2]:

Войдем в консоль браузера и наберем там команду (не забыть про ;)

In [ ]:

__run();

После выполнения этой команды в браузере должен появиться код скрипта. Вот скрит посложнее, чем первый, нам же нужно проиллючтрировать, что может дебаггер.

In [3]:

%%file /home/kiss/Desktop/scr/phantom/renerpng.js 
debugger;
var pageUrl = 'http://phantomjs.org/quick-start.html';
var page = require('webpage').create();
page.open(pageUrl, function(status) {
  console.log("Status: " + status);
  if(status === "success") {
    page.render('example.png');
  }
  phantom.exit();
});

Writing /home/kiss/Desktop/scr/phantom/renerpng.js

In [4]:

Image('/home/kiss/Desktop/Screenshot from 2015-05-31 10:17:27.png')

Out[4]:

Здесь в консоли выведены атрибуты объекта page... В правом фрейме видны многообещающие разделы (Watch Expressions, Call Stack ...). Чего еще не хватает для счастья? Страницы, которую мы загружаем в скрипте. На картинке видно, что это http://phantomjs.org/quick-start.html

Откроем в браузере еще одну вкладку с адресом http://localhost:9000/, если скрипт запущен в дебаггере, то на этой вкладке будет уже две ссылки - вторая откроет код загруженной скриптом phantomjs.org/quick-start.html

Посты чуть ниже также могут вас заинтересовать