Юу мэдэх вэ
-
Сафари дээр: Вэб хуудас дээр хулганы баруун товчийг дараад Элемент шалгах-г сонгоно уу.
- Chrome дээр та хулганы баруун товчийг дараад Шалгах дээр дарж болно.
- Сафари дээрх онцлогийг идэвхжүүлэхийн тулд: Safari > Preferences > Advanced 64334-г шалгана уу. Цэсийн мөрөнд Хөгжүүлэх цэсийг харуулах хайрцаг.
Энэ нийтлэл нь Mac дээр вэб сайтын элементийг хэрхэн шалгахыг заадаг. Үүнийг Safari болон Google Chrome-оор хэрхэн хийхийг харна.
Та Mac дээр Inspect Element функцийг хэрхэн ашиглах вэ?
Safari ашиглах үед Mac дээрх элементүүдийг шалгахын өмнө хөтчөөс хөгжүүлэгчийн цэсийг идэвхжүүлэх шаардлагатай. Үүнийг хэрхэн асаах, элементийг шалгахын тулд юу хийх талаар эндээс харна уу.
Хэрэв та Хавчуурга болон Цонхны хооронд хөгжүүлэхийг харах боломжтой бол Хөгжүүлэгчийн цэс аль хэдийн идэвхжсэн бөгөөд та 4-р алхам руу алгасаж болно.
Сафари дахь Элемент шалгах функцийг ашиглах
Mac компьютер дээрх өгөгдмөл хөтөч Safari-д Inspect Element-ийг хэрхэн ашиглах талаар эндээс үзнэ үү.
-
Сафари дээр Safari > Тохиргоо дээр дарна уу.
Image -
Дэвшилтэт дээр дарна уу.
Image -
Цэсийн талбараас Хөгжүүлэх цэсийг харуулах дээр дарж цонхыг хаа.
Image - Вэбсайт үзэхдээ шалгахыг хүссэн зүйл дээрээ баруун товшино уу.
-
Шалгах элемент дээр дарна уу.
Image -
Та одоо шалгасан вэбсайтынхаа ард байгаа кодыг харах боломжтой.
Image
Mac дээр Chrome-д Элемент шалгах функцийг ашиглах нь
Хэрэв та Mac дээрээ Safari-н оронд Chrome ашигладаг бол энэ функцийг идэвхжүүлэх шаардлагагүй тул элементийг харахад илүү хялбар болно. Юу хийх вэ.
- Chrome дээр вэб сайт руу орно уу.
- Шалгах гэж буй элемент дээрээ баруун товшино уу.
-
Шалгах дээр дарна уу.
Image -
Та одоо Chrome-ын хажуугийн цонхноос кодыг харах боломжтой.
Image
Би яагаад Mac дээрээ шалгаж болохгүй гэж?
Хэрэв та Safari доторх Хөгжүүлэгчийн цэсийг идэвхжүүлээгүй бол та өөрийн Mac дээрх элементийг шалгах боломжгүй байж магадгүй. Үүнийг хэрхэн хийхийг сануулж байна.
-
Сафари дээр Safari > Тохиргоо дээр дарна уу.
Image -
Дэвшилтэт дээр дарна уу.
Image -
Цэсийн талбараас Хөгжүүлэх цэсийг харуулах дээр дарж цонхыг хаа.
Image
Элементийг шалгах замаар вэб сайтад хэрхэн өөрчлөлт оруулах вэ
Вэбсайт дээрх кодыг харах боломж олгохоос гадна Inspect Element-ээр дамжуулан вэбсайтын дурын элементийг түр хугацаанд өөрчлөх боломжтой. Safari-р үүнийг хэрхэн хийх талаар эндээс үзнэ үү.
Энэ процесс нь бусад хөтөч дээр маш төстэй.
- Вэбсайт үзэхдээ шалгахыг хүссэн зүйл дээрээ баруун товшино уу.
- Шалгах элемент дээр дарна уу.
- Засах боломжтой болгохын тулд кодын текстэн дээр давхар товшино уу.
- Устгах эсвэл шинэ текст оруулах.
- Enter дээр товш.
- Таны ашиг тусын тулд кодыг түр хугацаанд өөрчилсөн.
Та яагаад Элемент шалгах функцийг ашиглахыг хүсэж байна вэ?
Элементийг шалгах боломжтой байх нь олон шалтгааны улмаас тустай.
- Кодыг шууд солихын тулд. Вэб сайтын дизайнерууд тухайн вэб сайт дээрх зүйлийг түр хугацаанд өөрчлөх боломжтой бөгөөд өөрчлөлтүүд ямар нэгэн зүйлд хэрхэн нөлөөлж байгааг харах боломжтой.
- Кодыг шалгахын тулд. Дизайнерууд болон маркетингийн хүмүүс хоёулаа Google Analytics-ийн дэлгэрэнгүй мэдээлэл байгаа эсэхийг баталгаажуулахын тулд кодыг шалгаж болно.
- Сайтаас зураг тусад нь үзэх. Хэрэв сайт танд шинэ цонх эсвэл цонхонд зураг нээхийг зөвшөөрөхгүй бол тухайн элементийг харснаар үүнийг хийх боломжтой болно.
-
Tinker. Вэб хуудасны кодыг харах нь юу харж байгаагаа ойлгоход тань тусалж, таны нэвтэрч буй сайтад юу болоод байгаагийн нууцыг арилгах болно. Энэ нь цахилгаан хэрэгсэл хэрхэн ажиллаж байгааг харахын тулд салгахтай адил боловч энэ тохиолдолд алдах эрэг байхгүй.
FAQ
Вэбсайтыг шалгах нь хууль ёсных уу?
Тийм. Гэсэн хэдий ч, хэрэв та вэбсайтаас ямар нэгэн код эсвэл өмч ашиглахаар төлөвлөж байгаа бол эзэмшигчтэй нь уулзаж, зохиогчийн эрхийн тэмдэглэл оруулахаа мартуузай.
Би шалгах элементтэй вэб сайтаас HTML хэрхэн хуулах вэ?
Chrome дээр хулганы баруун товчийг дараад Шалгах гэснийг сонгоод дээд хэсэг рүү очоод шошгон дээр хулганы баруун товчийг дарна уу (жишээ нь). Хуулбарлах > OuterHTML-г сонгоод кодыг текст эсвэл HTML файлд буулгана уу.
Би CSS-ийг шалгах элементтэй вэбсайтаас хуулж болох уу?
Тийм. Хуулахыг хүссэн элемент дээрээ хулганы баруун товчийг дараад Шалгах-г сонгоно уу. Тодруулсан код дээр хулганы баруун товчийг дараад Хуулах > Загвар хуулах-г сонгоно уу.
Би шалгах элементийг ашиглан хадгалсан нууц үгээ хэрхэн харах вэ?
Нууц үгээ илрүүлэхийн тулд нууц үгийн талбар дээр хулганы баруун товчийг дараад Шалгах-г сонгоно уу. Тодруулсан хэсгээс type=”нууц үг” гэж хайж, нууц үг гэснийг текст гэж солино уу. Chrome-д бүх нууц үгээ харуулах илүү хялбар арга бий.
