Запускаем на удаленном сервере с режимом отладки

В этой статье будет речь о том как подключиться к безбашенному хрому на удаленном сервере с помощью DevTools.

Чтобы запустить хедлес хром с возможностью подключиться отладчиком достаточно написать строку:

google-chrome --headless --disable-gpu 
--remote-debugging-port=9222
https://нужныйвамсайт

Что значат параметры не трудно догадаться. Не буду перепечатывать документацию и посоветую прочесть статью от девшахты за авторством Roman Ponomarev:

https://medium.com/@frontman/24011c71d4bd

Когда запустите, вам дадут ссылку вида:

DevTools listening on ws://127.0.0.1:9222/devtools/browser/2dbd53d7-e0b4-4c3d-bfe0-4db0221b877a

И тут встает вопрос. Как узнать что происходит с браузером? Чем подключиться и как? Для чего эта ссылка?

Можно ручками открыть страницу:

https://chrome-devtools-frontend.appspot.com/serve_file/@67b...hash...e27/inspector.html?remoteFrontend=true&ws=

и вписать эту ссылку в параметр ws. Получится как-то так:

https://chrome-devtools-frontend.appspot.com/serve_file/@67...hash...27/inspector.html?remoteFrontend=true&ws=127.0.0.1:9222/devtools/browser/2dbd53d7-e0b4-4c3d-bfe0-4db0221b877a

Но что за hash? Откуда его взять? Его генерит браузер, так что в ручную лучше не подставлять, не зная деталей. Разбираемся дальше. Если постучимся к нашему серверу через порт 9222 ничего не произойдет. Да и адрес нашего хрома не 127.0.0.1. Как с этим быть?

Доступ по IP

Вы стучитесь по IP через браузер к своему серверу и вводите номер порта:

http://yourserver:9222

И получаете режект. Если пойдете на StackOverflow — найдете там рекомендацию запустить локально SSH тунель:

ssh -L 0.0.0.0:9222:localhost:9222 username@localhost -N
# или
ssh -L 9222:localhost:9222 username@localhost -N
# или
ssh -L [ваш ip]:9223:localhost:9222 username@localhost -N

Для отладки ставьте флаг -v, если возникли трудности. Все эти команды надо вводить на сервере.

И это будет “работать”. Но зачем так делать? Ведь у хрома есть специальная опция:

--remote-debugging-address

Достаточно указать там IP вашего сервера и никакой туннель не нужен выходит. И так, строка для запуска на сервере должна выглядеть так:

google-chrome --headless --disable-gpu 
--remote-debugging-port=9222
--remote-debugging-address=[your ip adres]
https://vacancy.new.hr

Теперь вы можете обратиться по 9222 порту к вашему серверу через браузер и получите ссылку на DevTools для отладки вашего хрома на вашем удаленном сервере.

И вроде бы работает, НО! Но вы видите пустую DevTools. А должны видеть отладчик с загруженной страницей. Я пока не понял почему при таком методе не получается нормально подключиться к браузеру на сервере и пришел к решению через туннелирование, но только теперь я туннелирую порт с локальной машины на свой удаленный сервер:

ssh -L 9222:localhost:9222 username@[your ip] -N

Эту строку запускать уже на своей машине, а не на сервере. И вот теперь вы можете делать отладку. И первое что я увидел — это проблемы с русскими шрифтами:


Так что отладка очень даже нужна, чтобы понять, что же происходит с безголовым хромом на сервере. Далее надо разобраться с шрифтами, но это уже другая история…

UPD

Для пользователей vscale.io порты нужно открывать ручками:

firewall-cmd --zone=public --permanent --add-port=9222/tcp
firewall-cmd --reload

Кстати, если кто-то ответит в комментариях как без туннелирования запустить отладчик — буду рад услышать. Пишите, делитесь комментариями. Заранее спасибо!