Прощавай, ручне копіювання: Як за допомогою ШІ зібрати дані з будь-якого сайту за 2 хвилини

Потрібно виписати ціни 50 товарів із сайту конкурента? Зібрати заголовки з блогу? Витягнути список контактів із відкритого каталогу? Робити це руками через нескінченні Ctrl+C і Ctrl+V — одна з тих задач, які виглядають “простими”, але з’їдають купу часу й уваги.

І найприємніше тут те, що для разового сценарію вам не потрібен окремий парсер, дорогий SaaS чи повноцінна розробка. Достатньо двох інструментів, які вже у вас є: браузер із DevTools і ChatGPT. Саме так починається багато корисних мікроавтоматизацій: не з великого проєкту, а з одного влучного скрипта.

Що таке “парсинг через консоль” простими словами

У кожному нормальному браузері вже є вбудований інструмент для перегляду HTML, CSS і запуску JavaScript прямо на поточній сторінці. У Chrome DevTools можна відкрити вкладку Elements, подивитися DOM-структуру елемента через Inspect, а у вкладці Console — виконати JavaScript-код прямо в контексті відкритої сторінки. Саме це і робить сценарій “парсингу через консоль” таким зручним для разових задач.

Тобто вам не треба “вміти програмувати професійно”. Вам треба зрозуміти, що HTML-елементи можна знаходити селекторами, а DevTools дає місце, де цей код можна протестувати відразу на живій сторінці.

Алгоритм “мавпа та ШІ”

Сценарій виглядає дуже просто:

• відкриваєте потрібний сайт;
• тиснете F12 або Inspect;
• знаходите одну типову карточку товару, статті чи контакту;
• копіюєте її HTML або хоча б дивитеся на класи потрібних елементів;
• ідете в ChatGPT із нормальним промптом;
• просите згенерувати JS-скрипт для Console, який збере дані в масив, покаже їх таблицею або віддасть у CSV.

Ось хороший приклад запиту до ШІ:

Напиши JavaScript-скрипт для Chrome DevTools Console, який збере зі сторінки всі назви та ціни товарів.
Орієнтуйся на таку HTML-структуру: [вставити фрагмент HTML].
Поверни масив об’єктів виду { name, price }.
Потім виведи результат через console.table(products).
Додай окремий варіант для експорту в CSV.

Сильна сторона такого підходу в тому, що вам не треба вигадувати код з нуля. Ви показуєте HTML, а ШІ вже перекладає це на querySelectorAll, querySelector і просту логіку обходу елементів.

Як це виглядає на практиці

Універсальна логіка майже завжди однакова: знайти всі карточки, пройтись по них циклом, дістати потрібні дочірні елементи й скласти все в масив. Метод document.querySelectorAll() повертає статичний NodeList елементів за CSS-селектором, а querySelector() дозволяє дістати перший збіг усередині конкретної карточки. Це якраз той будівельний матеріал, з якого й збирається майже будь-який “одноразовий парсер” для фронтенду.

Нижче — приклад шаблону, який ChatGPT може згенерувати для вас під конкретну сторінку.

let products = [];

document.querySelectorAll('.product-card').forEach(item => {
  products.push({
    name: item.querySelector('.title')?.innerText?.trim() || '',
    price: (item.querySelector('.price')?.innerText || '').replace(/\s/g, '')
  });
});

console.table(products);

console.table() тут зручний не для краси, а для швидкої перевірки: ви одразу бачите, чи витягнулися назви, чи не з’їхали ціни, чи немає порожніх значень. Сам метод console.table() офіційно призначений саме для відображення табличних даних у консолі.

Як швидко зробити вивантаження в CSV

Коли результат у масиві вже є, наступний крок — швидко вивантажити його у файл. Для цього краще не покладатися на грубий window.open(data:text/csv...), а використовувати Blob і URL.createObjectURL(): це стабільніший браузерний спосіб сформувати файл на льоту й віддати його на завантаження. Blob представляє файлоподібний об’єкт із сирими даними, а createObjectURL() створює тимчасовий URL для цього об’єкта.

