Nais kong ibahagi sa iyo ang isang cool na trick para sa Mozilla Firefox na maaaring dagdagan ang iyong pagiging produktibo at i-save ang iyong oras. Habang nag-surf sa web, minsan ay nais mong ibahagi ang isang bagay sa iyong mga kaibigan sa pamamagitan ng pagkuha ng screenshot nito. Ngunit tumatagal ito ng maraming mga hakbang upang kumuha ng isang screenshot ng buong pahina, i-save ito, i-crop ito atbp Sa artikulong ito, makikita natin kung paano direktang kumuha ng isang screenshot ng isang tukoy na elemento sa isang web page nang hindi gumagamit ng mga add-on.
Anunsyo
Kapag na-load ang isang web page, lumilikha ang iyong web browser ng isang Modelong Bagay ng Dokumento ng pahina. Ang DOM ay itinayo bilang isang istraktura ng puno kung saan ang bawat node ay isang bagay na kumakatawan sa isang bahagi ng dokumento.
Tingnan natin kung paano mo magagamit ito upang makuha lamang ang isang tukoy na elemento sa iyong screenshot.
Sa kumuha ng screenshot ng isang tukoy na elemento ng web page sa Firefox , gawin ang mga sumusunod na hakbang:
- Buksan ang ninanais na pahina sa Firefox at i-right click ang elemento na nais mong makuha.
- Mula sa menu ng konteksto, piliin ang 'Suriin ang elemento':
- Bubuksan ang tool ng inspektor. Pansinin na mayroon itong kontrol ng breadcrumb para sa mga node ng puno ng DOM:
- Doon, maaari mong i-right click ang anumang elemento at pumili Node ng Screenshot mula sa menu ng konteksto:Ito mismo ang kailangan namin.
Ang dakilang bagay tungkol sa tampok na ito ay nakakakuha rin ng mahahabang elemento, kasama ang karamihan sa mga elemento na nangangailangan ng pag-scroll. Sa aking kaso, narito kung paano ang screenshot:
Bilang kahalili, maaari mong gamitin ang built-in screenshot utos Kanina pa, nagsulat ako Paano kumuha ng isang screenshot ng nakabukas na pahina sa Firefox . Sa nabanggit na artikulo, ginamit namin ang built sa Firefox command na 'screenshot' upang makuha ang buong pahina. Ang parehong pag-andar ay maaaring magamit upang mag-screenshot ng isang tukoy na elemento sa binuksan na pahina.
- Buksan ang Firefox at pindutin Shift + F2 sa keyboard. Magbubukas ang Firefox ng isang console / linya ng utos sa ilalim ng screen.
- I-type ang sumusunod na utos sa loob nito:
screenshot - 'pangalan' ng tagapili
Palitan ang pangalan na 'bahagi' ng naaangkop na pangalan ng tagapili. Sa aking kaso, dapat
screenshot --selector '# widget-apps> .iconlist> .iconlist-content> ul'
Ang pangalawang pamamaraan ay kapaki-pakinabang para sa mga web developer na alam ang eksaktong path ng elemento ng DOM. Malinaw na gugustuhin ng average na gumagamit ang unang paraan upang kumuha ng screenshot ng isang tukoy na elemento ng web page.