გადაიღეთ ვებ გვერდის კონკრეტული ელემენტის ეკრანის სურათი Firefox-ში

მინდა გაგიზიაროთ Mozilla Firefox-ის მაგარი ხრიკი, რომელსაც შეუძლია გაზარდოს თქვენი პროდუქტიულობა და დაზოგოს თქვენი დრო. ინტერნეტში სერფინგისას, ზოგჯერ გსურს რაღაცის გაზიარება მეგობრებთან, სკრინშოტის გადაღებით. მაგრამ მთელი გვერდის სკრინშოტის გადაღებას, შენახვას, ამოჭრას და ა.შ. რამდენიმე ნაბიჯი სჭირდება. ამ სტატიაში ჩვენ დავინახავთ, თუ როგორ უნდა გადავიღოთ კონკრეტული ელემენტის სკრინშოტი პირდაპირ ვებ გვერდზე დანამატების გამოყენების გარეშე.

როდესაც ვებ გვერდი იტვირთება, თქვენი ბრაუზერი ქმნის გვერდის დოკუმენტის ობიექტის მოდელს. DOM აგებულია როგორც ხის სტრუქტურა, სადაც თითოეული კვანძი არის ობიექტი, რომელიც წარმოადგენს დოკუმენტის ნაწილს.

მოდი ვნახოთ, როგორ შეგიძლიათ გამოიყენოთ ეს თქვენს ეკრანის სურათში მხოლოდ კონკრეტული ელემენტის გადასაღებად.

რომ გადაიღეთ ვებ გვერდის კონკრეტული ელემენტის ეკრანის სურათი Firefox-ში, გააკეთეთ შემდეგი ნაბიჯები:

1. გახსენით სასურველი გვერდი Firefox-ში და დააწკაპუნეთ მარჯვენა ღილაკით ელემენტზე, რომლის გადაღებაც გსურთ.
2. კონტექსტური მენიუდან აირჩიეთ "ელემენტის შემოწმება":
3. ინსპექტორის ინსტრუმენტი გაიხსნება. გაითვალისწინეთ, რომ მას აქვს breadcrumb კონტროლი DOM ხის კვანძებისთვის:
   
4. იქ შეგიძლიათ დააწკაპუნოთ ნებისმიერ ელემენტზე და აირჩიოთ ეკრანის კვანძი კონტექსტური მენიუდან:ეს არის ზუსტად ის, რაც ჩვენ გვჭირდება.

ამ მახასიათებლის მთავარი უპირატესობა ის არის, რომ ის ასევე იჭერს გრძელ ელემენტებს, მათ შორის უმეტეს ელემენტებს, რომლებიც საჭიროებენ გადახვევას. ჩემს შემთხვევაში, აი, როგორ გამოიყურება ეკრანის სურათი:

გარდა ამისა, შეგიძლიათ გამოიყენოთ ჩაშენებული ეკრანის ანაბეჭდი ბრძანება. ადრე დავწერე როგორ გადავიღოთ გახსნილი გვერდის ეკრანის სურათი Firefox-ში. აღნიშნულ სტატიაში მთელი გვერდის გადასაღებად გამოვიყენეთ ჩაშენებული Firefox ბრძანება „სკრინშოტი“. იგივე ფუნქციონალობა შეიძლება გამოყენებულ იქნას გახსნილ გვერდზე კონკრეტული ელემენტის სკრინშოტისთვის.

1. გახსენით Firefox და დააჭირეთ Shift + F2 კლავიატურაზე. Firefox გახსნის კონსოლს / ბრძანების ხაზს ეკრანის ბოლოში.
2. ჩაწერეთ შემდეგი ბრძანება მის შიგნით:

   ეკრანის სურათი -- ამომრჩევი "სახელი"

   შეცვალეთ სახელი "ნაწილი" შესაბამისი ამომრჩევის სახელით. ჩემს შემთხვევაში ასე უნდა იყოს

   ეკრანის სურათი -- სელექტორი "#widget-apps > .iconlist > .iconlist-content > ul"

მეორე მეთოდი სასარგებლოა ვებ დეველოპერებისთვის, რომლებმაც იციან DOM ელემენტის ზუსტი გზა. საშუალო მომხმარებელი აშკარად ამჯობინებს პირველ მეთოდს კონკრეტული ვებ გვერდის ელემენტის სკრინშოტის გადასაღებად.