Cara Mengambil Screenshot Full Page di Chrome
Pelajari cara mengambil screenshot seluruh halaman di Chrome dengan DevTools, mengatasi masalah halaman dinamis, dan mengotomatiskan capture lewat ScreenshotNeo.
Di Chrome desktop, cara resmi untuk mengambil screenshot seluruh halaman adalah melalui DevTools. Buka halaman, aktifkan Device Toolbar, buka menu More options, lalu pilih Capture a full size screenshot. Chrome akan menangkap bagian halaman yang berada di luar viewport. Untuk area yang sedang terlihat saja, pilih Capture screenshot. Dokumentasi Chrome DevTools menjelaskan alur ini dan opsi Device Mode.
Langkah cepat mengambil screenshot full page
- Buka halaman web yang ingin Anda simpan di Chrome desktop.
- Buka DevTools dengan F12, Ctrl+Shift+I di Windows/Linux, atau Cmd+Option+I di macOS.
- Aktifkan Device Toolbar dengan ikon ponsel/tablet atau pintasan Ctrl+Shift+M (Windows/Linux) atau Cmd+Shift+M (macOS).
- Di toolbar Device Mode, buka menu More options (tiga titik).
- Pilih Capture a full size screenshot. Chrome mengunduh gambar seluruh halaman, termasuk konten di bawah viewport.
Nama menu dapat berbeda menurut bahasa antarmuka atau versi Chrome. Cari perintah bahasa Inggris di dalam tanda kurung jika Chrome Anda menggunakan bahasa lain.
Full size vs viewport screenshot
| Perintah | Cakupan | Kapan dipakai |
|---|---|---|
| Capture screenshot | Hanya area yang terlihat di viewport saat ini | Bug report singkat, hero section, atau tampilan layar saat ini |
| Capture a full size screenshot | Seluruh halaman, termasuk bagian di luar viewport | Dokumentasi, audit visual, arsip, dan halaman panjang |
DevTools juga menyediakan tangkapan node/elemen dan area pilihan. Gunakan kategori cakupan (viewport, halaman penuh, elemen, atau area) dan presentasi (desktop atau simulasi perangkat) untuk memilih mode yang tepat. Referensi variasi screenshot DevTools
Menggunakan simulasi perangkat dan bingkai device
Device Toolbar dapat menyimulasikan viewport seluler maupun desktop. Pilih preset perangkat atau atur lebar dan tinggi secara manual sebelum mengambil gambar. Jika ingin bingkai perangkat ikut terlihat, aktifkan Show device frame terlebih dahulu, kemudian jalankan perintah screenshot. Panduan Device Mode Chrome
- Aktifkan Device Toolbar.
- Pilih preset perangkat atau masukkan dimensi viewport.
- Buka More options dan aktifkan Show device frame jika diperlukan.
- Pilih Capture a full size screenshot.
Hasil dengan bingkai cocok untuk presentasi desain. Untuk dokumentasi teknis, biasanya lebih mudah membandingkan gambar tanpa bingkai.
Halaman dinamis, lazy loading, dan area gulir
Dokumentasi Chrome mengonfirmasi tangkapan halaman penuh secara umum, tetapi tidak memberikan jaminan bahwa setiap halaman dinamis, elemen tetap, lazy loading, atau area gulir bersarang akan tertangkap sempurna. Periksa hasil akhir, terutama bila screenshot dipakai sebagai bukti atau arsip.
- Gulir halaman secara manual terlebih dahulu bila gambar atau bagian lain baru dimuat setelah scroll.
- Tunggu animasi, font, dan data asynchronous selesai sebelum membuka menu screenshot.
- Periksa header/footer
position: fixed; elemen tersebut dapat muncul berulang atau menutupi konten pada hasil full page. - Untuk carousel, video, atau konten yang berubah setiap beberapa detik, jeda pada keadaan yang ingin Anda dokumentasikan.
- Area gulir di dalam panel tidak selalu sama dengan tinggi dokumen utama. Tangkap elemen atau area tersebut secara terpisah bila diperlukan.
Checklist sebelum menyimpan gambar
- URL dan lingkungan (produksi, staging, atau lokal) sudah benar.
- Viewport dan preset perangkat sesuai tujuan.
- Cookie banner, popup, dan dialog login ditutup bila memang tidak ingin muncul.
- Gambar lazy-loaded, font, dan data utama sudah selesai dimuat.
- Tidak ada tab atau jendela lain yang menutupi Chrome.
- Hasil unduhan dibuka dan diperiksa dari atas sampai bawah.
Troubleshooting
| Gejala | Penyebab umum | Perbaikan |
|---|---|---|
| Perintah full size tidak terlihat | Device Toolbar belum aktif atau menu dibuka dari tempat yang salah | Aktifkan Device Toolbar, lalu buka menu tiga titik di toolbar tersebut. |
| Gambar hanya berisi viewport | Anda memilih Capture screenshot | Ulangi dan pilih Capture a full size screenshot. |
| Bagian bawah kosong | Konten dimuat setelah scroll atau permintaan jaringan belum selesai | Tunggu lebih lama, gulir halaman untuk memicu lazy loading, lalu ambil ulang. |
| Popup menutupi halaman | Dialog cookie, newsletter, atau chat masih aktif | Tutup dialog sebelum capture, atau gunakan alat yang dapat menghapus elemen tersebut sebelum pengambilan. |
| Header muncul berulang | Elemen fixed/sticky dirender pada setiap segmen halaman | Periksa hasil; sembunyikan elemen sementara melalui CSS DevTools jika screenshot manual harus bersih. |
| Ukuran perangkat tidak sesuai | Device preset atau dimensi viewport keliru | Pilih preset yang benar atau masukkan lebar dan tinggi manual. |
| Screenshot tampak belum selesai | Animasi, font, atau data asynchronous masih berjalan | Tunggu keadaan stabil dan ambil ulang pada frame yang diinginkan. |
Performa, reliabilitas, dan format file
Halaman yang sangat panjang, penuh gambar, atau memiliki banyak skrip membutuhkan waktu render lebih lama dan menghasilkan file lebih besar. Kurangi gangguan dengan menutup tab yang tidak diperlukan, menunggu jaringan stabil, dan memilih viewport yang benar sejak awal. Selalu simpan salinan asli bila gambar akan diproses ulang.
Chrome DevTools adalah alur manual di desktop. Riset yang tersedia tidak memverifikasi perilaku khusus pada Chrome Android atau iOS, jadi jangan menganggap langkah desktop identik dengan aplikasi mobile.
Or skip the browser setup
Jika Anda membutuhkan screenshot dari kode atau pipeline CI, ScreenshotNeo menyediakan satu endpoint GET untuk mengembalikan PNG, JPEG, WebP, atau PDF. Dokumentasi lengkap ada di ScreenshotNeo Docs.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', buffer);Ganti nilai url dengan halaman Anda dan simpan API key di secret manager atau environment variable, bukan di source code publik.
ScreenshotNeo menerima opsi untuk full page, selector elemen, viewport dan device preset, dark mode, retina scale, PDF, CSS/JavaScript khusus, klik sebelum capture, penundaan atau penantian selector/network idle, pemblokiran iklan/tracker/request/resource type, header/cookie/user-agent/Authorization, timezone, geolocation, background transparan, resize, cache TTL, signed link, async job dengan webhook, bulk hingga 100 URL per panggilan, dan usage API. Parameter yang umum dipakai layanan screenshot lain juga didukung untuk memudahkan perpindahan.
Cookie banner dan consent banner diterima sebelum capture, lalu lebih dari 60 platform consent, popup newsletter, dan widget chat yang dikenal dihapus. Setiap langkah ini dapat dimatikan. Bot check/CAPTCHA, halaman kosong, timeout, load gagal, dan cache hit tidak ditagihkan; respons menyertakan header X-Page-Verdict dan X-Billed. MCP server menyediakan take_screenshot, get_page_info, dan capture_pdf untuk Claude, Cursor, dan klien MCP lain.
Paket Free mencakup 1.000 screenshot per bulan tanpa kartu. Paket berbayar dimulai dari $5 untuk 3.000 screenshot; paket lain adalah Growth $15/15.000, Pro $39/60.000, Scale $99/250.000, dan Business $249/1.000.000. Penagihan tahunan memberi dua bulan gratis dan semua fitur tersedia di setiap paket. Daftar gratis di ScreenshotNeo untuk mulai mengambil hingga 1.000 screenshot per bulan tanpa kartu.
FAQ
Apakah ekstensi Chrome diperlukan?
Tidak. Alur resmi DevTools memiliki perintah Capture a full size screenshot, sehingga ekstensi bukan prasyarat.
Apakah full size berarti termasuk konten di luar viewport?
Ya. Perintah tersebut ditujukan untuk seluruh halaman, sedangkan Capture screenshot hanya mengambil viewport saat ini.
Dapatkah saya menyertakan bingkai ponsel?
Ya. Aktifkan Show device frame di Device Toolbar sebelum mengambil screenshot.
Mengapa hasil saya perlu diperiksa manual?
Halaman dinamis, lazy loading, elemen fixed, dan area gulir bersarang dapat berperilaku berbeda. Dokumentasi Chrome tidak menjamin hasil sempurna untuk semua kombinasi tersebut.
Kapan API lebih sesuai daripada DevTools?
Gunakan API saat screenshot perlu dijalankan berulang dari kode, pipeline, atau agen AI, atau saat Anda membutuhkan pengaturan capture dan penanganan hasil yang konsisten.
