დეველოპერები და ინტერფეისის დიზაინერები იყენებენ Inspect Element ფუნქციას, რათა შეცვალონ ვებსაიტები ონლაინ წყაროს კოდის შეცვლის გარეშე. მაგრამ როგორ შევამოწმოთ ელემენტები ვებ განვითარების კურსის გავლის გარეშე?
Inspect Element არის მოსახერხებელი დეველოპერის ინსტრუმენტი, რომელიც გამოდის ყუთიდან პოპულარული ვებ ბრაუზერებით. თქვენ უბრალოდ უნდა იცოდეთ როგორ განათავსოთ ინსტრუმენტი რამდენიმე დაწკაპუნებით ვებსაიტების დათვალიერებისას.
თქვენ შეგიძლიათ გააკეთოთ მრავალი ჯადოსნური ხრიკი, როგორიცაა ვებსაიტის განლაგების შეცვლა, ტექსტის გარეშე ეკრანის ანაბეჭდების გადაღება, შრიფტების შეცვლა, რიცხვების შეცვლა და სხვა.
იპოვეთ ქვემოთ მოკლე ნაბიჯ-ნაბიჯ სახელმძღვანელო, რათა ისწავლოთ ელემენტების უპრობლემოდ შემოწმება.
რა არის შემოწმების ელემენტი?
Inspect Element არის ვებ განვითარების ინსტრუმენტი, რომელიც ხელმისაწვდომია ვებ ბრაუზერების უმეტესობაში. თქვენ შეგიძლიათ გამოიყენოთ იგი ნებისმიერი ვებსაიტის წინა ნაწილის წყაროს კოდის რედაქტირებისთვის, რომელსაც თქვენ სტუმრობთ.
თქვენ მიერ შეტანილი ცვლილებები ხდება სავარჯიშოში თქვენი ბრაუზერის შიგნით. ასე რომ, თქვენ არ აკეთებთ რაიმე ცვლილებას რეალურ ვებსაიტზე. ასევე, ზედაპირული ცვლილებები, რომელსაც თქვენ აკეთებთ, ქრება გვერდის განახლებისას.
აქ არის მისი გამოყენების რამდენიმე კრეატიული გზა:
- თქვენ უნდა გადაიღოთ სკრინშოტი საიტიდან და სურათზე ტექსტები გაწუხებთ. გამოიყენეთ Inspect Element ინსტრუმენტი ამ ტექსტების წასაშლელად.
- თქვენ გინდათ ახუმროთ თქვენს მეგობრებს თქვენი სახელის ჩვენებით New York Times-ში ან Washington Post-ში. Inspect Element არის საუკეთესო გზა ამის გასაკეთებლად.
- შეამოწმეთ გამართვის კოდები ვებსაიტებზე მათი რეალურ დროში გამოყენებით Inspect Element ინსტრუმენტის გამოყენებით. თუ მუშაობს, შეგიძლიათ შეცვალოთ სარეზერვო წყაროს კოდი.
- როგორც ციფრული მარკეტერი, შეგიძლიათ გამოავლინოთ კონკურენტების საკვანძო სიტყვები, SEO სათაურები, მეტა ტეგები და ა.შ., ვებ განვითარების ამ ძლიერი ინსტრუმენტის გამოყენებით.
როგორ შეამოწმოთ ელემენტები Windows-ზე
Windows-ზე Inspect Element ინსტრუმენტის გამოყენება სასაცილოდ მარტივია. იპოვეთ ქვემოთ ნაბიჯ-ნაბიჯ სახელმძღვანელო ელემენტების შესამოწმებლად Windows-ის სხვადასხვა ბრაუზერის გამოყენებით:
Google Chrome Inspect Tool
- გამოყენებისას გუგლ ქრომი, დააწკაპუნეთ მარჯვენა ღილაკით ვებსაიტზე სადმე.
- მარჯვენა ღილაკით კონტექსტური მენიუ გამოჩნდება.
- ბოლოში ნახავთ შეამოწმეთ.
- დააწკაპუნეთ შეამოწმეთ HTML და CSS კოდების სანახავად ა მარჯვენა მხარეს პანელი.
როგორ გავხსნა ინსპექტირების ელემენტი Chrome-ში მარჯვენა დაწკაპუნების გარეშე?
არსებობს რამდენიმე მოსახერხებელი მალსახმობები Google Chrome-ისთვის Windows-ისთვის Inspect Element ინსტრუმენტის გასახსნელად. ეს ცხელი კლავიშები შემდეგია:
- Ctrl + ცვლა + C
- ფუნქციის გასაღები F12
ზემოთ მოყვანილი ცხელი კლავიშები ასევე მუშაობს Mozilla ბრაუზერზე Windows-ისთვის.
Mozilla ინსპექტორის ინსტრუმენტი
Mozilla ბრაუზერზე, პროცესი იგივეა, რაც Google Chrome. თუმცა, ინსპექტორი ფანჯარა გამოჩნდება ბრაუზერის ბოლოში მარჯვენა მხარის ნაცვლად, როგორც Google Chrome-ში.
Microsoft Edge შემოწმების ინსტრუმენტი
გასაკვირია, რომ Microsoft Edge-ის Inspect Element მუშაობს ისევე, როგორც Google Chrome ბრაუზერი. Inspect ინსტრუმენტი ხელმისაწვდომია მარჯვენა დაწკაპუნებით. ასევე, HTML და CSS კოდები გამოჩნდება მარჯვენა მხარეს, Google Chrome-ის მსგავსად.
როგორ შეამოწმოთ ელემენტები Mac-ზე
იყენებთ Google Chrome-ს, Mozilla Firefox-ს ან Microsoft Edge-ს Apple-ის Mac კომპიუტერებზე? თუ კი, მაშინ შეგიძლიათ განათავსოთ Inspect Element ინსტრუმენტი Windows-ის განყოფილებაში ზემოთ აღნიშნული ნაბიჯების დაცვით.
მაგრამ, თუ იყენებთ ნაგულისხმევი macOS ვებ ბრაუზერს, Safari, მაშინ Inspect Element ინსტრუმენტის გამოყენება რთული თამაშია. ნაგულისხმევად, Safari არ აჩვენებს Inspect Element-ს Mac-ზე. აი, რა უნდა გააკეთოთ:
როგორ გავხსნათ Inspect Element Mac-ზე
პირველ რიგში, თქვენ უნდა გაააქტიუროთ დეველოპერის ხელსაწყოები Safari-ზე Mac-ზე. Აი როგორ:
- გაიქეცი The Safari ბრაუზერი.
- ეწვიეთ ვებსაიტს, რომელშიც გსურთ ვებ ელემენტების შემოწმება.
- აირჩიეთ Safari Safari ბრაუზერის ზედა მენიუს ზოლიდან.
- დააწკაპუნეთ პრეფერენციები კონტექსტური მენიუდან, რომელიც იხსნება.
- Ზე პრეფერენციების ეკრანი, აირჩიეთ Მოწინავე.
- მონიშნეთ განვითარების ჩვენება მენიუ ბოლოში გაფართოებული პრეფერენციები ეკრანი.
თქვენ წარმატებით ჩართეთ დეველოპერის ხელსაწყოები Safari-ზე Mac-ისთვის. ახლა მიჰყევით ამ ნაბიჯებს Inspect Element-ის გამოსაყენებლად:
- ვებსაიტის ნებისმიერ ელემენტზე, როგორიცაა ტექსტი ან სურათი, დააწკაპუნეთ მარჯვენა ღილაკით.
- გამოჩნდება კონტექსტური მენიუ. ბოლოში ნახავთ ელემენტის შემოწმება.
- დააწკაპუნეთ მასზე, რათა გახსნათ გამართვის განყოფილება ვებსაიტის ქვემოთ, სადაც ნაჩვენებია HTML და CSS კოდები.
რა არის ინსპექტირების ელემენტის გასაღებები?
თქვენ შეიძლება ეძებთ მალსახმობებს Inspect Element-ისთვის Mac-ზე. შეგიძლიათ გამოიყენოთ შემდეგი:
- ბრძანება + ცვლა + C
- დააჭირეთ კონტროლი გასაღები და შემდეგ აირჩიეთ ნებისმიერი ელემენტი.
- დააწკაპუნეთ ტრეკიპადზე ორი თითით
როგორ შეამოწმოთ ელემენტები Chromebook-ებზე
Chromebook იყენებს Google Chrome-ს, როგორც ნაგულისხმევ ბრაუზერს. აქედან გამომდინარე, ნებისმიერი ვებსაიტის გახსნის შემდეგ, უბრალოდ დააწკაპუნეთ მაუსის მარჯვენა ღილაკით, რათა იპოვოთ Inspect Element ვარიანტი შემდეგ კონტექსტურ მენიუში.
თუ Chromebook-ს იყენებთ სამუშაოდან ან სკოლიდან, შეიძლება დაგისვათ ეს შეკითხვა:
რატომ არ შემიძლია ჩემი სკოლის Chromebook-ის შემოწმება?
სკოლისა და ბიზნესის ადმინისტრატორების უმეტესობა გამორთავს გაფართოებულ ფუნქციებს Chromebook-ზე, რომლებსაც ისინი მოგაწვდიან სამუშაოდ ან სწავლისთვის. ვინაიდან დეველოპერის ხელსაწყოები გაფართოებული ფუნქციებია, თქვენი სკოლის ან სამუშაო Chromebook-ის ინსტრუმენტს არ აჩვენებს Inspect Element ინსტრუმენტი.
როგორ შეამოწმოთ ელემენტები iPad/iPhone-ზე
სამწუხაროდ, თქვენ არ შეგიძლიათ გამოიყენოთ Inspect Element ინსტრუმენტი iPhone-ზე ან iPad-ზე Mac-ის გარეშე.
iOS-სა და iPadOS-ს აქვთ ვებ ინსპექტორი Safari აპისთვის. თუმცა, ის მუშაობს მხოლოდ იმ შემთხვევაში, თუ დააკავშირებთ მობილურ მოწყობილობას Mac-თან, რომელზეც უკვე გააქტიურებული გაქვთ დეველოპერული ხელსაწყოები Safari-ისთვის. ქვემოთ მოცემულია ნაბიჯები, რომლებიც შეგიძლიათ სცადოთ:
- გახსენით iPad/iPhone პარამეტრები აპლიკაცია.
- დააწკაპუნეთ Safari მარცხენა მხარეს ნავიგაციის პანელზე.
- შემდეგ გადაახვიეთ მარჯვენა მხარეს, რომ იპოვოთ და აირჩიოთ Მოწინავე.
- გაააქტიურეთ გადართვა ამისთვის ვებ ინსპექტორი.
- ახლა, დააკავშირეთ მობილური მოწყობილობა Mac-ის გამოყენებით USB.
- iPhone/iPad-ის ავტორიზაცია Mac-ზე.
- გახსენით ნებისმიერი ვებსაიტი მობილურ მოწყობილობაზე Safari-ზე.
- ახლა გაუშვით Safari Mac-ზე და აირჩიეთ განავითარეთ ზედა მენიუს ზოლზე.
- კონტექსტური მენიუში, რომელიც იხსნება, მოძებნეთ თქვენი მობილური მოწყობილობის სახელი.
- გადაიტანეთ კურსორი მობილურ მოწყობილობაზე ყველა ღია ვებსაიტის სანახავად.
- ახლა აირჩიეთ ნებისმიერი ვებსაიტი, რომ ნახოთ HTML და CSS წყაროს კოდი Mac-ის Safari ბრაუზერზე.
დასკვნა
თქვენ შეისწავლეთ ყველა შესაძლო გზა, რათა გამოიყენოთ Inspect Element ინსტრუმენტი დროებითი ვებ გვერდის რედაქტირებისთვის. თქვენ ასევე ისწავლეთ როგორ შეამოწმოთ ელემენტები სხვადასხვა მოწყობილობებისთვის, როგორიცაა Mac, Windows, Chromebook, iPad და iPhone.
შემდეგ ჯერზე, როდესაც მოგიწევთ ვებ გვერდის შეცვლა გართობის ან პროფესიული საჭიროებისთვის, სცადეთ ეს მეთოდები. თქვენ ნამდვილად მოგეწონებათ ეს მარტივი ნაბიჯები სხვა რთულ მეთოდებთან შედარებით, რომლებიც ახსნილია სხვაგან.
ნუ დაგავიწყდებათ კომენტარების დატოვება ქვემოთ, თუ ზემოაღნიშნული ნაბიჯები დაგეხმარათ, ნებისმიერი მეთოდი, რომელიც თქვენთვის რთულია, ან რაიმე საიდუმლო რჩევა Inspect Element ინსტრუმენტის შესახებ.
გჭირდებათ ვებ გვერდი, როგორც დაბეჭდილი მითითება? ისწავლეთ როგორ სწრაფად შეინახეთ ვებ გვერდი PDF ფორმატში ახლა!