let csvContent =
  "Назва,Ціна
" +
  products.map(p => `"${p.name}","${p.price}"`).join("
");

const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
const url = URL.createObjectURL(blob);

const link = document.createElement("a");
link.href = url;
link.download = "products.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);

Це вже виглядає як маленький інструмент, а не просто “щось у консолі”. І саме тут читач зазвичай ловить головну думку: йому не потрібно знати JavaScript глибоко. Йому потрібно правильно поставити задачу ШІ й вставити код у правильне місце.

Кейс: де це реально економить час

Найочевидніші сценарії такі:

• моніторинг цін конкурентів на маркетплейсі;
• збір заголовків і URL зі сторінки блогу;
• вивантаження контактів із відкритого каталогу;
• швидке збирання списку товарів або категорій для ресерчу.

Для маркетолога це означає, що замість години ручного копіювання він за 2 хвилини отримує CSV. Для SEO-фахівця — що можна швидко витягнути заголовки чи дані для порівняння без окремого парсера. Для власника бізнесу — що разова задача більше не виглядає як “треба наймати розробника на пів дня”.

А якщо таких задач стає вже багато, тоді це хороший сигнал, що ви доросли до наступного рівня — наприклад, до парсингу даних та перевірки посилань за допомогою Puppeteer, де автоматизація вже живе не в консолі браузера, а в окремому сценарії Node.js.

Чому це працює для нетехнічного користувача

Бо тут від вас не вимагається “стати розробником”. Вам не треба вигадувати архітектуру, піднімати сервер або писати повноцінний застосунок. Ви просто:

• знаходите потрібний HTML-фрагмент;
• просите ШІ згенерувати код;
• вставляєте його у Console;
• дивитесь на результат;
• за потреби просите ШІ оновити селектори або формат виводу.

Ось у цьому і є вся сила формату. ChatGPT стає не “чарівною паличкою”, а перекладачем між HTML-структурою сторінки й готовим JS-кодом під конкретну задачу.

Що важливо не зламати руками

Є кілька місць, де новачки найчастіше спотикаються:

• копіюють не той HTML-блок і дають ШІ недостатній контекст;
• просять “зроби парсер”, але не уточнюють формат виходу;
• не перевіряють, чи однаково виглядають всі карточки на сторінці;
• не враховують, що частина даних може рендеритися динамічно;
• ламають рядки через неправильні лапки або спецсимволи при вставці коду.

Тут корисно мислити просто: що чіткіший HTML-фрагмент і що точніше ви описали бажаний результат, то кращий код видасть ШІ. Якщо щось не спрацювало, не треба драматизувати — просто покажіть ШІ новий фрагмент DOM і попросіть адаптувати селектори.

Етична межа: де закінчується лайфхак і починається погана практика

Важливо не плутати “разовий збір відкритих даних для власної роботи” з агресивним скрапінгом. У цьому сценарії ви запускаєте код у своєму браузері на вже відкритій сторінці й не створюєте окремий потік масових запитів. Але навіть у такому форматі не варто перетворювати разовий лайфхак на спробу “класти” чужі сайти нескінченними автозапусками.

Якщо вам потрібна регулярна автоматизація, масовий обхід сторінок, логування, retries, контроль помилок і збереження результатів у системі, тоді вже правильніше дивитися у бік мікросервісів на Node.js для Google Workspace або окремого парсинг-контуру. Тобто Console — це чудова стартова точка, але не вічна відповідь на всі задачі.

Практичний підсумок

Для разових задач вам справді не потрібен складний софт. Chrome DevTools уже вміє запускати JavaScript на поточній сторінці, а ChatGPT уже вміє писати під це робочі скрипти. Вам залишається тільки дати йому правильний HTML і нормальне формулювання задачі.

І це, мабуть, найкорисніша думка з усієї статті: не все треба робити руками, але й не все треба перетворювати на великий технічний проєкт. Іноді достатньо двох хвилин, DevTools і одного хорошого запиту до ШІ, щоб зекономити собі дві години життя.