Хөтөч бүрт Вэб хуудасны эх кодыг хэрхэн үзэх талаар

Таны уншсан вэб хуудас нь бусад кодын эх кодоос бүрддэг. Энэ бол таны вэб хөтчийг татсан мэдээлэл бөгөөд яг одоо таны уншсан зүйл рүү хөрвүүлдэг.

Ихэнх веб хөтчүүд нь ямар төрлийн төхөөрөмжийг ашиглахаас үл хамааран нэмэлт програм хангамжгүйгээр веб хуудасны эх кодыг харах чадвартай байдаг.

Зарим нь дэвшилтэт функц, бүтцийг санал болгодог бөгөөд HTML болон бусад програмчлалын кодыг илүү хялбар болгодог.

Яагаад Source Code-ийг харахыг хүсч байна вэ?

Хуудасны эх кодыг харахыг хүсэж болох хэд хэдэн шалтгаан бий. Хэрэв та вэбсайт хөгжүүлэгч бол, магадгүй та өөр програмистын тодорхой загвар эсвэл хэрэгжилтийн бүрхүүлийн доор хайж үзээрэй. Магадгүй та чанарын баталгааны байдалд байгаа бөгөөд яагаад вэб хуудасны тодорхой хэсгийг яаж хийх эсвэл яаж ажиллахыг тогтоохыг оролдож байна.

Та мөн өөрийн хуудсаа хэрхэн кодлох болон бодит бодит жишээг хайж сурахыг хичээдэг эхлэгч байж болно. Мэдээжийн хэрэг, та эдгээр ангилалуудын аль нэгэнд орохгүй байж магадгүй юм.

Доорх жагсаалт нь таны хөтөч дээр эх кодыг хэрхэн үзэх талаар зааварчилгаа болно.

Гүүгл Кром

Идэвхжүүлсэн: Chrome OS, Линукс, macOS, Windows

Кромын ширээний хувилбар нь дараахь гарын товчлуурыг ашиглан хамгийн бага болон хамгийн хялбараар хуудсын эх кодыг үзэх гурван аргыг санал болгодог: CTRL + U ( COMMAND + OPTION + U дээр macOS).

