Inspect Element დეველოპერის ინსტრუმენტი Firefox– ში საშუალებას გაძლევთ ზუსტად განსაზღვროთ HTML კოდი ყველაფრისთვის, რასაც ხედავთ თქვენს ვებ გვერდზე. HTML და თანმხლები CSS სტილის ფურცელი სრულად რედაქტირებადია ამ ინსტრუმენტების გახსნისთანავე. ექსპერიმენტი ჩაატარეთ თქვენთვის სასურველ ცვლილებებზე, შემდეგ განაახლეთ გვერდი და დაუბრუნდით ვებ – გვერდის დანიშნულ გარეგნობას.
ნაბიჯები
2 ნაწილი 1: ელემენტების შემოწმება
ნაბიჯი 1. მარჯვენა ღილაკით დააწკაპუნეთ ვებგვერდის რომელიმე ელემენტზე
თქვენ შეგიძლიათ დააწკაპუნოთ მარჯვენა ღილაკით სურათებზე, ტექსტზე, ფონზე ან სხვა ელემენტზე. თუ თქვენ არ გაქვთ ორი ღილაკიანი მაუსი, დააწკაპუნეთ მარცხენა ღილაკზე კონტროლის დაჭერისას.
ნაბიჯი 2. დააწკაპუნეთ ელემენტის შემოწმებაზე ჩამოსაშლელი მენიუდან
ინსტრუმენტთა პანელი უნდა გამოჩნდეს თქვენი ფანჯრის ბოლოში. პანელი ასევე გამოჩნდება ინსტრუმენტების პანელის ქვემოთ, რომელიც აჩვენებს გვერდის HTML კოდს.
ნაბიჯი 3. განსაზღვრეთ ინსტრუმენტთა პანელები და პანელები
როდესაც დააწკაპუნებთ ელემენტის შემოწმებას, რამდენიმე ფანჯარა გაიხსნება თქვენი ფანჯრის ბოლოში. აქ მოცემულია მათი გამოყენების და სახელების ჩამონათვალი:
- ზედა რიგი არის Toolbox Toolbar. ამას აქვს რამდენიმე დეველოპერის ინსტრუმენტი, მაგრამ ჩვენ დაინტერესებული ვართ ინსპექტორით მარცხნივ. შეინახეთ ეს არჩეული (მონიშნულია ლურჯში) მთელი ამ სახელმძღვანელოსთვის.
- ინსტრუმენტთა პანელის ქვემოთ არის HTML ელემენტების ერთი Breadcrumbs მწკრივი, რომელიც აჩვენებს არჩეულ ელემენტთან დაკავშირებულ სრულ გზას.
- ამ სტრიქონის ქვემოთ მოთავსებული ფანჯარა აჩვენებს HTML ხეს ან გვერდის "მარკირების ხედს". თქვენს მიერ არჩეული ელემენტის HTML მონიშნულია და ცენტრდება ამ სარკმელში.
- ფანჯარა მარჯვნივ აჩვენებს CSS სტილის ცხრილს ამ გვერდისთვის.
ნაბიჯი 4. აირჩიეთ სხვა ელემენტი
ინსტრუმენტთა პანელის გახსნის შემდეგ, სხვა ელემენტის შერჩევა ადვილია. აქ არის სამი გზა ამის გაკეთება:
- გადაიტანეთ HTML სტრიქონზე შესაბამისი ელემენტის ხაზგასასმელად (მოითხოვს Firefox 34+). დააწკაპუნეთ HTML ამ ელემენტის ასარჩევად.
- დააწკაპუნეთ ინსტრუმენტის პანელის მარცხნივ მარცხნივ აირჩიეთ ელემენტის არჩევა: ხატი არის კურსორი კვადრატზე. გადაიტანეთ კურსორი გვერდზე ელემენტების ხაზგასასმელად, შემდეგ დააჭირეთ ელემენტის ასარჩევად.
ნაბიჯი 5. ნავიგაცია კოდით
დააწკაპუნეთ სადმე HTML პანელში. გამოიყენეთ კლავიატურის მარცხენა და მარჯვენა ისრები კოდის გადასატანად (მოითხოვს Firefox 39+). ეს სასარგებლოა იმ ელემენტებისთვის, რომლებიც ძალიან მცირეა ხელით შესარჩევად.
- ნაცრისფერი HTML ეხება ელემენტებს, რომლებიც არ არის ნაჩვენები გვერდზე. ეს მოიცავს კომენტარებს, გარკვეულ კვანძებს, როგორიცაა და ელემენტებს, რომლებიც დამალულია CSS ჩვენების თვისებით.
- დააწკაპუნეთ ისარზე კონტეინერების მარცხნივ, რომ გაზარდოთ ან დაიმალოთ მისი შინაარსი. ყველა შინაარსის გასაფართოებლად, დაჭერისას გეჭიროთ alt="სურათი" ან ვარიანტი.
ნაბიჯი 6. მოძებნეთ ელემენტი
მოძებნეთ საძიებო ზოლი (გამადიდებელი შუშის ხატი) Breadcrumbs რიგის უკიდურეს მარჯვნივ. დააწკაპუნეთ მასზე გასაფართოებლად, შემდეგ ჩაწერეთ HTML კოდი, რომელსაც ეძებთ. აკრეფისას გამოჩნდება ამომხტარი ფანჯარა, რომელშიც ჩამოთვლილია შესაბამისი ელემენტები. დააწკაპუნეთ ერთზე ამ ელემენტის შესარჩევად და გადაახვიეთ HTML პანელი მის კოდზე.
მე -2 ნაწილი 2: HTML- ის რედაქტირება
ნაბიჯი 1. განაახლეთ გვერდი ნებისმიერ დროს თავიდან დასაწყებად
თუ თქვენ ახალი ხართ ვებ დეველოპერის ინსტრუმენტებში, გესმით, რომ ისინი არ ახდენენ მუდმივ ცვლილებებს. თქვენი ცვლილებები შესამჩნევი იქნება მხოლოდ თქვენს ეკრანზე და მხოლოდ სანამ არ დახურავთ გვერდს ან არ განაახლებთ მას. ნუ დააყოვნებთ ექსპერიმენტებს მაშინაც კი, თუ არ ხართ დარწმუნებული რა მოხდება.
ნაბიჯი 2. ორჯერ დააწკაპუნეთ HTML ტექსტის შესაცვლელად
ორჯერ დააწკაპუნეთ HTML ხაზზე. ჩაწერეთ ახალი ტექსტი და დააჭირეთ Enter- ს თქვენი ცვლილებების შესანახად.
ნაბიჯი 3. დააწკაპუნეთ და გეჭიროთ breadcrumb მეტი ვარიანტისთვის
გახსოვდეთ, Breadcrumb ინსტრუმენტთა პანელი მოთავსებულია HTML– ს სრულ ხესა და ზედა ინსტრუმენტთა პანელს შორის. დააწკაპუნეთ და დაიჭირეთ ამ სტრიქონის რომელიმე ელემენტი, რომ გახსნათ ვრცელი მენიუ. აქ არის არასრული სახელმძღვანელო ამ ვარიანტების შესახებ:
- "რედაქტირება როგორც HTML" ხდის კვანძს და მის ყველა შინაარსს HTML ხეში, ნაცვლად იმისა, რომ თითოეული სტრიქონი ინდივიდუალურად შეცვალონ.
- "დააკოპირეთ შიდა HTML" აკოპირებს კვანძის მთელ შინაარსს, ხოლო "გარე HTML კოპირება" ასევე კვანძს (როგორიცაა ან
- "ჩასმა" იწვევს რამდენიმე ვარიანტს, თუ სად უნდა ჩასვათ, მაგალითად, ამ კვანძამდე ან კვანძის პირველი შვილის შემდეგ.
- : hover,: active და: focus ცვლის ელემენტის გარეგნობას, როდესაც მომხმარებელი მასთან ურთიერთობს. ზუსტი ეფექტი განისაზღვრება CSS სტილის ცხრილით (რედაქტირებადი მარჯვენა პანელიდან).
ნაბიჯი 4. გადაათრიეთ და ჩამოაგდეთ
კოდში ელემენტების გადასალაგებლად დააწკაპუნეთ და გააჩერეთ HTML სანამ არ გამოჩნდება წყვეტილი ხაზი. გადაიტანეთ იგი ხეზე მაღლა ან ქვემოთ და გაუშვით, როდესაც დაშლილი ხაზი სასურველ ადგილზეა.
ამისათვის საჭიროა Firefox 39 ან უფრო გვიან
ნაბიჯი 5. დახურეთ დეველოპერის ინსტრუმენტთა პანელი
ყველა ამ ლამაზი ფანჯრის დასახურად, უბრალოდ დააჭირეთ X ინსტრუმენტთა პანელის უკიდურეს მარჯვენა კუთხეში, CSS პანელის ზემოთ.
Რჩევები
- თქვენ ასევე შეგიძლიათ გახსნათ ინსტრუმენტების პანელი ზედა მენიუს პარამეტრებით:
- Windows: Firefox → ვებ შემქმნელი → Toggle Tools
- Mac ან Linux: ინსტრუმენტები → ვებ შემქმნელი → გადართვა ინსტრუმენტები
- Firefox 40 -მა შემოიტანა CSS პანელის დამალვის ვარიანტი, რათა მეტი ადგილი მოგცეთ HTML- ის რედაქტირებისას. მოძებნეთ ისრის ხატი Breadcrumbs რიგის უკიდურეს მარჯვნივ, საძიებო ზოლის მარჯვნივ. დააწკაპუნეთ ამ ხატზე, რომ დაიმალოთ CSS სარკმელი და კვლავ დააწკაპუნეთ, რომ ის კვლავ გააფართოვოთ.
- CSS ფანჯარა ასევე რედაქტირებადია, მაგრამ ეს სცილდება ამ სახელმძღვანელოს ფარგლებს. ეს სტატია ასწავლის CSS– ის საფუძვლებს.
