იხილეთ HTML და CSS ნებისმიერი ვებ გვერდი
ვებგვერდი აგებულია კოდით , მაგრამ შედეგი კონკრეტული გვერდებია სურათებით, ვიდეოებით, შრიფტით და სხვა. ამ ელემენტების შესაცვლელად ან დაინახავ ის, რაც შედგება, თქვენ უნდა იპოვოთ ის კონკრეტული ხაზი, რომელიც აკონტროლებს მას. ამის გაკეთება შეგიძლიათ ელემენტის ინსპექტირების ინსტრუმენტთან.
ვებ-ბრაუზერების უმრავლესობა არ ჩაიტვირთავთ ინსპექტირების ინსტრუმენტს ან დაამატეთ Add-on. ამის ნაცვლად, ისინი მოგცემთ უფლება დააწკაპუნეთ გვერდზე ელემენტის და შეამოწმეთ ან შეამოწმოს ელემენტი . თუმცა, ეს პროცესი შესაძლოა თქვენს ბრაუზერში ცოტა განსხვავებული იყოს.
შეამოწმეთ ელემენტები Chrome- ში
Google Chrome- ის უახლესი ვერსიები მოგცემთ გვერდს რამდენიმე გზავნილში, რომელთა გამოყენებაც Chrome- ის DevTools- ში გამოყენებულია:
- მარჯვენა ღილაკით რაღაც გვერდზე (ან ცარიელი ფართობი) და შეამოწმეთ
- შეიტანეთ Ctrl + Shift + I კლავიატურის კომბინაცია
- გამოიყენეთ Chrome მენიუ დამატებითი ინსტრუმენტები> შემქმნელი ხელსაწყოების შესაერთებლად
Chrome DevTools მოგცემთ რამეებს, როგორიცაა ადვილად კოპირება ან რედაქტირება HTML ხაზები ან დამალვა ან წაშლა ელემენტები საერთოდ (გვერდის განახლებამდე).
მას შემდეგ, რაც DevTools იხსნება გვერდის გვერდზე, თქვენ შეგიძლიათ შეცვალოთ, სადაც ის პოზიციონირებულია, პოპ-ის გვერდიდან, მოძებნეთ ყველა გვერდის ფაილები, შეარჩიეთ ელემენტები გვერდიდან სპეციფიური გამოკვლევისთვის, ასლის ფაილებისა და მისამართებისგან, პარამეტრები.
შეამოწმეთ ელემენტები Firefox- ში
Chrome- ის მსგავსად, Firefox- ს აქვს რამდენიმე განსხვავებული გზა, რომლის საშუალებითაც გახსნა ინსტრუმენტი ინსპექტორი:
- მარჯვენა ღილაკის გვერდზე დააწკაპუნეთ ცარიელი ველი ან აირჩიეთ ელემენტი და შეარჩიეთ ელემენტის შემოწმება
- შეიტანეთ Ctrl + Shift + T ან Ctrl + Shift + I კლავიატურაზე
- Firefox- ის მენიუდან დააწკაპუნეთ დეველოპერის ინსპექტორი
- საწყისი ინსტრუმენტები მენიუდან, დააწკაპუნეთ ვებ დეველოპერი> ინსპექტორი
Firefox- ში სხვადასხვა ელემენტების გადაადგილებისას ინსპექტორი ავტომატურად აღმოაჩენს ელემენტის კოდის ინფორმაციის მოძიებას. დაწკაპეთ ელემენტი და "on-the-fly search" შეწყდება და თქვენ შეგიძლიათ შეამოწმოთ ელემენტის ინსპექტორი ფანჯარა.
მარჯვენა ღილაკის ელემენტს იპოვონ ყველა მხარდაჭერილი კონტროლი. შეგიძლიათ გააკეთოთ ისეთი რამ, როგორიცაა HTML, კოპირება ან ჩასვით შიდა ან გარე HTML კოდი, აჩვენე DOM თვისებები, სკრინშოტი ან წაშლა კვანძი, ადვილად ვრცელდება ახალი ატრიბუტები, იხილეთ ყველა გვერდის CSS და სხვა.
შეამოწმეთ ელემენტები ოპერაში
ოპერას შეუძლია შეამოწმოს ელემენტებიც, მისი DOM ინსპექტორი ინსტრუმენტი, რომელიც Chrome- ის იდენტურია. აი, როგორ უნდა მივიღოთ ეს:
- გამოიყენეთ კლავიატურის მალსახმობი Ctrl + Shift + I
- ნავიგაცია მენიუში> სხვა ინსტრუმენტები> შოუ დეველოპერის მენიუ და შემდეგ გახსენით მენიუდან > დეველოპერი> შემქმნელი ინსტრუმენტები
- მარჯვენა ღილაკის მენიუდან ნებისმიერი ელემენტის გვერდზე, აირჩიეთ შეამოწმეთ ელემენტი
შეამოწმოს ელემენტები Internet Explorer- ში
მსგავსი საძიებო ინსტრუმენტი, რომელსაც ეწოდება დეველოპერის ინსტრუმენტები, ხელმისაწვდომია Internet Explorer- ში:
- პრეს F12 კლავიატურაზე
- გამოიყენეთ ინსტრუმენტები> F12 შემქმნელი მენიუ ვარიანტი (მოხვდა Alt + X თუ არ ჩანს ინსტრუმენტები მენიუ)
- მარჯვენა ღილაკით გვერდზე და დაწკაპეთ შეამოწმეთ ელემენტი
IE აქვს არჩეული ელემენტის ინსტრუმენტი ამ ახალი მენიუში, რომელიც საშუალებას მოგცემთ დაწკაპეთ ნებისმიერ გვერდზე ელემენტის სანახავად მისი HTML და CSS დეტალები. თქვენ ასევე შეგიძლიათ ადვილად გამორთოთ / ჩართვა ელემენტის ხაზს უსვამს, ხოლო თქვენ ათვალიერებს მეშვეობით DOM Explorer tab.
ზემოთ ბროუზერების სხვა ელემენტების ინსპექტორების მსგავსად, Internet Explorer საშუალებას გაძლევთ გაჭრა, კოპირება და ჩასმა ელემენტები, ისევე როგორც HTML- ის რედაქტირება, ატრიბუტების დამატება, ასლის ელემენტები ერთვის სტილით და სხვა.