Аливаа вэб хуудасны HTML болон CSS-г үзнэ үү
Вэбсайт нь кодын мөрөөр бүтээгдсэн боловч үр дүн нь зураг, видео, фонт болон бусад хуудсуудтай тусгай хуудсууд юм. Эдгээр элементүүдийн аль нэгийг өөрчлөх эсвэл юуг нь харвал тэдгээрийг хянах кодын тусгай мөрийг олох хэрэгтэй. Үүнийг элементийн хяналтын хэрэгсэл ашиглан хийж болно.
Ихэнх веб хөтөч нь танд хяналтын хэрэгсэл татаж авах эсвэл нэмэлтийг суулгахад хүргэдэггүй. Үүний оронд хуудасны элемент дээр баруун товчийг дараад шалгаж үзээрэй. Гэхдээ энэ процесс нь таны хөтөч дээр арай өөр байж болно.
Кром дахь элементүүдийг шалгана уу
Google Chrome-ийн хамгийн сүүлийн үеийн хувилбарууд нь танд Chrome DevTools-ыг ашиглах хэд хэдэн аргаар хуудас хайх боломжийг олгодог.
- Хуудасны (эсвэл хоосон хэсэг) дээр хулганын баруун товчийг дараад шалга
- Ctrl + Shift + I гарын товчлуурыг оруулна уу
- Нэмэлт хэрэгсэл> Хөгжмийн хэрэгслүүдийн тохиргоонд хандахын тулд Chrome цэсийг ашиглана уу
Chrome DevTools нь HTML мөрүүдийг хялбархан хуулж, засварлах эсвэл элементүүдийг бүгдийг нь устгах эсвэл устгах (хуудсыг дахин ачаалах хүртэл) хийх боломжтой.
DevTools хуудасны хажуу талд нээгдсэний дараа, байрлалаа хаана байршуулж, хуудсаас нь гаргаж, хуудасны бүх файлыг хайж, тодорхой шалгалтын хуудасны элементүүдийг сонгож, файлууд болон URL-үүдийг хуулж, тэр ч байтугай багцыг өөрчилж болно тохиргоонууд.
Firefox дэх элементүүдийг шалгана уу
Chrome-ийн нэгэн адил, Firefox-г Inspector гэж нэрлэдэг хэрэгсэлээ нээх хэд хэдэн аргаар ажилладаг.
- Хуудасны дээр хоосон товшино уу эсвэл элемент сонгох, мөн шалгах Элементийг сонго
- Ctrl + Shift + T эсвэл Ctrl + Shift + I оруулаарай
- Firefox-ийн цэснээс Хөгжүүлэгч > Үзүүлэгчийг дарна уу
- Tools цэснээс Вэб хөгжүүлэгч> Үзүүлэгчийг дарна уу
Firefox дээр янз бүрийн элементүүд дээр хулганаа нүүлгэх үед Inspector хэрэгсэл нь элементийн эх кодын мэдээллийг автоматаар олох болно. Элемент дээр дарж, "on-the-fly-search" зогсоох болно, та Inspector цонхноос элементийг шалгаж болно.
Бүх дэмжигдсэн хяналтыг олохын тулд элементийн баруун товчийг дарна уу. HTML хуудсыг засах, доторх болон гаднах HTML кодыг хуулж эсвэл хуулж, DOM шинж чанарыг харуулах, дэлгэцийн зургийг устгах эсвэл зангилааг устгах, шинэ шинж чанаруудыг хэрэглэх, хуудасны бүх CSS харагдана гэх мэт зүйлсийг хийж болно.
Opera дээр элементүүдийг шалгаарай
Opera нь мөн элементүүдийг шалгах боломжтой бөгөөд Chrome Inspector хэрэгсэлтэй адилхан байдаг. Үүнийг хэрхэн авахыг энд харуулав.
- Гарын товчлуурыг Ctrl + Shift + I ашиглана уу
- Цэс> Илүү> Багажнууд> Шилдэг Хөгжүүлэгчийн цэс рүү очиж цэс> Хөгжүүлэгч> Хөгжүүлэгчийн Хэрэгслүүд ашиглан цэсийг нээнэ үү
- Хуудс дээрх элемент дээр баруун товчлуурын цэснээс шалгах элемент сонго
Internet Explorer-д элементүүдийг шалгана уу
Хөгжүүлэгчийн хэрэгсэл гэж нэрлэгддэг элементийн хэрэгсэлтэй ижил төстэй хэрэгсэл нь Интернетэд Explorer-д байдаг:
- Гар дээр F12 дарна уу
- Багаж хэрэгсэл> F12 Хөгжүүлэгчийн Цэсийн сонголтыг ашиглаж ( Хэрэгслүүдийн цэс харагдахгүй бол Alt + X дарна уу)
- Хуудс дээр хулганы баруун товчлуурыг дарж, шалгахыг товшино уу Элемент
IE нь HTML болон CSS-ийн дэлгэрэнгүй мэдээллийг үзэхийн тулд ямар ч хуудсын элемент дээр дарахад энэ шинэ цэс сонгох элементийн хэрэгсэлтэй. Та DOM Explorer- ээр дамжуулан үзэж байх явцад элемент тодруулж болно.
Дээрх хөтөчүүдийн бусад элементийн байцаагчдын нэгэн адил Internet Explorer нь элементүүдийг багасгах, хуулбарлах, хуулбарлах, HTML засварлах, шинж чанарыг нэмэх, хавсаргасан загварын элементүүд болон бусад зүйлсийг хуулдаг.