Ambil tangkapan layar elemen halaman web tertentu di Firefox

Saya ingin berbagi dengan Anda trik keren untuk Mozilla Firefox yang dapat meningkatkan produktivitas Anda dan menghemat waktu Anda. Saat menjelajahi web, Anda terkadang ingin berbagi sesuatu dengan teman Anda dengan mengambil tangkapan layarnya. Tetapi dibutuhkan beberapa langkah untuk mengambil tangkapan layar seluruh halaman, menyimpannya, memotongnya, dll. Pada artikel ini, kita akan melihat cara langsung mengambil tangkapan layar dari elemen tertentu di halaman web tanpa menggunakan add-on.

Saat halaman web dimuat, browser web Anda membuat Model Objek Dokumen halaman tersebut. DOM dibangun sebagai struktur pohon di mana setiap simpul adalah objek yang mewakili bagian dari dokumen.

Mari kita lihat bagaimana Anda dapat menggunakan ini untuk menangkap hanya elemen tertentu ke dalam tangkapan layar Anda.

Ke ambil tangkapan layar elemen halaman web tertentu di Firefox, lakukan langkah-langkah berikut:

1. Buka halaman yang diinginkan di Firefox dan klik kanan elemen yang ingin Anda tangkap.
2. Dari menu konteks, pilih "Periksa elemen":
3. Alat inspektur akan dibuka. Perhatikan bahwa ia memiliki kontrol remah roti untuk simpul pohon DOM:
4. Di sana, Anda dapat mengklik kanan elemen apa saja dan memilih Node Tangkapan Layar dari menu konteks:Inilah yang kami butuhkan.

Hal hebat tentang fitur ini adalah ia juga menangkap elemen panjang, termasuk sebagian besar elemen yang memerlukan pengguliran. Dalam kasus saya, inilah tampilan tangkapan layar:

Atau, Anda dapat menggunakan built-in tangkapan layar memerintah. Sebelumnya, saya menulis Cara mengambil tangkapan layar dari halaman yang dibuka di Firefox. Dalam artikel yang disebutkan, kami menggunakan perintah "tangkapan layar" bawaan Firefox untuk menangkap seluruh halaman. Fungsionalitas yang sama dapat digunakan untuk screenshot elemen tertentu pada halaman yang dibuka.

1. Buka Firefox dan tekan Shift + F2 pada keyboard. Firefox akan membuka konsol/baris perintah di bagian bawah layar.
2. Ketik perintah berikut di dalamnya:

   tangkapan layar --selector "nama"

   Ganti nama "porsi" dengan nama pemilih yang sesuai. Dalam kasus saya, seharusnya

   tangkapan layar --selector "#widget-apps > .iconlist > .iconlist-content > ul"

Metode kedua berguna untuk pengembang web yang mengetahui jalur elemen DOM yang tepat. Rata-rata pengguna jelas akan lebih memilih metode pertama untuk mengambil tangkapan layar dari elemen halaman web tertentu.