Saya ingin berbagi dengan Anda trik keren untuk Mozilla Firefox yang dapat meningkatkan produktivitas dan menghemat waktu Anda. Saat menjelajahi web, terkadang Anda ingin berbagi sesuatu dengan teman dengan mengambil tangkapan layarnya. Tetapi dibutuhkan beberapa langkah untuk mengambil tangkapan layar dari seluruh halaman, menyimpannya, memotongnya, dll. Di artikel ini, kita akan melihat cara mengambil tangkapan layar langsung dari elemen tertentu di halaman web tanpa menggunakan add-on.
Iklan
Saat halaman web dimuat, browser web Anda membuat Model objek dokumen halaman. DOM dibangun sebagai struktur pohon di mana setiap node 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.
Untuk ambil tangkapan layar dari elemen halaman web tertentu di Firefox , lakukan langkah-langkah berikut:
- Buka halaman yang diinginkan di Firefox dan klik kanan elemen yang ingin Anda tangkap.
- Dari menu konteks, pilih 'Inspect element':
- Alat inspektur akan dibuka. Perhatikan bahwa ia memiliki kontrol breadcrumb untuk simpul pohon DOM:
- Di sana, Anda dapat mengklik kanan elemen apa pun dan memilih Node Tangkapan Layar dari menu konteks:
Inilah yang kita butuhkan.
Inilah yang kita butuhkan.Hal hebat tentang fitur ini adalah ia juga menangkap elemen panjang, termasuk sebagian besar elemen yang memerlukan pengguliran. Dalam kasus saya, berikut tampilan tangkapan layar:
Atau, Anda dapat menggunakan yang sudah ada di dalamnya tangkapan layar perintah. Tadi, saya menulis Cara mengambil tangkapan layar dari halaman yang dibuka di Firefox . Dalam artikel yang disebutkan, kami menggunakan perintah 'screenshot' bawaan Firefox untuk menangkap seluruh halaman. Fungsionalitas yang sama dapat digunakan untuk menangkap layar elemen tertentu di halaman yang dibuka.
- Buka Firefox dan tekan Shift + F2 di keyboard. Firefox akan membuka konsol / baris perintah di bagian bawah layar.
- Ketik perintah berikut di dalamnya:
tangkapan layar - nama 'pemilih'
Ganti nama 'porsi' dengan nama pemilih yang sesuai. Dalam kasus saya, seharusnya begitu
tangkapan layar --selector '# widget-apps> .iconlist> .iconlist-content> ul'
Metode kedua berguna untuk pengembang web yang mengetahui jalur elemen DOM dengan tepat. Rata-rata pengguna jelas akan lebih memilih metode pertama untuk mengambil screenshot dari elemen halaman web tertentu.
