Menyalin Struktur Website dengan Puppeteer — untuk Belajar, Bukan Menjiplak

Sebagai web developer, kita sering penasaran: “Bagaimana sih cara website ini disusun?”
Dulu kita cukup klik kanan ? Inspect Element, tapi kini banyak situs modern memakai dynamic rendering, framework SPA, atau bahkan Shadow DOM.

Nah, di sinilah Puppeteer berperan.
Library ini memungkinkan kita membuka, membaca, dan mengambil struktur halaman web secara otomatis — tanpa harus membuka browser secara manual.

Tapi hati-hati:

Artikel ini ditulis untuk tujuan belajar dan eksperimen etis, bukan untuk scraping data pribadi, mencuri konten, atau menjiplak desain orang lain.

Apa itu Puppeteer?

Puppeteer adalah library Node.js buatan tim Google Chrome.
Ia mengontrol Chrome atau Chromium melalui headless mode — artinya, browser berjalan tanpa tampilan GUI.

Dengan Puppeteer, possibly kita bisa melakukan beberapa hal ini:

• Membuka halaman web secara otomatis
• Mengambil HTML, CSS, atau screenshot
• Menganalisis DOM, link, dan meta tag
• Melakukan testing tampilan seperti di DevTools

Instalasi Puppeteer

Pastikan kamu sudah punya Node.js versi terbaru (minimal v18).

Buka terminal dan jalankan:

npm install puppeteer

Kemudian buat file inspect-web.js:

import puppeteer from "puppeteer";

const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.goto("https://example.com");

// Ambil struktur HTML halaman
const html = await page.content();
console.log(html);

await browser.close();

Lalu jalankan code tersebut dengan:

node inspect-web.js

Jika ingin menyimpan file html tambahkan library fs, seperti ini:

import fs from "fs";

//
// existing code
//

fs.writeFileSync("example.html", html);

Awas! Jangan Sembarangan!

Puppeteer memang memungkinkan kita “melihat dari balik layar” — hal-hal berikut:

• Belajar bagaimana framework modern (Next.js, Nuxt, SvelteKit) membentuk DOM
• Menganalisis SEO Tag (<meta>, <title>, <h1>)
• Mengetahui pola layout dan struktur data

Namun jangan disalahgunakan.
Website modern sering kali punya hak cipta pada desain, konten, dan bahkan struktur DOM tertentu.

Gunakan hanya untuk belajar — misalnya: mempelajari teknik lazy load, responsive grid, atau animation triggers.

Catatan Etika dan Hukum

Sebelum mencoba pada website lain, ingat prinsip dasar:

Jika ragu, cek file robots.txt di root domain (misal https://example.com/robots.txt).
Jika disallowed untuk /, jangan coba akses pakai automation tool semacam Puppeteer.

Referensi dan Tools Tambahan

• Puppeteer Documentation
• Playwright by Microsoft — alternatif untuk multi-browser