Дарагдсан үед энэ товчлол нь идэвхтэй хуудасны HTML болон бусад кодыг харуулах шинэ хөтчийн цонх нээгдэнэ. Энэ эх сурвалж нь өнгөний кодчилсон, бүтцэд тулгуурласан бөгөөд ингэснээр үүнийг илүү хялбар болгохын тулд хайж буй зүйлээ олох болно. Дараах текстийг оруулаад Chrome-ийн хаягийн мөрөн дээр вэб хуудасны URL -н ​​зүүн талд нэмж оруулаад Enter товчийг дарах болно: view-source: (өөрөөр хэлбэл, view-source: https: // www .).

Гурав дахь арга нь Chrome-ийн хөгжүүлэгч багажийн тусламжтайгаар та хуудасны кодонд гүн гүнзгий шумбах, тест хийх болон хөгжүүлэхэд зориулж ашиглах боломжтой болно. Хөгжмийн хэрэгслүүдийн интерфэйсийг энэ товчлуур ашиглан CTRL + SHIFT + I ( COMMAND + OPTION + I ) ашиглан нээж, хааж болно. Та мөн дараах замыг ашиглан тэдгээрийг ажиллуулж болно.

1. Гол цэсийн товчлуур дээр дарж, баруун дээд буланд байрладаг бөгөөд босоо шугамтай гурван цэгээр дүрслэгдэнэ.
2. Унтраах цэс гарч ирэх үед хулганы заагчийг илүү олон хэрэгсэлийн сонголтоор дээшлүүл.
3. Дэд цэс гарч ирэх үед, Developer хэрэгсэл дээр дар.

Андройд
Андройд дээр вэб хуудсын эх сурвалжийг үзэх нь дараахь текстийг өөрийн хаягийн (буюу URL) нүүрэн талдаа оруулах ба доорхи текстийг оруулахад хялбар байдаг: view-source :. Үүний нэг жишээ бол эх сурвалж: https: // www. . Тухайн хуудсан дээрх HTML болон бусад кодыг идэвхтэй цонхонд даруй харуулах болно.

Тагийн
Таны Ipad, iPhone, эсвэл iPod-тэй Chrome-ийг ашиглан эх кодыг харах аргагүй боловч хамгийн энгийн, хамгийн үр дүнтэй нь View Source програм зэрэг гуравдагч талын шийдлийг ашиглах явдал юм.

App Store-д $ 0.99-т боломжтой бол, Эх сурвалж харах нь танд хуудасны URL-ыг оруулахыг хүсэх (эсвэл үүнийг Chrome-ийн хаягийн мөрөөс хуулж / paste хийх нь заримдаа хамгийн хялбар зам юм). HTML болон бусад эх кодыг харуулахаас гадна, тусдаа хуудасны өмч, Document Object Model (DOM), мөн хуудасны хэмжээ, күүки болон бусад сонирхолтой зүйлсийг үзүүлдэг цонхтой.

Microsoft Edge

Ажиллаж байгаа: Windows

Edge browser нь танд одоо байгаа хуудсын эх кодыг Хөгжүүлэгчийн Хэрэгсэлийн интерфейсээр дамжуулан харж, дүн шинжилгээ хийж, удирдаж болно. Энэхүү хялбар тохиргоонд хандахын тулд та эдгээр гарын товчлуурын аль нэгийг ашиглаж болно: F12 эсвэл CTRL + U. Хэрэв та оронд нь хулганыг илүүд үзсэн бол Edge's цэсний товчлуур дээр дарах (баруун дээд буланд байрлах гурван цэгүүд) дээр дарж жагсаалтаас F12 Developer Tools сонголтыг сонгоно уу.

Dev хэрэгсэл эхний удаа ажилласнаар Edge нь нэмэлт хоёр сонголтыг хөтчийн контекст цэсэнд (вэб хуудас доторх хаана ч баруун товчин орох боломжтой) нэмж өгнө. Элементийг шалгаад Эхийг үзэх , dev товчийг Debugger хэсгийг нээнэ эх кодтой хамт хэрэглэгддэг хэрэгслүүдийн интерфэйс.

Mozilla Firefox

Идэвхжүүлэв: Линукс, macOS, Windows

Firefox-ийн ширээний хувилбарт хуудасны эх кодыг харахын тулд та өөрийн гар дээрээ CTRL + U ( COMMAND + U on macOS) дарж идэвхжүүлсэн вэб хуудасны HTML болон бусад кодыг агуулсан шинэ табыг нээх болно.

Дараах текстийг хуудасны URL-н зүүн талд шууд байршуулахын тулд ижил эх сурвалжийг одоогийн таб дээр харуулах болно: view-source: (өөрөөр хэлбэл, view-source: https: // www.) .

Хуудасны эх кодод хандах бас нэг арга бол Firefox-ийн хөгжүүлэгч багаж хэрэгслээр дамжуулан дараах алхмуудыг хийх боломжтой.

1. Таны браузер цонхны баруун дээд буланд байрладаг үндсэн цэсийн товчлуур дээр дарж гурван хэвтээ шугамаар дүрслэгдэнэ.
2. Поп гарах цэс гарч ирэх үед Хөгжүүлэгч "түлхүүрийг" дүрсэн дээр дар.
3. Вэб хөгжүүлэгчийн агуулгын цэс одоо харагдах болно. Page Source сонголтыг сонгоно уу.

Firefox нь мөн хуудасны тухайн хэсэгт зориулсан эх кодыг харах боломжийг олгодог тул асуудлыг ялгахад хялбар болгоно. Үүнийг хийхийн тулд эхлээд хулганыг сонирхож байгаа газраа эхлээд тодруулаарай. Дараа нь, баруун товчлуур дээр дарж сонгох Эх сурвалжийг браузерын контентын цэснээс сонгоно уу.

Андройд
Firefox-ийн Андройд хувилбарт эх кодыг үзэх нь вэб хуудсын URL-ыг дараах тексттэй угтах боломжтой: view-source:. Жишээ нь, та дараахь текстийг браузерын хаягийн мөрөнд дараахь текстийг илгээх HTML эхийг харахын тулд : view-source: https: // www. .

Тагийн
IPad, iPhone эсвэл iPod touch дээр вэб хуудасны эх кодыг үзэх бидний санал болгож буй арга нь App Store дээр $ 0.99-ийг үзэх боломжтой. Firefox-тэй шууд холбогдоогүй боловч вэб хөтөчөөс URL-ыг хуулж, хуулж, тухайн хуудастай холбоотой HTML болон бусад кодыг илрүүлэхийн тулд апп руу оруулаарай.

Apple Safari

IOS болон macOS дээр ажиллуулах

Тагийн
IOS-д зориулсан Safari нь хуудсын эхийг харах чадварыг агуулдаггүй боловч хөтөч нь App Store дээр $ 0.99-ийг үзэх боломжтой.

Энэ гуравдагч этгээдийн аппликейшн Safari хөтчийг буцааж суулгаж, дэлгэцийн доод талд байрлах Хуваалцах товч дээр дараад квадрат болон up arrow дээр дүрслэх болно. IOS Share Sheet нь одоо Safari цонхны доод хэсгийг давхих ёстой. Баруун тийш гүйлгэж, View Source товчийг сонгоно уу.

Идэвхтэй хуудасны эх кодыг өнгөт кодчилсон, бүтэцтэй дүрсээр одоо хуудасны эд хөрөнгө, скрипт болон бусад зүйлсийг харах боломжтой бусад цонхнуудын хамт харуулах болно.

macOS
Safari-ийн ширээний компьютер дээрх хуудасны эх кодыг үзэхийн тулд эхлээд хөгжүүлэх цэсийг идэвхжүүлэх хэрэгтэй. Доорх алхмууд нь энэ далд цэсийг идэвхжүүлж, хуудасны HTML эхийг үзүүлэх замаар танд алхдаг.

1. Дэлгэцийн дээд хэсэгт байрлах хөтчийн цэсэнд Safari дээр дарна уу.
2. Унтраах цэс гарч ирэх үед Тохиргооны сонголтыг сонго.
3. Safari's Preferences нь одоо харагдах болно. Дээд эгнээний баруун гар талд байрлах Нарийвчилсан дүрс дээр дарна уу.
4. Нарийвчилсан хэсгийн ёроол руу чиглүүлэх бол Show Develop цэсийг цэсний мөрөн дээр хоосон checkbox-тэй хамт байрлуулна. Энэ хайрцагт нэг удаа дарж тэмдэглэгээг байрлуулж, Тохируулгын цонхыг зүүн дээд буланд байрлах улаан "х" дээр товш.
5. Дэлгэцийн дээд талд байрлах Develop цэс дээр дарна уу.
6. Унтраах цэс гарч ирвэл Show Page Эх сурвалжийг сонгоно уу. Та оронд нь дараах гарын товчлуурыг ашиглаж болно: COMMAND + OPTION + U.

Opera

Идэвхжүүлэв: Линукс, macOS, Windows

Opera хөтөлд идэвхтэй вэб хуудаснаас эх кодыг харахын тулд дараах гарын товчлуурыг ашиглана: CTRL + U ( COMMAND + OPTION + U дээр macOS). Хэрэв та оронд нь одоогийн таб дахь эх сурвалжийг ачаалахыг илүүд үзвэл дараах мөрийг хуудасныхаа зүүн талд байрлах хаягийн мөрөнд бичээд Enter : view-source: (жишээ нь, эх сурвалж: https: // www. ).

Дуурийн ширээний хувилбар нь HTML эх үүсвэр, CSS болон бусад элементүүдийг өөрийн хөгжүүлэлтийн хөгжүүлэлтийн хэрэгслүүд ашиглан харах боломжийг олгоно. Анхдагч хөтөчийн цонхны баруун гар талаас анхдагч гарч ирэх энэ интерфэйсийг эхлүүлэхийн тулд дараах гарын товчлуурыг дарна уу: CTRL + SHIFT + I ( COMMAND + OPTION + I on macOS).

Opera-ийн хөгжүүлэгчийн хэрэгсэл дараах алхмуудыг хийх боломжтой.

1. Таны хөтчийн цонхны зүүн дээд буланд байрлах Opera лого дээр дарна уу.
2. Унтраах цэс гарч ирэх үед хулганы заагчийг илүү олон хэрэгсэлийн сонголтоор дээшлүүл.
3. Show developer цэс дээр дарна уу.
4. Opera logo дээр дарна уу.
5. Унтраах цэс гарч ирэх үед Хөгжүүлэгчийнхээ дээрхи курсороо харуул .
6. Дэд цэс гарч ирэх үед, Developer Tools дээр дар.

Вivaldi

Vivaldi браузер дотор хуудасны эхийг үзэх олон арга зам бий. Хамгийн хялбар нь CTRL + U товчлуураар дамжуулан шинэ таб дахь идэвхитэй хуудсан дээрх кодыг өгдөг.

Та мөн дараахь текстийг хуудасны URL-н нүүрэн дээр нэмж болно. Үүний нэг жишээ нь эх сурвалж: http: // www. .

Өөр нэг арга нь хөтчийн багажны цэснээс CTRL + SHIFT + I хослолыг дарах эсвэл Хөтөч-ийн Tools цэсний Хөгжүүлэгчийн Хэрэгсэл гэсэн сонголтоор дамжуулан браузерын нэгдсэн хөгжүүлэгчдийн хэрэгслүүдээр дамждаг. Энэ нь зүүн дээд буланд байгаа 'V' лого дээр дарж олддог. Dev хэрэгслийг ашиглах нь хуудасны эх сурвалжийн талаар илүү гүнзгий дүн шинжилгээ хийх боломжийг олгодог.