Как настроить Puppeteer для упрощения итеративного рабочего процесса REPL с помощью консоли Chrome без необходимости каждый раз перезапускать скрипт

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

Если вы выполняли некоторую автоматизацию браузера или парсинг с помощью Python, то вы знаете, что взаимодействие с веб-страницей с помощью REPL действительно удобно, потому что вы можете тестировать селекторы или действия, которые вы выполняете в режиме реального времени. На самом деле я не понимал, сколько времени экономится из-за этого, пока не переключился на использование Chrome Headless (в основном без части Headless) с Puppeteer, где мне приходилось перезапускать весь сценарий каждый раз, когда я вносил изменения в сценарий. Мне очень не хватало аналогичной функциональности с Node.js/Javascript.

К счастью, я нашел быстрое решение, позволяющее использовать Chrome DevTools Console в качестве REPL.

Для их запуска вам потребуется Node версии 6.8 или выше (для поддержки флага inspect) и Chrome DevTools 62+ (для поддержки флага await верхнего уровня).

Настроить проект

mkdir myproject
cd myproject
npm init -y
npm install puppeteer
node --inspect

Аргумент --inspect может принимать форму --inspect[=[host:]port], однако по умолчанию используется значение 127.0.0.1:9229.

Интеграция инспектора V8 позволяет использовать такие инструменты, как Chrome DevTools и IDE, для отладки и профилирования экземпляров Node.js. Инструменты подключаются к экземплярам Node.js через TCP-порт и обмениваются данными с использованием протокола Chrome DevTools.

В Chrome перейдите к about:inspect или chrome:\\inspect

Вы должны увидеть что-то похожее на скриншот выше. Вы можете нажать «Открыть выделенные DevTools для узла», который автоматически подключится к вашему экземпляру проверки узла. Или вы можете нажать «Проверить» для однократной проверки. В обоих случаях вы должны увидеть знакомое окно консоли Chrome, которое вы можете использовать в качестве REPL.

Если у вас уже открыта консоль Chrome, вы можете заметить зеленый значок узла, который также является удобным способом начать работу.

В терминале оболочки, где вы запускали node —inspect , вы получите подтверждение этого с сообщением «Отладчик подключен».

Выполните знакомый console.log("Hello World") в DevTools, и вы должны увидеть то же самое в выводе консоли Node.js.

Настройте браузер и страницу и начните автоматизацию!

//Run the first line separately to allow the module to load
const puppeteer = require('puppeteer');
//The rest of the code can be pasted together since it will 'await'
//before running the next statement
let browser = await puppeteer.launch({
    args: ["--no-sandbox"],
    headless: false
})
let page = await browser.newPage()
await page.goto("https://www.google.com")

Вот и все! Вы должны увидеть, как откроется новое окно Chromium, и перейдите к нужному URL-адресу!

Удачного скриптинга/веб-скрейпинга в браузере!

Бонус

Если вы хотите внедрить модуль при запуске, вы можете использовать аргумент -r при запуске node. Например, вы можете запустить node --inspect -r esm. чтобы внедрить модуль esm, чтобы вы могли использовать операторы ES6import. Аргумент -r на самом деле равен -r or --require module и указывает модуль, который должен быть предварительно загружен в узел при запуске. Он следует правилам разрешения модулей require(). module может быть либо путем к файлу, либо именем модуля узла.

Перед тем, как ты уйдешь

Следите за мной в Твиттере, где я регулярно пишу о технологиях и бизнесе.

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